• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Sugarcoating your frontend one ViewModel at a time
 

Sugarcoating your frontend one ViewModel at a time

on

  • 1,202 views

A dive into modern JavaScript development

A dive into modern JavaScript development

Statistics

Views

Total Views
1,202
Views on SlideShare
1,202
Embed Views
0

Actions

Likes
1
Downloads
8
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 Sugarcoating your frontend one ViewModel at a time Presentation Transcript

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