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

Backbone Revolution

Art Pai
May 30, 2012

Backbone Revolution

Some thoughts on Backbone.js from a designer's point of view. Backbone.js is not just a JavaScript MVC framework, but also a revolution to web design, just like jQuery did.

Talked on HappyDesigner Meetup 8. http://registrano.com/events/hdm8

Art Pai

May 30, 2012
Tweet

More Decks by Art Pai

Other Decks in Design

Transcript

  1. Who Am I ★ Web Designer, Waveface Inc ★ @minipai

    on Twitter ★ http://minipai.tw
  2. and

  3. ★ Fast update powered by tumblr ★ Fast Coding powered

    by middleman ★ Fast loading powered by backbone Benefits
  4. ★ Javascript MVC Framework ★ Model - View - Collection

    ★ Data Events ★ Routes & History
  5. JavaScript MVC ★ Model - View - Whatever MVC /

    MVP / MVVM ... ★ Model - manage data for an application ★ View - observes model’s changes ★ View - user interacts with it ★ Frontend MVC ≠ Backend MVC http://emberjs.com/guides/ember_mvc/ http://addyosmani.com/blog/understanding-mvc-and-mvp-for-javascript-and-backbone-developers/
  6. Model - View ! var Todo = Backbone.Model.extend({ ! !

    // Default attributes for the todo. ! ! defaults: { ! ! ! title: "empty todo...", ! ! ! done: false ! ! }, ! ! toggle: function() { ! ! ! this.save({done: !this.get("done")}); ! ! } ! }); ! var TodoView = Backbone.View.extend({ ! ! events: { ! ! ! "click .toggle" : "toggleDone" ! ! }, ! ! toggleDone: function() { ! ! ! this.model.toggle(); ! ! } ! }); !
  7. Data Events ! var TodoView = Backbone.View.extend({ ! ! template:

    _.template($('#item-template').html()), ! ! initialize: function() { ! ! ! this.model.on('change', this.render, this); ! ! }, ! ! // Re-render the titles of the todo item. ! ! render: function() { ! ! ! this.$el.html(this.template(this.model.toJSON())); ! ! ! this.$el.toggleClass('done', this.model.get('done')); ! ! ! return this; ! ! } ! }); !
  8. Routes & History var TodoApp = Backbone.Router.extend({ routes: { !

    // / '': 'home', ! // /hidden or #hidden 'hidden': 'hidden' }, initialize: function() { this.todos = new Todos; }, start: function() { Backbone.history.start(); }, home: function() { this.view = new TodoListView({collection: this.todos}); }, hidden: function() { this.view = new HiddenListView({collection: this.todos}); } })
  9. It’s popular ★ PeepCode https://peepcode.com/products/backbone-js ★ CodeSchool http://www.codeschool.com/courses/anatomy-of-backbonejs ★ nettus+

    tutorial http://net.tutsplus.com/tag/backbone/ ★ O’REILLY book http://shop.oreilly.com/product/0636920025344.do ★ 3042 questions http://stackoverflow.com/questions/tagged/backbone.js
  10. It’s simple ★ Backcone.Events ★ Backcone.Model ★ Backcone.Collection ★ Backcone.View

    ★ Backcone.Router ★ Backcone.History ★ Backcone.Sync Ember.Application Ember.Array Ember.ArrayController Ember.ArrayProxy Ember.Binding Ember.Checkbox Ember.CollectionView Ember.Comparable Ember.ComputedProperty Ember.ContainerView Ember.Copyable Ember.CoreObject Ember.Enumerable Ember.Error Ember.Freezable Ember.Handlebars Ember.Logger Ember.Mixin Ember.MutableArray Ember.MutableEnumerable Ember.NativeArray Ember.Object Ember.Observable Ember.platform Ember.RenderBuffer Ember.run Ember.Select Ember.Set Ember.StateManager Ember.String Ember.TextArea Ember.TextField Ember.TextSupport Ember.View
  11. W b

  12. Instead of using Rails to generate dynamic HTML that will

    communicate with the server through forms and links, many developers are treating their web application as just another client, consuming a simple JSON API. Rails::API readme https://github.com/spastorino/rails-api