16. ... ask what you can do
for the DOM...
• Polluted CSS selectors
• Passive views
• Heavy coupling
• Bleeding JavaScript (business logic) to DOM
• Hard to test
20. MVVM
Get from
Model server
View
Observes
ViewModel Observable
21. 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
22. Model
• Typically data fetched from the server
• Could be observable
• Can be extended with computed values
(e.g. FullName = FirstName + LastName)
23. View
• Declaratively observe the 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
31. Custom Bindings
• Declaratively used from the View
• No bleeding of view concern into
ViewModel
• Transitions based on state
• Insert jQuery here!
32.
33. .. no-one writes code without tests / specs..
yes, JavaScript is code!
34. Its a jungle out 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
• 5 MB storage for your application
• HTML
• CSS
• JavaScript
• Other static files...
38. Local Storage
• 25MB by 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