JavaScript Framework Smackdown


Published on

Have you ever worked on a website that displayed data dynamically? Are you tired of putting HTML markup inside Javascript?

Chances are you’ve looked into using what’s known as an MV* framework. These kind of frameworks aim to help reduce the effort in binding Javascript and JSON data to the user’s screen.

Learn more about 3 of the most popular frameworks being talked about in the developer community: Knockout (by a Microsoft employee), Angular (by Google), and Ember (by a Rails and jQuery contributor).

We’ll compare and contrast these frameworks and how they ranked against our criteria in building a client-side heavy application that updates its data in real time.

Published in: Software
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

JavaScript Framework Smackdown

  1. 1. JavaScript Framework Smackdown By: Mike Reyes and Matt Peters
  2. 2. Users expect more Interfaces can be complex and dynamic Postbacks don’t cut it anymore People are impatient, don’t want to wait A good user experience is now the norm
  3. 3. Developers are Hyper-Critical Spaghetti code gets you immediately thrown under the bus MVC mentality says you don't cross concerns - NO markup in code
  4. 4. Problems they Solve Spaghetti code gets you immediately thrown under the bus MVC mentality says you don't cross concerns - NO markup in code
  5. 5. Knockout Middle child at version 2.1 Maintained by a Microsoft employee but not an official Microsoft product Uses the MVVM pattern
  6. 6. Ember Baby of the group, just reached 1.0 Maintained by a Rails and jQuery contributor (+ others) Uses the MVC pattern
  7. 7. Angular Oldest of the three, at 1.0.1 Official Google product Uses the MVW pattern
  8. 8. SMACKDOWN!
  9. 9. Judging Criteria • • • • • Documentation and support Javascript conventions Template style Quirks Bonus features
  10. 10. Documentation and Support • Step-by-step tutorials with code editor • Interactive examples and code blocks • 1,120 hits on StackOverflow
  11. 11. Documentation and Support • No tutorials for beginners • Several examples with code blocks but some errata • API documentation has gaps • 784 hits on StackOverflow
  12. 12. Documentation and Support • • • • Multiple video tutorials for beginners Extensive API documentation In-depth developer guide 756 hits on StackOverflow
  13. 13. JavaScript Conventions/Main Object ViewModel object(s) function ViewModel() { this.myName = ko.observable("Knockout User"); this.myCars = ko.observableArray([ { name: "Toyota Camry" }, { name: "Ford Taurus" } ]); } App.myMainObject = new ViewModel(); ko.applyBindings(App.myMainObject);
  14. 14. JavaScript Conventions/Main Object Controller objects App.myMainObject = Ember.ArrayController.create({ myName: "Ember User", content: [ { name: "Toyota Camry" }, { name: "Ford Taurus" } ] });
  15. 15. JavaScript Conventions/Main Object Controller object(s) function myMainObject($scope) { $scope.myName = "Angular User"; $scope.myCars = [ { name: "Toyota Camry" }, { name: "Ford Taurus" } ]; App.controllerScope = $scope; // not required }
  16. 16. JavaScript Conventions/Making Changes function makeChanges() { App.myMainObject.myName("New Name"); App.myMainObject.myCars.push({ name: "Honda Pilot" }); } Properties are converted to methods, that's how it can trigger changes on the screen. The standard Js array methods all work: push, pop, unshift, shift, reverse, sort, and splice.
  17. 17. JavaScript Conventions/Making Changes function makeChanges() { App.myMainObject.set("myName", "New Name"); App.myMainObject.pushObject({ name: "Honda Pilot" }); } Properties must be modified with the 'set' method to trigger changes on the screen. The standard Js array methods won't work, but they've added a bunch of handier methods instead.
  18. 18. JavaScript Conventions/Making Changes function makeChanges() { App.controllerScope.$apply({ App.myMainObject.myName = "New Name"; App.myMainObject.pushObject({ name: "Honda Pilot" }); }); } Regular Js can be used to manipulate objects but if they're happening outside of Angular's world you must wrap it with a call to $scope.$apply().