Sugarcoating your frontend one ViewModel at a time
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Sugarcoating your frontend one ViewModel at a time

  • 1,394 views
Uploaded on

A dive into modern JavaScript development

A dive into modern JavaScript development

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,394
On Slideshare
1,394
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
8
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

Transcript

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