Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sugarcoating your frontend one ViewModel at a time

1,263 views

Published on

A dive into modern JavaScript development

Published in: Technology, Design
  • Be the first to comment

Sugarcoating your frontend one ViewModel at a time

  1. 1. Sugarcoating your frontend one ViewModel at a time A dive into modern JavaScript development FocusH Web Junkie asS hifted™ d MVP @ pavsaun @einar i
  2. 2. The Web
  3. 3. DDD
  4. 4. DDDDOM Driven Development
  5. 5. What is jQuery?
  6. 6. What is jQuery?• "jQuery is designed to change the way you write JavaScript"• Cross browser• Dom traversing• Event handling• Animations• Ajax
  7. 7. And it all begins with $
  8. 8. And it all begins with $• Target elements with CSS selectors• $("#elementId").makeMagic()
  9. 9. And it all begins with $
  10. 10. And it all begins with $
  11. 11. And it all begins with $
  12. 12. And it all begins with $
  13. 13. ... ask what you can do for the DOM...• Polluted CSS selectors• Passive views• Heavy coupling• Bleeding JavaScript (business logic) to DOM• Hard to test
  14. 14. ... thats so 2011...
  15. 15. MVVM ModelView ViewModel
  16. 16. MVVM Model ViewObserves ViewModel
  17. 17. MVVM Get from Model server ViewObserves ViewModel Observable
  18. 18. Like they do on the Discovery Channel• Based on Martin Fowlers Presentation Model - 2004 (http://martinfowler.com/eaaDev/PresentationModel.html)• XAML • WPF • Silverlight • WP7 • WinRT
  19. 19. Model• Typically data fetched from the server• Could be observable• Can be extended with computed values (e.g. FullName = FirstName + LastName)
  20. 20. View• Declaratively observe the ViewModel• The control is given back to the designer• Separation between the designer and the developer
  21. 21. ViewModel ...there is no DOM!• “Code Contract”• State• Behavior• Enables Mockup data much easier• Testable
  22. 22. 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
  23. 23. ... by example ...
  24. 24. ... by example ...
  25. 25. ... by example ...
  26. 26. ... by example ...
  27. 27. Knockout some more with..• Custom bindings• Extenders• Plugins
  28. 28. Custom Bindings• Declaratively used from the View• No bleeding of view concern into ViewModel• Transitions based on state• Insert jQuery here!
  29. 29. .. no-one writes code without tests / specs.. yes, JavaScript is code!
  30. 30. Its a jungle out there• JsTestDriver• YUI Test• BusterJs• Jasmine• JsUnit• QUnit• ... and then some...
  31. 31. 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
  32. 32. Single Page Applications• Never postback - again• It is an application approach - not a site approach, different mindset!
  33. 33. Application Storage• 5 MB storage for your application • HTML • CSS • JavaScript • Other static files...
  34. 34. Local Storage• 25MB by default - can be increased programatically with user interaction• Offline data storage
  35. 35. Frameworks• Sencha / ExtJs• Backbone• Ember• Spine• Skeleton• JavaScriptMVC• Sammy.js• YUI• Knockback (hybrid)• ... and then some...
  36. 36. what about my dependencies?• AMD - Asynchronous Module Definition • CommonJs • RequireJs • curl.js • ...• JS vNext / Harmony
  37. 37. Compositional UIs• Bifrost - Features • UriMapper
  38. 38. Event AggregatorViewModel 1 ViewModel 2
  39. 39. pav.saund@gmail.com einar@dolittle.com
  40. 40. Resources• http://knockoutjs.com• http://github.com/dolittlestudios/bifrost• http://github.com/dolittlestudios/forseti

×