JavaScript Framework
Smackdown
By: Mike Reyes and Matt Peters
Users expect more
Interfaces can be complex and dynamic
Postbacks don’t cut it anymore
People are impatient, don’t want to...
Developers are Hyper-Critical
Spaghetti code gets you immediately thrown
under the bus
MVC mentality says you don't cross
...
Problems they Solve
Spaghetti code gets you immediately thrown
under the bus
MVC mentality says you don't cross
concerns -...
Knockout
Middle child at version 2.1
Maintained by a Microsoft employee but not
an official Microsoft product
Uses the MVV...
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...
Documentation and Support
• No tutorials for beginners
• Several examples with code blocks but
some errata
• API documenta...
Documentation and Support
•
•
•
•

Multiple video tutorials for beginners
Extensive API documentation
In-depth developer g...
JavaScript Conventions/Main Object
ViewModel object(s)
function ViewModel() {
this.myName = ko.observable("Knockout User")...
JavaScript Conventions/Main Object
Controller objects
App.myMainObject = Ember.ArrayController.create({
myName: "Ember Use...
JavaScript Conventions/Main Object
Controller object(s)
function myMainObject($scope) {
$scope.myName = "Angular User";
$s...
JavaScript Conventions/Making
Changes
function makeChanges() {
App.myMainObject.myName("New Name");
App.myMainObject.myCar...
JavaScript Conventions/Making
Changes
function makeChanges() {
App.myMainObject.set("myName", "New Name");
App.myMainObjec...
JavaScript Conventions/Making
Changes
function makeChanges() {
App.controllerScope.$apply({
App.myMainObject.myName = "New...
JavaScript Framework Smackdown
Upcoming SlideShare
Loading in...5
×

JavaScript Framework Smackdown

3,006

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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,006
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
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().
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×