Your SlideShare is downloading. ×
0
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,
• c...
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
...
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 "a...
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 inView
• Cont...
Controller
Responsibilities
• Construct views
• Sync models/collections through API
• Connect models/collections with view...
Controller Sample
todos = new TodosCollection
todosController =
index: ->
view = new TodoIndex collection: todos
App.layou...
Interaction
View
Controller*
Router &
History
Manipulate
DOM Tree
DOM Events
Control
Event
Update URL
URL Change
Back/Forw...
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
• Validat...
Collection
• Array/Hash of Models
• underscore methods
• Collection events: "add", "remove",
"reset"
• Model events aggreg...
class Todo extends Backbone.Model
class TodosCollection extends Backbone.Collection
model: Todo
todo = new Todo title: "Ba...
Backbone.sync
• Model persistence
• Signature sync(method, model, [options])
• method - CRUD
• model - model or collection...
sync implementations
• Bundled with RESTful API via jQuery.ajax
• jeromegn/Backbone.localStorage
• pyronicide/backbone.cou...
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, clas...
Code Sample
class TodoShow extends Backbone.View
tagName: 'li'
className: 'todo-item'
# It is good practices to use templa...
Handle Model Events
class TodoShow extends Backbone.View
initialize: ->
# new methods in 1.0.0
# pay attention to events c...
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.stopP...
Router & History
Thursday, August 8, 13
Routes
• Router is auto registered when new
instance is created
• routes attribute
• {"url/pattern": "callback"}
• Start r...
Code Sample
class TodoRouter extends Backbone.Router
routes:
'': 'activeTodos'
'all': 'allTodos'
activeTodos: ->
todosCont...
Further Readings
Thursday, August 8, 13
Documentation
• http://backbonejs.org/
• Developing Backbone.js Applications (free
ebook) http://addyosmani.github.io/
bac...
Resources
• Sample: http://todomvc.com/architecture-
examples/backbone/
• https://github.com/jashkenas/backbone/wiki/
Exte...
Marionette
• Application library based on Backbone
• Scale for large JavaScript applications
• Collection of common design...
Marionette Resources
• http://marionettejs.com/
• Backbone.Marionette.js:A Gentle
Introduction ($17) https://leanpub.com/
...
Upcoming SlideShare
Loading in...5
×

Backbone intro

615

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
615
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
24
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Backbone intro"

  1. 1. Backbone A Brief Introduction Thursday, August 8, 13
  2. 2. 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
  3. 3. Backbone IS NOT • It is not a framework Thursday, August 8, 13
  4. 4. Structure Thursday, August 8, 13
  5. 5. Dependencies • jQuery (or Zepto) • underscore (or Lo-Dash) • JSON2.js (for old browsers such as IE) Thursday, August 8, 13
  6. 6. Components • Backbone.Events • Backbone.Model • Backbone.Collecti on • Backbone.View • Backbone.Router • Backbone.History • Backbone.sync Thursday, August 8, 13
  7. 7. Event Driven Events (mixin) Router History View Collection Model Thursday, August 8, 13
  8. 8. Events object = {} _.extend object, Backbone.Events object.on "alert", (msg) -> alert "Triggered " + msg object.trigger "alert", "an event" Thursday, August 8, 13
  9. 9. MVC View Controller* Model & Collection Control Event Thursday, August 8, 13
  10. 10. Controller • NO Backbone.Controller • Controller is a concept. Some put controller logic in Router, some put inView • Controller can be extracted out as collection of functions Thursday, August 8, 13
  11. 11. Controller Responsibilities • Construct views • Sync models/collections through API • Connect models/collections with views Thursday, August 8, 13
  12. 12. 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
  13. 13. Interaction View Controller* Router & History Manipulate DOM Tree DOM Events Control Event Update URL URL Change Back/Forward Thursday, August 8, 13
  14. 14. Sync Model & Collection Backbone.sync HTML5 localStorage $.ajax CouchDB Thursday, August 8, 13
  15. 15. Model & Collection Thursday, August 8, 13
  16. 16. Model • Key-value attributes • Changes events via set method: "change", "change[attribute]" • JSON serialization • Validation Thursday, August 8, 13
  17. 17. Collection • Array/Hash of Models • underscore methods • Collection events: "add", "remove", "reset" • Model events aggregation • JSON serialization Thursday, August 8, 13
  18. 18. 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
  19. 19. 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
  20. 20. sync implementations • Bundled with RESTful API via jQuery.ajax • jeromegn/Backbone.localStorage • pyronicide/backbone.couchdb.js Thursday, August 8, 13
  21. 21. View Thursday, August 8, 13
  22. 22. 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
  23. 23. 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 "<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
  24. 24. 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
  25. 25. Handle DOM Events • events attribute • {"event selector": "callback"} Thursday, August 8, 13
  26. 26. 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
  27. 27. Router & History Thursday, August 8, 13
  28. 28. 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
  29. 29. Code Sample class TodoRouter extends Backbone.Router routes: '': 'activeTodos' 'all': 'allTodos' activeTodos: -> todosController.index(onlyActive: true) allTodos: -> todosController.index() Thursday, August 8, 13
  30. 30. Further Readings Thursday, August 8, 13
  31. 31. Documentation • http://backbonejs.org/ • Developing Backbone.js Applications (free ebook) http://addyosmani.github.io/ backbone-fundamentals/ Thursday, August 8, 13
  32. 32. Resources • Sample: http://todomvc.com/architecture- examples/backbone/ • https://github.com/jashkenas/backbone/wiki/ Extensions,-Plugins,-Resources Thursday, August 8, 13
  33. 33. Marionette • Application library based on Backbone • Scale for large JavaScript applications • Collection of common design, good patterns and best practices Thursday, August 8, 13
  34. 34. 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
  1. A particular slide catching your eye?

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

×