ko atau ang

8/10/2019 ko atau ang

1/36

MVVM for the Web

Angular vs. Knockout

VS@basarat


2/36

Why MVVM?

Cleaner user interface

(used to be Cleaner code only)

Designer / Developer separation


3/36

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/36


5/36

How MVVM works for XAML INotifyPropertyChanged (INPC)

ICommand Interface and Command Property

DataTemplates / ItemTemplates


6/36

Enter Knockoutjs By Steve Sanderson.

Works at microsoft.

Highly inspired and directed by what was already therein XAML world.

Perhaps to ease XAML people into HTML.


7/36

Knockout ViewModel similarto INPC

ko.obervable

ko.computed

ko.obervableArray


8/36

Knockout INPC View

XAML View (dependencyproperties):

Knockout View (bindings):


9/36

Knockout Commands

XAML

Knockout (click and otherbindings)


10/36

Knockout DataTemplates

XAML

knockout

k f


11/36

Knockout uses concept ofBindings


12/36


13/36

MVVM with AngularJS :

Observables Dont need them. Means your objects do not need an

INPC type of implementation.

KO dependency tracking is a clever feature for aproblem which angular does not have heard onStackOverflow


14/36

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 invalue, then it fires the change event.

To know when angular should check the new value itwe have scope.


15/36

Quick AngularJS tutorial

http://jsfiddle.net/basarat/V9sYB/
http://jsfiddle.net/basarat/V9sYB/http://jsfiddle.net/basarat/V9sYB/http://jsfiddle.net/basarat/V9sYB/


16/36

Why Angular chose a different

method? Better syntax, especially for templates

Google plans to make it a web standard so browsers cando this natively.

Change listeners fire immediately on setter, which is aproblem, since the change listener can further changedata, which fires more change events.


17/36

Quick AngularJS tutorial 2

How browsers could support itnatively


18/36

Angular js performance Humans are

Slow anything faster than 50ms is imperceptible

Limited - can't really show more than about 2000 piecesof information to a human

Can you do 2000 comparisons in 50 ms even on slowbrowsers? That means that you have 25us per

comparison.


19/36


20/36

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
https://github.com/basarat/ChessClockhttps://github.com/basarat/ChessClock


21/36

Observables : The view

{{property}} syntax


22/36

Filters

Similar to XAML IValueConverterbut One way binding for display


23/36

Commands

The VM

The View


24/36

Templates


25/36

Angular JS uses concept of

directives


26/36

Performance


27/36

jsPrefhttp://jsperf.com/angularjs-vs-knockoutjs
http://jsperf.com/angularjs-vs-knockoutjshttp://jsperf.com/angularjs-vs-knockoutjshttp://jsperf.com/angularjs-vs-knockoutjshttp://jsperf.com/angularjs-vs-knockoutjshttp://jsperf.com/angularjs-vs-knockoutjshttp://jsperf.com/angularjs-vs-knockoutjshttp://jsperf.com/angularjs-vs-knockoutjs


28/36

Browser Support


29/36

Angular http://docs.angularjs.org/misc/faq

We run our extensive test suite against the followingbrowsers: Safari, Chrome, Firefox, Opera, IE8, IE9 and

mobile browsers (Android, Chrome Mobile, iOS Safari)

Yahoos Class A browser
http://docs.angularjs.org/misc/faqhttp://docs.angularjs.org/misc/faqhttp://docs.angularjs.org/misc/faqhttp://docs.angularjs.org/misc/faq


30/36

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; shouldwork on older versions too)

Microsoft Internet Explorer 6, 7, 8, 9, 10

Apple Safari (tested on Windows Safari version 5, Mac OS X Safariversion 3.1.2, and iPhone Safari for iOS 4; should work onnewer/older versions too)

Opera 10 for Windows

Knockout was also found to work on the following browsers(though we dont recheck these for every release): Opera Mini

Google Android OS browser (OS version 2.2)
http://knockoutjs.com/documentation/browser-support.htmlhttp://knockoutjs.com/documentation/browser-support.htmlhttp://knockoutjs.com/documentation/browser-support.htmlhttp://knockoutjs.com/documentation/browser-support.htmlhttp://knockoutjs.com/documentation/browser-support.html


31/36

Popularity Contest


32/36

Knockout vs. Angular

Google Searches

StackOverflow tags ( as of feb 2013)

Knockout : 4 3 4 Angular : 2 794


33/36

Decisive Stared on Github (as of feb 2013)

https://github.com/angular/angular.js: 7072

https://github.com/SteveSanderson/knockout: 3011
https://github.com/angular/angular.jshttps://github.com/SteveSanderson/knockouthttps://github.com/SteveSanderson/knockouthttps://github.com/SteveSanderson/knockouthttps://github.com/angular/angular.jshttps://github.com/angular/angular.js


34/36

Debugging


35/36

Batarang

Dedicated Debugging tool forangular.

None for knockout as of yet.


36/36

The world really needs both

ko atau ang

Documents