JavaScript Framework Smackdown

By: Mike Reyes and Matt Peters

Users expect more

Interfaces can be complex and dynamicPostbacks don’t cut it anymorePeople are impatient, don’t want to waitA good user experience is now the norm

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

Problems they Solve

Spaghetti code gets you immediately thrown under the bus

MVC mentality says you don't cross concerns - NO markup in code

Knockout

Middle child at version 2.1

Maintained by a Microsoft employee but not an official Microsoft product

Uses the MVVM pattern

Ember

Baby of the group, just reached 1.0

Maintained by a Rails and jQuery contributor (+ others)

Uses the MVC pattern

Angular

Oldest of the three, at 1.0.1

Official Google product

Uses the MVW pattern

SMACKDOWN!

Judging Criteria

• Documentation and support• Javascript conventions• Template style• Quirks• Bonus features

Documentation and Support

• Step-by-step tutorials with code editor

• Interactive examples and code blocks

• 1,120 hits on StackOverflow

Documentation and Support

• No tutorials for beginners• Several examples with code blocks

but some errata• API documentation has gaps• 784 hits on StackOverflow

Documentation and Support

• Multiple video tutorials for beginners• Extensive API documentation• In-depth developer guide• 756 hits on StackOverflow

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);

JavaScript Conventions/Main Object

Controller objects

App.myMainObject = Ember.ArrayController.create({ myName: "Ember User", content: [ { name: "Toyota Camry" }, { name: "Ford Taurus" } ]});

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}

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.

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.

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