Download as KEY, PPTX
Uploaded byEinar Ingebrigtsen
Sugarcoating your frontend one ViewModel at a time
This document discusses modern JavaScript development approaches like MVVM and KnockoutJS. It promotes using a ViewModel pattern to separate application logic and state from the view. This improves testability and avoids issues like tightly coupled JavaScript code. The document provides examples of building Single Page Applications with KnockoutJS, handling dependencies through AMD, and using frameworks to create composable user interfaces. Overall it advocates for test-driven development and leveraging new JavaScript capabilities for building maintainable, modular applications.
More Related Content
Similar to Sugarcoating your frontend one ViewModel at a time
![[Coscup 2012] JavascriptMVC](https://cdn.slidesharecdn.com/ss_thumbnails/coscupjavascriptmvc-120818115356-phpapp01-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Sugarcoating your frontend one ViewModel at a time
- 3. Sugarcoating your frontend one ViewModel at a time A dive into modern JavaScript development FocusH Web Junkie asS hifted™ d MVP @ pavsaun @einar i
- 4.
- 5.
- 6.
- 8.
- 9. What is jQuery? •"jQuery is designed to change the way you write JavaScript" • Cross browser • Dom traversing • Event handling • Animations • Ajax
- 10. And it allbegins with $
- 11. And it allbegins with $ • Target elements with CSS selectors • $("#elementId").makeMagic()
- 12. And it allbegins with $
- 13. And it allbegins with $
- 14. And it allbegins with $
- 15. And it allbegins with $
- 16. ... ask whatyou can do for the DOM... • Polluted CSS selectors • Passive views • Heavy coupling • Bleeding JavaScript (business logic) to DOM • Hard to test
- 17. ... thats so2011...
- 18. MVVM Model View ViewModel
- 19. MVVM Model View Observes ViewModel
- 20. MVVM Get from Model server View Observes ViewModel Observable
- 21. Like they doon the Discovery Channel • Based on Martin Fowlers Presentation Model - 2004 (http://martinfowler.com/eaaDev/PresentationModel.html) • XAML • WPF • Silverlight • WP7 • WinRT
- 22. Model • Typically datafetched from the server • Could be observable • Can be extended with computed values (e.g. FullName = FirstName + LastName)
- 23. View • Declaratively observethe ViewModel • The control is given back to the designer • Separation between the designer and the developer
- 24. ViewModel ...there is no DOM! • “Code Contract” • State • Behavior • Enables Mockup data much easier • Testable
- 25. KnockoutJS • Steve Sanderson(Microsoft fella) • v2.0 • Nuget • http://www.knockoutjs.com • ... or on a CDN http://cdn.dolittle.com/knockout/knockout-2.0.0.js
- 26.
- 27.
- 28.
- 29.
- 30. Knockout some more with.. • Custom bindings • Extenders • Plugins
- 31. Custom Bindings • Declarativelyused from the View • No bleeding of view concern into ViewModel • Transitions based on state • Insert jQuery here!
- 33. .. no-one writescode without tests / specs.. yes, JavaScript is code!
- 34. Its a jungleout there • JsTestDriver • YUI Test • BusterJs • Jasmine • JsUnit • QUnit • ... and then some...
- 35. Forseti • Getting started easily • Intuitive UI (Yes, I said it - UI) • Easy to install • Integrate with the most popular tools (IDEs + Test Runners) • Run headlessly • In fact - without any browser, not even hidden! • Run any test framework • Run on multiple JavaScript engines • Eventually run in a browser context
- 36. Single Page Applications •Never postback - again • It is an application approach - not a site approach, different mindset!
- 37. Application Storage • 5MB storage for your application • HTML • CSS • JavaScript • Other static files...
- 38. Local Storage • 25MBby default - can be increased programatically with user interaction • Offline data storage
- 39. Frameworks • Sencha / ExtJs • Backbone • Ember • Spine • Skeleton • JavaScriptMVC • Sammy.js • YUI • Knockback (hybrid) • ... and then some...
- 40. what about my dependencies? • AMD - Asynchronous Module Definition • CommonJs • RequireJs • curl.js • ... • JS vNext / Harmony
- 41. Compositional UIs • Bifrost- Features • UriMapper
- 42. Event Aggregator ViewModel 1 ViewModel 2
- 44. pav.saund@gmail.com einar@dolittle.com
- 45. Resources • http://knockoutjs.com • http://github.com/dolittlestudios/bifrost •http://github.com/dolittlestudios/forseti