• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Knockout vs. angular

Knockout vs. angular






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Knockout vs. angular Knockout vs. angular Presentation Transcript

    • Vs.by Brandon DImperio
    • About the presenterhttps://coderbits.com/Maslow/http://www.slideshare.net/MaslowB/https://nuget.org/profiles/MaslowB/
    • Knockout● Inspired by what was already there in theXAML world● Declarative Bindings○ <span data-bind="text:firstname"></span>● Automatic UI Refresh○ self.firstname("george"); //automatically changesthe span text● Dependency Tracking○ self.name=ko.computed(function(){■ return self.firstname()+self.lastname();○ });
    • Knockout 2● Templating○ <ul data-bind="foreach:person">■ <li data-bind="text:firstname">○ </ul>● Initialization○ var komodel=new PeopleModel();○ ko.applyBindings(komodel);
    • Knockout Model● MVVM○ 2 way communication with the view○ The ViewModel represents the view. This meansthat fields in a ViewModel usually match up moreclosely with the view than with the model.○ View Communication: There is no IView referencein the ViewModel. Instead, the view binds directly tothe ViewModel. Because of the binding, changes inthe view are automatically reflected in theViewModel and changes in the ViewModel areautomatically reflected in the view.○ There is a single ViewModel for each view
    • Knockout Html
    • Knockout Code
    • Knockout issues● self.name= oops○ self.name(is the setter);● binding magic variables○ $data,$parent,$root● everything is done in one attribute○ data-bind="text:name,attr:{title:name,data-id:personId},click:nameclick"○ there are addons to help with this● Code at http://embed.plnkr.co/Gs4U8m/preview
    • Angular● Declarative bindings○ <span>{{newPerson.firstname}}</span>● Automatic UI Refresh○ $scope.firstname=george;○ KO dependency tracking is a clever feature foproblem which angular does not have.● MVC○ Angular likes to say MV*
    • Angular 2● Dependency Tracking○ $scope.fullname=function(){■ return $scope.firstname+ +$scope.lastname;○ };● Templating○ <ul ng-repeat="person in people">■ <li title="person.fullname()"> {{person.firstname}} </li>○ </ul>● Embeddable○ no global state, multiple angular apps in one pagewith no iframe.
    • Angular 3● Injectable○ no main() method○ Dependency Injection is core● Testable○ encourages behavior-view separation○ pre-bundled with mocks● Loads more built-in stuff○ Pluralization Helper○ Localization Helper○ Currency and date formatting○ Script based templating
    • Angular Issues● Theres so much going on here○ Is this enterprise library?○ or `lightweight` emberJs?● slightly non-predictable directive naming○ ng-mousedown○ ng-class-even● too many ways to do similar or the samethings○ ngBind vs. {{text}}○ ng-bind vs. data-ng-bind vs. class="ng-class:{expression};"○ ng-bind-template vs. {{text}} {{moretext}}!
    • Angular Html
    • Angular Code
    • Html Comparison<body><ul data-bind="foreach:people"><li data-bind="text:firstname,attr:{title:lastname}"></li></ul><div data-role="add a new person" data-bind="with:newPerson"><input data-bind="value:firstname,valueUpdate:afterkeydown"/><span data-bind="text:firstname"></span><div data-bind="text:fullname"></div><input type="button" data-bind="click:$root.addPerson" value="add"/><!-- sample complex binding --><div data-bind="text:fullname,attr:{title:fullname,data-id:personId},click:$root.addPerson"></div></div> </body><body ng-app ng-controller="PersonCtrl"><ul><li ng-repeat="person in people"title="{{person.lastname}}">{{person.firstname}}</li></ul><div data-role="add a new person"><input ng-model="newPerson.firstname"/><span ng-bind="newPerson.firstname"></span><div>{{newPerson.fullname()}}</div><input type="button" value="add" ng-click="addPerson()"/></div><!-- sample complex binding --><div title="{{newPerson.fullname}}" data-id="{{newPerson.personId}}" ng-click="addPerson()">{{newPerson.firstname}}</div></body>
    • Code Comparsionvar PersonModel= function(first,last,id) {var self=this;self.personId=ko.observable(id);self.firstname=ko.observable(first);self.lastname=ko.observable(last);self.fullname=ko.computed(function(){return self.firstname()+ +self.lastname();});};var PeopleModel= function(){var self=this;self.newPerson=ko.observable(newPersonModel(bob,knoblin,1));self.people=ko.observableArray();self.addPerson=function(){self.people.push(self.newPerson());self.newPerson(new PersonModel(jane,dough,self.people().length+1));};}; var komodel=new PeopleModel(); ko.applyBindings(komodel);var angularmodel;var PersonCtrl= function($scope) {var PersonModel=function(first,last,id){var self=this;self.firstname=first;self.lastname=last;self.personId=id || 0;self.fullname=function(){return self.firstname+ +self.lastname;}; };$scope.people=[];$scope.newPerson=new PersonModel(bob,knoblin,1);$scope.addPerson=function(){$scope.people.push($scope.newPerson);$scope.newPerson=new PersonModel(jane,dough,$scope.people.length+1);};angularmodel=$scope; };
    • Similarities● Fast friendly data-binding● attribute-based binding● both can be fully html5 compliant● custom directives● Both are better than using jQuery for mostthings● Both may occasionally benefit from asprinkling of jQuery
    • Differences● Large adoption on knockout● Angular is backed by google● MVVM vs. MVC● Push Model vs. dirty checking● Angular has a dedicated debugging tool -Batarang
    • Knockout vs. Angular● Far morelightweight● Easier to learn● Focuses on onearea● Much betterdocumentation● Should be faster● More backwards(+IE) compat● Concerns are betterseparated○ attributes andcontroller/views● Has a biggertoolbox● Does binding andmvc● Better initializationstory
    • PopularityKnockout - More question tags onStackoverflow in Feb, as of today: 5904 vs 6554Angular - more stars on github10k vs. 3.7k and google searches
    • References● http://joel.inpointform.net/software-development/mvvm-vs-mvp-vs-mvc-the-differences-explained/● http://www.slideshare.net/basarat1/mvvm-knockout-vs-angular● http://stackoverflow.com/questions/9682092/databinding-in-angularjs● http://odetocode.com/blogs/scott/archive/2013/02/26/why-use-angularjs.aspx● http://jsperf.com/angularjs-vs-knockoutjs● http://codeutopia.net/blog/2013/03/16/knockout-vs-backbone-vs-angular/