A presentation I gave at ALT.NET Melbourne on February 26 2013 : http://www.basarat.com/2013/03/knockout-vs-angularjs-mvvm-frameworks.html

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