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 DataBinding for 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)
• ICommand Interface 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
• Awesomest Web 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