Backbone.js — Introduction to client-side JavaScript MVC

Philip Poots @pootsbook Ruby Developer Audacio.us3183

va Sc ri ptJa

StructureStateSpeed

Structure FrameworkState ApplicationSpeed Javascript

$.getJSON("http://example.com/?feed=json&jsonp=?", function(data){ $(#content).html("<a href=""+ data[0].permalink + "">" +data[0].title + "</a>"); $(#Date).html(data[0].date); $(#Excerpt).html(data[0].excerpt); $(#Excerpt).after("<a href="" + data[0].permalink + ""class="more">read on »</a>"); });

STRUCTURE MVC Model View Controller Pattern —1979 Architecture —Separate domain logic & UI Server-Side MVC —Ruby on Rails

STRUCTURE MVC on Server

STRUCTURE MVC on Client

STRUCTURE Backbone Model window.Todo = Backbone.Model.extend({ defaults: { done: false }, toggle: function() { this.save( {done: !this.get("done")} ); } });

STRUCTURE Backbone Collection window.TodoList = Backbone.Collection.extend({ model: Todo, localStorage: new Store("todos"), done: function() { return this.filter(function(todo) { return todo.get(done); }); }, remaining: function() { return this.without.apply( this, this.done()); } });

STRUCTURE Backbone View window.TodoView = Backbone.View.extend({ tagName: "li", template: $("#item-template").template(), events: { "change .check" : "toggleDone", "dblclick .todo-content" : "edit", "click .todo-destroy" : "destroy", "keypress .todo-input" : "updateOnEnter", "blur .todo-input" : "close" },

STRUCTURE JS Template window.TodoView = Backbone.View.extend({ tagName: "li", template: $("#item-template").template(), events: { "change .check" : "toggleDone", "dblclick .todo-content" : "edit", "click .todo-destroy" : "destroy", "keypress .todo-input" : "updateOnEnter", "blur .todo-input" : "close" },

STRUCTURE Backbone View window.TodoView = Backbone.View.extend({ tagName: "li", template: $("#item-template").template(), events: { "change .check" : "toggleDone", "dblclick .todo-content" : "edit", "click .todo-destroy" : "destroy", "keypress .todo-input" : "updateOnEnter", "blur .todo-input" : "close" },

STRUCTURE Backbone View initialize: function() { _.bindAll(this, render, close, remove, edit); this.model.bind(change, this.render); this.model.bind(destroy, this.remove); }, render: function() { var element = jQuery.tmpl(this.template, this.model.toJSON()); $(this.el).html(element); this.input = this.$(".todo-input"); return this; },

STRUCTURE Backbone View toggleDone: function() { this.model.toggle(); },

STRUCTURE Backbone Router var Workspace = Backbone.Router.extend({ routes: { "help": "help" // #help }, help: function() { ... } });

STRUCTURE Clean Code

S TAT E HTTP/1.1 “It is a…stateless protocol” —RFC 2616 (June 1999)

S TAT E HTTP/1.1 “It is a…stateless protocol” —RFC 2616 (June 1999) cookies sessions form variables URI parameters

S TAT E Server Owns State Client Server

S TAT E Request GET / HTTP/1.1 Client Server

S TAT E Response HTTP/1.1 200 OK Client Server

S TAT E AJAX asynchronicity Client Server

S TAT E Infrastructure Client Server

S TAT E Infrastructure Client Web Server

S TAT E Infrastructure Client Web Server RESTful Application

S TAT E Infrastructure Client Web Server RESTful Application Database

S TAT E Infrastructure Client JavaScript MVC App. Web Server RESTful API / App. Database

S TAT E Infrastructure Client JavaScript MVC App. Local Storage Bo nu s!

SPEED JavaScript is Fast Google v8 JS engine —focus on optimizing speed It runs in the browser —cuts out server requests —spares server resources —instantaneous UI

SPEED Data Transport JSON data only —no markup

SPEED Data Transport JSON data only —no markup{ "id": 1, "first_name": "Philip", "last_name": "Poots", "twitter": "@pootsbook"} vs."<div id="user_1">n<dl>n<dt>Name</dt>n<dd>Philip Poots</dd>n<dt>Twitterhandle:</dt>n<dd>@pootsbook</dd>n</dl>n</div>"

http://documentcloud.github.com/backbone/

JavaScript Web Apps@maccman

http://twitter.com	7
http://paper.li	3
http://duckduckgo.com	2
http://a0.twimg.com	1
http://a0.twimg.com	1

Backbone.js — Introduction to client-side JavaScript MVC

by pootsbook

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 14

Statistics