AngularJS - Architecture decisionsin a large project
Mvvm knockout vs angular
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.
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.
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.
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.
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.
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
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)