javascript framework smackdown
Post on 11-May-2015
2.896 Views
Preview:
DESCRIPTION
TRANSCRIPT
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().
top related