1. Javascript frameworks
Backbone.js
Bring structure to the client side

2. The quick way
Include jQuery
Browse it's documentation
Start coding
In minutes you get working results
Quickly end up in a code full of DOM
manipulation and callback chains

3. The quick way
$(document).ready(function () {
$("#newButton").click(function() {
$.ajax({
url: "createNew.php",
data: {
"name": $("#nameField").val()
},
success: function() {
window.location = "edit.php";
}
});
});
});

4. Pros
You get it to work in minutes with nearly no
knowledge about Javascript

5. Cons
Building single page applications you end up in
spaghetti code (callback chains, presentation
and business logic mixed up all around)
Strongly coupled
Weak cohesion
Hard to maintain
Data stored in the HTML

6. But we want...
Easily maintainable
Loosly coupled
Strong cohesion
Testable
Architecture patterns
Separate logic from the view

7. MVC pattern
If it works on the server side, why not use it on
the client side?
Separates presentation logic from business logic

8. Already many solutions
Backbone.js
Google Closure
Ember.js
Sproutcore
Knockout.js
Javascript MVC
Spine.js

9. Backbone.js
MVC pattern
Lightweight
Plays nicely with other libraries
Comes from the builder of CoffeeScript, Jeremy
Askhenas
Depends on Underscore.js
Big community, good documentation, many
tutorials, used by by many sites (Groupon,
Walmart, Foursquare, LinkedIn, etc.)

10. Model
Represents a singular entity
Encapsulates business logic
Maintains persistance through RESTful API with
JSON
Not aware of presentation
ActiveRecord implementation

11. Model
var Donut = Backbone.Model.extend({
initialize : function() {
this.name = ”Donut”;
},
defaults: {
name: ”empty”
}
})
var bostonCream = new Donut({
name : "Bostan Cream",
cream_filled : true
});
bostonCream.set({ sprinkles : true });
bostonCream.get("name");
bostonCream.save();

12. Collection
Collection of models of the same type
Uses the same event model as models
Can be tied to the RESTful API
Filled with list functions of Underscore.js

13. Collection
var Donuts = Backbone.Collection.extend({
model : Donut,
url : "/donuts"
});
var donuts = new Donuts;
donuts.fetch();
donuts.at(0); -> gets donuts by index.
donuts.get(0); -> gets donuts by id.
donuts.add(new Donut());

14. View
Render the DOM element
Listens to events thrown from DOM, models,
collections
Modifies DOM on attribute change
More than one View can be attached to the same
model
Templating: can be used with any templating
library

15. View
DonutView = Backbone.View.extend({
tagName : "div",
className : "donut",
template:_.template($('#tpl-donut-list-item').html()),
initialize : function(options) {
this.render = _.bind(this.render, this);
this.model.bind('change:name', this.render);
}
render : function() {
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});

16. Controller
Manages routing with hash fragments
Site remains bookmarkable
Encapsulates logic for each url rule
Doesn't brake back button in browser

17. Controller
var MyController = Backbone.Controller.extend({
routes : {
"say/:something" : "say"
},
say : function(something) {
alert(something);
}
});
var yC = new MyController;
Backbone.history.start();

18. The dark side
Lack of built-in UI Bindings, results in lot of
boilerplate
No layout for views
No composed views

19. Further reading
Backbone.js documentation
Underscore.js documentation
Javascript MVC frameworks overview
Todos tutorial
Hello world tutorial
Introduction tutorial part 1, part 2, part 3
Wine cellar tutorial

20. Books to mention
Javascript: The Good Parts
Javascript Web Applications
Javascript Patterns
High Performance Javascript
Test Driven Javascript Development