The document discusses the Model-View-ViewModel (MVVM) architecture and compares implementations in AngularJS and KnockoutJS, emphasizing their differences in syntax, data binding, and performance. It highlights Angular's advantages in template syntax and performance, while acknowledging Knockout's strengths with legacy browser support and ease of adoption for XAML developers. Ultimately, the author suggests that both frameworks serve distinct purposes and the choice depends on specific project needs.

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