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 • basaratali@gmail.com• @basarat

Thank you