Sugarcoating your frontend one ViewModel at a time

1,196 views

Published on

A dive into modern JavaScript development

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,196
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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

    ×