The document discusses a comparison of three JavaScript frameworks: Knockout, Ember, and Angular, highlighting their features, documentation quality, and development patterns. It emphasizes the importance of a good user experience and the MVC/MVVM design philosophies that each framework follows, along with their respective support and community engagement. The document also includes examples of JavaScript conventions used in each framework for managing data and making changes.

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