Backbone A Brief Introduction Thursday, August 8, 13

What is Backbone • Gives structure to web applications • by providing models with key-value binding and custom events, • collections with a rich API of enumerable functions, • views with declarative event handling, • and connects it all to your existing API over a RESTful JSON interface. Thursday, August 8, 13

Backbone IS NOT • It is not a framework Thursday, August 8, 13

Structure Thursday, August 8, 13

Dependencies • jQuery (or Zepto) • underscore (or Lo-Dash) • JSON2.js (for old browsers such as IE) Thursday, August 8, 13

Components • Backbone.Events • Backbone.Model • Backbone.Collecti on • Backbone.View • Backbone.Router • Backbone.History • Backbone.sync Thursday, August 8, 13

Event Driven Events (mixin) Router History View Collection Model Thursday, August 8, 13

Events object = {} _.extend object, Backbone.Events object.on "alert", (msg) -> alert "Triggered " + msg object.trigger "alert", "an event" Thursday, August 8, 13

MVC View Controller* Model & Collection Control Event Thursday, August 8, 13

Controller • NO Backbone.Controller • Controller is a concept. Some put controller logic in Router, some put in View • Controller can be extracted out as collection of functions Thursday, August 8, 13

Controller Responsibilities • Construct views • Sync models/collections through API • Connect models/collections with views Thursday, August 8, 13

Controller Sample todos = new TodosCollection todosController = index: -> view = new TodoIndex collection: todos App.layout.content.show view.render() show: (id) -> todo = todos.get(id) view = new TodoShow model: todo App.layout.content.show view.render() Thursday, August 8, 13

Interaction View Controller* Router & History Manipulate DOM Tree DOM Events Control Event Update URL URL Change Back/Forward Thursday, August 8, 13

Sync Model & Collection Backbone.sync HTML5 localStorage $.ajax CouchDB Thursday, August 8, 13

Model & Collection Thursday, August 8, 13

Model • Key-value attributes • Changes events via set method: "change", "change[attribute]" • JSON serialization • Validation Thursday, August 8, 13

Collection • Array/Hash of Models • underscore methods • Collection events: "add", "remove", "reset" • Model events aggregation • JSON serialization Thursday, August 8, 13

class Todo extends Backbone.Model class TodosCollection extends Backbone.Collection model: Todo todo = new Todo title: "Backbone", done: true todos = new TodosCollection todos.add todo todos.add title: "Marionette", done: false todo.on 'change:done', (model) -> console.log model.toJSON() todos.on 'add', (model, coll) -> console.log "new item" Code Sample Thursday, August 8, 13

Backbone.sync • Model persistence • Signature sync(method, model, [options]) • method - CRUD • model - model or collection to save • options - callbacks, other options for sync implementation (e.g. jQuery ajax options) Thursday, August 8, 13

sync implementations • Bundled with RESTful API via jQuery.ajax • jeromegn/Backbone.localStorage • pyronicide/backbone.couchdb.js Thursday, August 8, 13

View Thursday, August 8, 13

DOM Manipulation • View is attached to DOM via el attribute • If el is not specified, it is created using tagName, id, className • Use render to setup the HTML in el Thursday, August 8, 13

Code Sample class TodoShow extends Backbone.View tagName: 'li' className: 'todo-item' # It is good practices to use template instead, # such as Handlebars render: -> context = model.toJSON() @$el.html " #{context.title} " @ui = { label: @$('label'), input: @$('input') } if @model.get('done') @ui.input.prop 'checked', true @ui.label.css 'text-decoration', 'line-through' @ # It is a convention to return the view itself Thursday, August 8, 13

Handle Model Events class TodoShow extends Backbone.View initialize: -> # new methods in 1.0.0 # pay attention to events cycle @listenTo @model, 'change', @render ... Thursday, August 8, 13

Handle DOM Events • events attribute • {"event selector": "callback"} Thursday, August 8, 13

Code Sample class TodoShow extends Backbone.View events: 'click label': 'toggle' toggle: (e) -> e.preventDefault() e.stopPropagation() isDone = !@model.get('done') @model.set 'done', isDone Thursday, August 8, 13

Router & History Thursday, August 8, 13

Routes • Router is auto registered when new instance is created • routes attribute • {"url/pattern": "callback"} • Start routing # Use hash fragments Backbone.history.start() # or use HTML5 History API # Backbone.history.start({pushState: true}) Thursday, August 8, 13

Code Sample class TodoRouter extends Backbone.Router routes: '': 'activeTodos' 'all': 'allTodos' activeTodos: -> todosController.index(onlyActive: true) allTodos: -> todosController.index() Thursday, August 8, 13

Further Readings Thursday, August 8, 13

Documentation • http://backbonejs.org/ • Developing Backbone.js Applications (free ebook) http://addyosmani.github.io/ backbone-fundamentals/ Thursday, August 8, 13

Resources • Sample: http://todomvc.com/architecture- examples/backbone/ • https://github.com/jashkenas/backbone/wiki/ Extensions,-Plugins,-Resources Thursday, August 8, 13

Marionette • Application library based on Backbone • Scale for large JavaScript applications • Collection of common design, good patterns and best practices Thursday, August 8, 13

Marionette Resources • http://marionettejs.com/ • Backbone.Marionette.js: A Gentle Introduction ($17) https://leanpub.com/ marionette-gentle-introduction • Building Backbone Plugins ($25) https:// leanpub.com/building-backbone-plugins Thursday, August 8, 13