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
MVVM for the Web
Angular vs. Knockout
VS.@basarat
• Cleaner user interface • (used to be Cleaner code only)
• Designer / Developer separation
Why MVVM?
• 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?
MVVM the Knockout Way
• INotifyPropertyChanged (INPC)• ICommand Interface and Command
Property• DataTemplates / ItemTemplates
How MVVM works for XAML
• 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
Knockout ViewModel similar to INPC
ko.obervable
ko.computed
ko.obervableArray
Knockout INPC View
• XAML View (dependency properties):
• Knockout View (bindings):
Knockout Commands
• XAML
• Knockout (click and other bindings)
Knockout DataTemplates
• XAML
• knockout
Knockout uses concept of Bindings
Angular js?
• 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
• 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?
Quick AngularJS tutorial
• http://jsfiddle.net/basarat/V9sYB/
• 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?
Quick AngularJS tutorial 2
• How browsers could support it natively
• 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
MVVM the Angular Way
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
Observables : The view
• {{property}} syntax
Filters
• Similar to XAML IValueConverter but One way binding for display
Commands
• The VM
• The View
Templates
Angular JS uses concept of directives
Performance
Which one should you use?
jsPrefhttp://jsperf.com/angularjs-vs-knockoutjs
Browser Support
Which one should you use?
• 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
• 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
Popularity Contest
Which one should you use?
Knockout vs. Angular
• Google Searches
• StackOverflow tags ( as of feb 2013) • Knockout : 4,304• Angular : 2,794
• Stared on Github (as of feb 2013)• https://github.com/angular/angular.js : 7072 • https://github.com/SteveSanderson/knockout :
3011
Decisive
Debugging
Which one should you use?
Batarang
• Dedicated Debugging tool for angular.
• None for knockout as of yet.
The world really needs both
Conclusion
• Performance : Angular• Legacy Browser (specifically IE) :
Knockout• MS bubble : Knockout• Popularity : Angular• Debugging : Angular• Awesomest Web App Ever : Angular
Choice (my opinion)
• 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
• http://basarat.com • [email protected]• @basarat
Thank you