Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Backbone Intro

17bca47a4961a24f82ef972aa9e1c986?s=47 Ian Yang
August 08, 2013

Backbone Intro

17bca47a4961a24f82ef972aa9e1c986?s=128

Ian Yang

August 08, 2013
Tweet

Transcript

  1. Backbone A Brief Introduction Thursday, August 8, 13

  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. Backbone IS NOT • It is not a framework Thursday,

    August 8, 13
  4. Structure Thursday, August 8, 13

  5. Dependencies • jQuery (or Zepto) • underscore (or Lo-Dash) •

    JSON2.js (for old browsers such as IE) Thursday, August 8, 13
  6. Components • Backbone.Events • Backbone.Model • Backbone.Collecti on • Backbone.View

    • Backbone.Router • Backbone.History • Backbone.sync Thursday, August 8, 13
  7. Event Driven Events (mixin) Router History View Collection Model Thursday,

    August 8, 13
  8. Events object = {} _.extend object, Backbone.Events object.on "alert", (msg)

    -> alert "Triggered " + msg object.trigger "alert", "an event" Thursday, August 8, 13
  9. MVC View Controller* Model & Collection Control Event Thursday, August

    8, 13
  10. 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
  11. Controller Responsibilities • Construct views • Sync models/collections through API

    • Connect models/collections with views Thursday, August 8, 13
  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. Interaction View Controller* Router & History Manipulate DOM Tree DOM

    Events Control Event Update URL URL Change Back/Forward Thursday, August 8, 13
  14. Sync Model & Collection Backbone.sync HTML5 localStorage $.ajax CouchDB Thursday,

    August 8, 13
  15. Model & Collection Thursday, August 8, 13

  16. Model • Key-value attributes • Changes events via set method:

    "change", "change[attribute]" • JSON serialization • Validation Thursday, August 8, 13
  17. Collection • Array/Hash of Models • underscore methods • Collection

    events: "add", "remove", "reset" • Model events aggregation • JSON serialization Thursday, August 8, 13
  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. 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. sync implementations • Bundled with RESTful API via jQuery.ajax •

    jeromegn/Backbone.localStorage • pyronicide/backbone.couchdb.js Thursday, August 8, 13
  21. View Thursday, August 8, 13

  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. 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. 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. Handle DOM Events • events attribute • {"event selector": "callback"}

    Thursday, August 8, 13
  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. Router & History Thursday, August 8, 13

  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. Code Sample class TodoRouter extends Backbone.Router routes: '': 'activeTodos' 'all':

    'allTodos' activeTodos: -> todosController.index(onlyActive: true) allTodos: -> todosController.index() Thursday, August 8, 13
  30. Further Readings Thursday, August 8, 13

  31. Documentation • http://backbonejs.org/ • Developing Backbone.js Applications (free ebook) http://addyosmani.github.io/

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

    8, 13
  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. 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