Backbone intro
Upcoming SlideShare
Loading in...5
×
 

Backbone intro

on

  • 832 views

 

Statistics

Views

Total Views
832
Views on SlideShare
832
Embed Views
0

Actions

Likes
1
Downloads
22
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Backbone intro Backbone intro Presentation Transcript

    • 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 inView • 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 "<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
    • 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