1 / 39

MVVM for the Web

MVVM for the Web. Angular vs. Knockout. VS. @ basarat. Why MVVM?. Cleaner user interface (used to be Cleaner code only) Designer / Developer separation. What makes MVVM Work?. Two way DataBinding for properties With some form of interception options Command binding Templates

hogan
Download Presentation

MVVM for the Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. MVVM for the Web Angular vs. Knockout VS. @basarat

  2. Why MVVM? • Cleaner user interface • (used to be Cleaner code only) • Designer / Developer separation

  3. What makes MVVM Work? • Two way DataBindingfor properties • With some form of interception options • Command binding • Templates • Names change but concepts remain the same.

  4. MVVM the Knockout Way

  5. How MVVM works for XAML • INotifyPropertyChanged (INPC) • ICommandInterface and Command Property • DataTemplates / ItemTemplates

  6. Enter Knockoutjs • By Steve Sanderson. • Works at microsoft. • Highly inspired and directed by what was already there in XAML world. • Perhaps to ease XAML people into HTML.

  7. Knockout ViewModel similar to INPC ko.obervable ko.computed ko.obervableArray

  8. Knockout INPC View • XAML View (dependency properties): • Knockout View (bindings):

  9. Knockout Commands • XAML • Knockout (click and other bindings)

  10. Knockout DataTemplates • XAML • knockout

  11. Knockout uses concept of Bindings

  12. Angular js?

  13. MVVM with AngularJS : Observables • Don’t need them. Means your objects do not need an INPC type of implementation. • “KO dependency tracking is a clever feature for a problem which angular does not have” – heard on StackOverflow

  14. How does it know if anything changed? • Angular remembers the value and compares it to previous value. • This is basic dirty checking. If there is a change in value, then it fires the change event. • To know when angular should check the new value it we have scope.

  15. Quick AngularJS tutorial • http://jsfiddle.net/basarat/V9sYB/

  16. Why Angular chose a different method? • Better syntax, especially for templates • Google plans to make it a web standard so browsers can do this natively. • Change listeners fire immediately on setter, which is a problem, since the change listener can further change data, which fires more change events.

  17. Quick AngularJS tutorial 2 • How browsers could support it natively

  18. Angular js performance • Humans are • Slow – anything faster than 50ms is imperceptible • Limited - can't really show more than about 2000 pieces of information to a human • Can you do 2000 comparisons in 50 ms even on slow browsers? That means that you have 25us per comparison.

  19. MVVM the Angular Way

  20. Observables : ViewModel • https://github.com/basarat/ChessClock • Standard javascript properties your scope • Really good with Typescript • Angular folks call their framework MV* i.e. • Model View Whatever • But like to name it Controller

  21. Observables : The view • {{property}} syntax

  22. Filters • Similar to XAML IValueConverter but One way binding for display

  23. Commands • The VM • The View

  24. Templates

  25. Angular JS uses concept of directives

  26. Which one should you use? Performance

  27. jsPref http://jsperf.com/angularjs-vs-knockoutjs

  28. Which one should you use? Browser Support

  29. Angular • http://docs.angularjs.org/misc/faq • We run our extensive test suite against the following browsers: Safari, Chrome, Firefox, Opera, IE8, IE9 and mobile browsers (Android, Chrome Mobile, iOS Safari) • Yahoo’s Class A browser

  30. Knockout • http://knockoutjs.com/documentation/browser-support.html • Mozilla Firefox 2.0+ (latest version tested = 3.6.8) • Google Chrome (tested on version 5 for Windows and Mac; should work on older versions too) • Microsoft Internet Explorer 6, 7, 8, 9, 10 • Apple Safari (tested on Windows Safari version 5, Mac OS X Safari version 3.1.2, and iPhone Safari for iOS 4; should work on newer/older versions too) • Opera 10 for Windows • Knockout was also found to work on the following browsers (though we don’t recheck these for every release): • Opera Mini • Google Android OS browser (OS version 2.2)

  31. Which one should you use? Popularity Contest

  32. Knockout vs. Angular • Google Searches • StackOverflow tags ( as of feb 2013) • Knockout : 4,304 • Angular : 2,794

  33. Decisive • Stared on Github (as of feb 2013) • https://github.com/angular/angular.js : 7072 • https://github.com/SteveSanderson/knockout : 3011

  34. Which one should you use? Debugging

  35. Batarang • Dedicated Debugging tool for angular. • None for knockout as of yet.

  36. Conclusion The world really needs both

  37. Choice (my opinion) • Performance : Angular • Legacy Browser (specifically IE) : Knockout • MS bubble : Knockout • Popularity : Angular • Debugging : Angular • AwesomestWeb App Ever : Angular

  38. Links • Help Knockout • http://knockoutjs.com/documentation/introduction.html • Help Angular • http://docs.angularjs.org/guide/concepts • https://github.com/angular/angular.js/wiki/JsFiddle-Examples • Comparisons • http://stackoverflow.com/questions/9682092/databinding-in-angularjs • http://litebyte.net/blog/?p=135 • TODO App in both: http://addyosmani.github.com/todomvc/

  39. Thank you • http://basarat.com • basaratali@gmail.com • @basarat

More Related