A dive into modern JavaScript development

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. The Web

5. DDD

6. DDD
DOM Driven Development

8. What is jQuery?

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 all begins with $

11. And it all begins with $
• Target elements with CSS selectors
• $("#elementId").makeMagic()

12. And it all begins with $

13. And it all begins with $

14. And it all begins with $

15. And it all begins with $

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

17. ... thats so 2011...

18. MVVM
Model
View
ViewModel

19. MVVM
Model
View
Observes
ViewModel

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

26. ... by example ...

27. ... by example ...

28. ... by example ...

29. ... by example ...

30. Knockout some more
with..
• Custom bindings
• Extenders
• Plugins

31. Custom Bindings
• Declaratively used from the View
• No bleeding of view concern into
ViewModel
• Transitions based on state
• Insert jQuery here!

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

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