mvvm knockout vs angular
DESCRIPTION
A presentation I gave at ALT.NET Melbourne on February 26 2013 : http://www.basarat.com/2013/03/knockout-vs-angularjs-mvvm-frameworks.htmlTRANSCRIPT
![Page 1: Mvvm knockout vs angular](https://reader036.vdocuments.us/reader036/viewer/2022081502/554a48b9b4c905863d8b5653/html5/thumbnails/1.jpg)
MVVM for the Web
Angular vs. Knockout
VS.@basarat
![Page 2: Mvvm knockout vs angular](https://reader036.vdocuments.us/reader036/viewer/2022081502/554a48b9b4c905863d8b5653/html5/thumbnails/2.jpg)
• Cleaner user interface • (used to be Cleaner code only)
• Designer / Developer separation
Why MVVM?
![Page 3: Mvvm knockout vs angular](https://reader036.vdocuments.us/reader036/viewer/2022081502/554a48b9b4c905863d8b5653/html5/thumbnails/3.jpg)
• Two way DataBinding for properties• With some form of interception options
• Command binding • Templates
•Names change but concepts remain the same.
What makes MVVM Work?
![Page 4: Mvvm knockout vs angular](https://reader036.vdocuments.us/reader036/viewer/2022081502/554a48b9b4c905863d8b5653/html5/thumbnails/4.jpg)
MVVM the Knockout Way
![Page 5: Mvvm knockout vs angular](https://reader036.vdocuments.us/reader036/viewer/2022081502/554a48b9b4c905863d8b5653/html5/thumbnails/5.jpg)
• INotifyPropertyChanged (INPC)• ICommand Interface and Command
Property• DataTemplates / ItemTemplates
How MVVM works for XAML
![Page 6: Mvvm knockout vs angular](https://reader036.vdocuments.us/reader036/viewer/2022081502/554a48b9b4c905863d8b5653/html5/thumbnails/6.jpg)
• 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.
Enter Knockoutjs
![Page 7: Mvvm knockout vs angular](https://reader036.vdocuments.us/reader036/viewer/2022081502/554a48b9b4c905863d8b5653/html5/thumbnails/7.jpg)
Knockout ViewModel similar to INPC
ko.obervable
ko.computed
ko.obervableArray
![Page 8: Mvvm knockout vs angular](https://reader036.vdocuments.us/reader036/viewer/2022081502/554a48b9b4c905863d8b5653/html5/thumbnails/8.jpg)
Knockout INPC View
• XAML View (dependency properties):
• Knockout View (bindings):
![Page 9: Mvvm knockout vs angular](https://reader036.vdocuments.us/reader036/viewer/2022081502/554a48b9b4c905863d8b5653/html5/thumbnails/9.jpg)
Knockout Commands
• XAML
• Knockout (click and other bindings)
![Page 10: Mvvm knockout vs angular](https://reader036.vdocuments.us/reader036/viewer/2022081502/554a48b9b4c905863d8b5653/html5/thumbnails/10.jpg)
Knockout DataTemplates
• XAML
• knockout
![Page 11: Mvvm knockout vs angular](https://reader036.vdocuments.us/reader036/viewer/2022081502/554a48b9b4c905863d8b5653/html5/thumbnails/11.jpg)
Knockout uses concept of Bindings
![Page 12: Mvvm knockout vs angular](https://reader036.vdocuments.us/reader036/viewer/2022081502/554a48b9b4c905863d8b5653/html5/thumbnails/12.jpg)
Angular js?
![Page 13: Mvvm knockout vs angular](https://reader036.vdocuments.us/reader036/viewer/2022081502/554a48b9b4c905863d8b5653/html5/thumbnails/13.jpg)
• 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
MVVM with AngularJS : Observables
![Page 14: Mvvm knockout vs angular](https://reader036.vdocuments.us/reader036/viewer/2022081502/554a48b9b4c905863d8b5653/html5/thumbnails/14.jpg)
• 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.
How does it know if anything changed?
![Page 15: Mvvm knockout vs angular](https://reader036.vdocuments.us/reader036/viewer/2022081502/554a48b9b4c905863d8b5653/html5/thumbnails/15.jpg)
Quick AngularJS tutorial
• http://jsfiddle.net/basarat/V9sYB/
![Page 16: Mvvm knockout vs angular](https://reader036.vdocuments.us/reader036/viewer/2022081502/554a48b9b4c905863d8b5653/html5/thumbnails/16.jpg)
• 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.
Why Angular chose a different method?
![Page 17: Mvvm knockout vs angular](https://reader036.vdocuments.us/reader036/viewer/2022081502/554a48b9b4c905863d8b5653/html5/thumbnails/17.jpg)
Quick AngularJS tutorial 2
• How browsers could support it natively
![Page 18: Mvvm knockout vs angular](https://reader036.vdocuments.us/reader036/viewer/2022081502/554a48b9b4c905863d8b5653/html5/thumbnails/18.jpg)
• 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.
Angular js performance
![Page 19: Mvvm knockout vs angular](https://reader036.vdocuments.us/reader036/viewer/2022081502/554a48b9b4c905863d8b5653/html5/thumbnails/19.jpg)
MVVM the Angular Way
![Page 20: Mvvm knockout vs angular](https://reader036.vdocuments.us/reader036/viewer/2022081502/554a48b9b4c905863d8b5653/html5/thumbnails/20.jpg)
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
![Page 21: Mvvm knockout vs angular](https://reader036.vdocuments.us/reader036/viewer/2022081502/554a48b9b4c905863d8b5653/html5/thumbnails/21.jpg)
Observables : The view
• {{property}} syntax
![Page 22: Mvvm knockout vs angular](https://reader036.vdocuments.us/reader036/viewer/2022081502/554a48b9b4c905863d8b5653/html5/thumbnails/22.jpg)
Filters
• Similar to XAML IValueConverter but One way binding for display
![Page 23: Mvvm knockout vs angular](https://reader036.vdocuments.us/reader036/viewer/2022081502/554a48b9b4c905863d8b5653/html5/thumbnails/23.jpg)
Commands
• The VM
• The View
![Page 24: Mvvm knockout vs angular](https://reader036.vdocuments.us/reader036/viewer/2022081502/554a48b9b4c905863d8b5653/html5/thumbnails/24.jpg)
Templates
![Page 25: Mvvm knockout vs angular](https://reader036.vdocuments.us/reader036/viewer/2022081502/554a48b9b4c905863d8b5653/html5/thumbnails/25.jpg)
Angular JS uses concept of directives
![Page 26: Mvvm knockout vs angular](https://reader036.vdocuments.us/reader036/viewer/2022081502/554a48b9b4c905863d8b5653/html5/thumbnails/26.jpg)
Performance
Which one should you use?
![Page 27: Mvvm knockout vs angular](https://reader036.vdocuments.us/reader036/viewer/2022081502/554a48b9b4c905863d8b5653/html5/thumbnails/27.jpg)
jsPrefhttp://jsperf.com/angularjs-vs-knockoutjs
![Page 28: Mvvm knockout vs angular](https://reader036.vdocuments.us/reader036/viewer/2022081502/554a48b9b4c905863d8b5653/html5/thumbnails/28.jpg)
Browser Support
Which one should you use?
![Page 29: Mvvm knockout vs angular](https://reader036.vdocuments.us/reader036/viewer/2022081502/554a48b9b4c905863d8b5653/html5/thumbnails/29.jpg)
• 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
Angular
![Page 30: Mvvm knockout vs angular](https://reader036.vdocuments.us/reader036/viewer/2022081502/554a48b9b4c905863d8b5653/html5/thumbnails/30.jpg)
• 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)
Knockout
![Page 31: Mvvm knockout vs angular](https://reader036.vdocuments.us/reader036/viewer/2022081502/554a48b9b4c905863d8b5653/html5/thumbnails/31.jpg)
Popularity Contest
Which one should you use?
![Page 32: Mvvm knockout vs angular](https://reader036.vdocuments.us/reader036/viewer/2022081502/554a48b9b4c905863d8b5653/html5/thumbnails/32.jpg)
Knockout vs. Angular
• Google Searches
• StackOverflow tags ( as of feb 2013) • Knockout : 4,304• Angular : 2,794
![Page 33: Mvvm knockout vs angular](https://reader036.vdocuments.us/reader036/viewer/2022081502/554a48b9b4c905863d8b5653/html5/thumbnails/33.jpg)
• Stared on Github (as of feb 2013)• https://github.com/angular/angular.js : 7072 • https://github.com/SteveSanderson/knockout :
3011
Decisive
![Page 34: Mvvm knockout vs angular](https://reader036.vdocuments.us/reader036/viewer/2022081502/554a48b9b4c905863d8b5653/html5/thumbnails/34.jpg)
Debugging
Which one should you use?
![Page 35: Mvvm knockout vs angular](https://reader036.vdocuments.us/reader036/viewer/2022081502/554a48b9b4c905863d8b5653/html5/thumbnails/35.jpg)
Batarang
• Dedicated Debugging tool for angular.
• None for knockout as of yet.
![Page 36: Mvvm knockout vs angular](https://reader036.vdocuments.us/reader036/viewer/2022081502/554a48b9b4c905863d8b5653/html5/thumbnails/36.jpg)
The world really needs both
Conclusion
![Page 37: Mvvm knockout vs angular](https://reader036.vdocuments.us/reader036/viewer/2022081502/554a48b9b4c905863d8b5653/html5/thumbnails/37.jpg)
• Performance : Angular• Legacy Browser (specifically IE) :
Knockout• MS bubble : Knockout• Popularity : Angular• Debugging : Angular• Awesomest Web App Ever : Angular
Choice (my opinion)
![Page 38: Mvvm knockout vs angular](https://reader036.vdocuments.us/reader036/viewer/2022081502/554a48b9b4c905863d8b5653/html5/thumbnails/38.jpg)
• 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/
Links