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.

1. JavaScript Framework
Smackdown
By: Mike Reyes and Matt Peters

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. 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. 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. Knockout
Middle child at version 2.1
Maintained by a Microsoft employee but not
an official Microsoft product
Uses the MVVM pattern

6. Ember
Baby of the group, just reached 1.0
Maintained by a Rails and jQuery contributor
(+ others)
Uses the MVC pattern

7. Angular
Oldest of the three, at 1.0.1
Official Google product
Uses the MVW pattern

8. SMACKDOWN!

9. Judging Criteria
•
•
•
•
•
Documentation and support
Javascript conventions
Template style
Quirks
Bonus features

10. Documentation and Support
• Step-by-step tutorials with code editor
• Interactive examples and code blocks
• 1,120 hits on StackOverflow

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. Documentation and Support
•
•
•
•
Multiple video tutorials for beginners
Extensive API documentation
In-depth developer guide
756 hits on StackOverflow

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. JavaScript Conventions/Main Object
Controller objects
App.myMainObject = Ember.ArrayController.create({
myName: "Ember User",
content: [ { name: "Toyota Camry" }, { name: "Ford
Taurus" } ]
});

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. 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. 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. 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().