Download - Backbone intro
![Page 1: Backbone intro](https://reader033.vdocuments.net/reader033/viewer/2022060107/55494af3b4c905054d8b588a/html5/thumbnails/1.jpg)
BackboneA Brief Introduction
Thursday, August 8, 13
![Page 2: Backbone intro](https://reader033.vdocuments.net/reader033/viewer/2022060107/55494af3b4c905054d8b588a/html5/thumbnails/2.jpg)
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
![Page 3: Backbone intro](https://reader033.vdocuments.net/reader033/viewer/2022060107/55494af3b4c905054d8b588a/html5/thumbnails/3.jpg)
Backbone IS NOT
• It is not a framework
Thursday, August 8, 13
![Page 4: Backbone intro](https://reader033.vdocuments.net/reader033/viewer/2022060107/55494af3b4c905054d8b588a/html5/thumbnails/4.jpg)
Structure
Thursday, August 8, 13
![Page 5: Backbone intro](https://reader033.vdocuments.net/reader033/viewer/2022060107/55494af3b4c905054d8b588a/html5/thumbnails/5.jpg)
Dependencies
• jQuery (or Zepto)
• underscore (or Lo-Dash)
• JSON2.js (for old browsers such as IE)
Thursday, August 8, 13
![Page 6: Backbone intro](https://reader033.vdocuments.net/reader033/viewer/2022060107/55494af3b4c905054d8b588a/html5/thumbnails/6.jpg)
Components
• Backbone.Events
• Backbone.Model
• Backbone.Collection
• Backbone.View
• Backbone.Router
• Backbone.History
• Backbone.sync
Thursday, August 8, 13
![Page 7: Backbone intro](https://reader033.vdocuments.net/reader033/viewer/2022060107/55494af3b4c905054d8b588a/html5/thumbnails/7.jpg)
Event DrivenEvents
(mixin)Router
History
View
Collection
Model
Thursday, August 8, 13
![Page 8: Backbone intro](https://reader033.vdocuments.net/reader033/viewer/2022060107/55494af3b4c905054d8b588a/html5/thumbnails/8.jpg)
Events
object = {}
_.extend object, Backbone.Events
object.on "alert", (msg) -> alert "Triggered " + msg
object.trigger "alert", "an event"
Thursday, August 8, 13
![Page 9: Backbone intro](https://reader033.vdocuments.net/reader033/viewer/2022060107/55494af3b4c905054d8b588a/html5/thumbnails/9.jpg)
MVC
View
Controller*
Model & Collection
Control
Event
Thursday, August 8, 13
![Page 10: Backbone intro](https://reader033.vdocuments.net/reader033/viewer/2022060107/55494af3b4c905054d8b588a/html5/thumbnails/10.jpg)
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
![Page 11: Backbone intro](https://reader033.vdocuments.net/reader033/viewer/2022060107/55494af3b4c905054d8b588a/html5/thumbnails/11.jpg)
Controller Responsibilities
• Construct views
• Sync models/collections through API
• Connect models/collections with views
Thursday, August 8, 13
![Page 12: Backbone intro](https://reader033.vdocuments.net/reader033/viewer/2022060107/55494af3b4c905054d8b588a/html5/thumbnails/12.jpg)
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
![Page 13: Backbone intro](https://reader033.vdocuments.net/reader033/viewer/2022060107/55494af3b4c905054d8b588a/html5/thumbnails/13.jpg)
Interaction
View
Controller*Router & History
ManipulateDOM Tree
DOM Events
Control
Event
Update URL
URL ChangeBack/Forward
Thursday, August 8, 13
![Page 14: Backbone intro](https://reader033.vdocuments.net/reader033/viewer/2022060107/55494af3b4c905054d8b588a/html5/thumbnails/14.jpg)
SyncModel & Collection
Backbone.sync
HTML5 localStorage
$.ajax
CouchDB
Thursday, August 8, 13
![Page 15: Backbone intro](https://reader033.vdocuments.net/reader033/viewer/2022060107/55494af3b4c905054d8b588a/html5/thumbnails/15.jpg)
Model & Collection
Thursday, August 8, 13
![Page 16: Backbone intro](https://reader033.vdocuments.net/reader033/viewer/2022060107/55494af3b4c905054d8b588a/html5/thumbnails/16.jpg)
Model
• Key-value attributes
• Changes events via set method: "change", "change[attribute]"
• JSON serialization
• Validation
Thursday, August 8, 13
![Page 17: Backbone intro](https://reader033.vdocuments.net/reader033/viewer/2022060107/55494af3b4c905054d8b588a/html5/thumbnails/17.jpg)
Collection
• Array/Hash of Models
• underscore methods
• Collection events: "add", "remove", "reset"
• Model events aggregation
• JSON serialization
Thursday, August 8, 13
![Page 18: Backbone intro](https://reader033.vdocuments.net/reader033/viewer/2022060107/55494af3b4c905054d8b588a/html5/thumbnails/18.jpg)
class Todo extends Backbone.Modelclass TodosCollection extends Backbone.Collection model: Todo
todo = new Todo title: "Backbone", done: truetodos = new TodosCollectiontodos.add todotodos.add title: "Marionette", done: falsetodo.on 'change:done', (model) -> console.log model.toJSON()todos.on 'add', (model, coll) -> console.log "new item"
Code Sample
Thursday, August 8, 13
![Page 19: Backbone intro](https://reader033.vdocuments.net/reader033/viewer/2022060107/55494af3b4c905054d8b588a/html5/thumbnails/19.jpg)
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
![Page 20: Backbone intro](https://reader033.vdocuments.net/reader033/viewer/2022060107/55494af3b4c905054d8b588a/html5/thumbnails/20.jpg)
sync implementations
• Bundled with RESTful API via jQuery.ajax
• jeromegn/Backbone.localStorage
• pyronicide/backbone.couchdb.js
Thursday, August 8, 13
![Page 21: Backbone intro](https://reader033.vdocuments.net/reader033/viewer/2022060107/55494af3b4c905054d8b588a/html5/thumbnails/21.jpg)
View
Thursday, August 8, 13
![Page 22: Backbone intro](https://reader033.vdocuments.net/reader033/viewer/2022060107/55494af3b4c905054d8b588a/html5/thumbnails/22.jpg)
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
![Page 23: Backbone intro](https://reader033.vdocuments.net/reader033/viewer/2022060107/55494af3b4c905054d8b588a/html5/thumbnails/23.jpg)
Code Sampleclass 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 "<label><input type=\”checkbox\”> #{context.title} </label>" @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
![Page 24: Backbone intro](https://reader033.vdocuments.net/reader033/viewer/2022060107/55494af3b4c905054d8b588a/html5/thumbnails/24.jpg)
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
![Page 25: Backbone intro](https://reader033.vdocuments.net/reader033/viewer/2022060107/55494af3b4c905054d8b588a/html5/thumbnails/25.jpg)
Handle DOM Events
• events attribute
• {"event selector": "callback"}
Thursday, August 8, 13
![Page 26: Backbone intro](https://reader033.vdocuments.net/reader033/viewer/2022060107/55494af3b4c905054d8b588a/html5/thumbnails/26.jpg)
Code Sample
class TodoShow extends Backbone.View events: 'click label': 'toggle'
toggle: (e) -> e.preventDefault() e.stopPropagation() isDone = [email protected]('done') @model.set 'done', isDone
Thursday, August 8, 13
![Page 27: Backbone intro](https://reader033.vdocuments.net/reader033/viewer/2022060107/55494af3b4c905054d8b588a/html5/thumbnails/27.jpg)
Router & History
Thursday, August 8, 13
![Page 28: Backbone intro](https://reader033.vdocuments.net/reader033/viewer/2022060107/55494af3b4c905054d8b588a/html5/thumbnails/28.jpg)
Routes
• Router is auto registered when new instance is created
• routes attribute
• {"url/pattern": "callback"}
• Start routing# Use hash fragmentsBackbone.history.start()# or use HTML5 History API# Backbone.history.start({pushState: true})
Thursday, August 8, 13
![Page 29: Backbone intro](https://reader033.vdocuments.net/reader033/viewer/2022060107/55494af3b4c905054d8b588a/html5/thumbnails/29.jpg)
Code Sample
class TodoRouter extends Backbone.Router routes: '': 'activeTodos' 'all': 'allTodos'
activeTodos: -> todosController.index(onlyActive: true)
allTodos: -> todosController.index()
Thursday, August 8, 13
![Page 30: Backbone intro](https://reader033.vdocuments.net/reader033/viewer/2022060107/55494af3b4c905054d8b588a/html5/thumbnails/30.jpg)
Further Readings
Thursday, August 8, 13
![Page 31: Backbone intro](https://reader033.vdocuments.net/reader033/viewer/2022060107/55494af3b4c905054d8b588a/html5/thumbnails/31.jpg)
Documentation
• http://backbonejs.org/
• Developing Backbone.js Applications (free ebook) http://addyosmani.github.io/backbone-fundamentals/
Thursday, August 8, 13
![Page 32: Backbone intro](https://reader033.vdocuments.net/reader033/viewer/2022060107/55494af3b4c905054d8b588a/html5/thumbnails/32.jpg)
Resources
• Sample: http://todomvc.com/architecture-examples/backbone/
• https://github.com/jashkenas/backbone/wiki/Extensions,-Plugins,-Resources
Thursday, August 8, 13
![Page 33: Backbone intro](https://reader033.vdocuments.net/reader033/viewer/2022060107/55494af3b4c905054d8b588a/html5/thumbnails/33.jpg)
Marionette
• Application library based on Backbone
• Scale for large JavaScript applications
• Collection of common design, good patterns and best practices
Thursday, August 8, 13
![Page 34: Backbone intro](https://reader033.vdocuments.net/reader033/viewer/2022060107/55494af3b4c905054d8b588a/html5/thumbnails/34.jpg)
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