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

Backbone Revolution

99d05789d84b5804c328f0bfc8a8c275?s=47 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

99d05789d84b5804c328f0bfc8a8c275?s=128

Art Pai

May 30, 2012
Tweet

Transcript

  1. Backbone Revolution D r’ P f V w

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

    on Twitter ★ http://minipai.tw
  3. S r S r ...

  4. My homepage need Redesign

  5. Problem ★Blog is not updated for 7 month ★

  6. Solution ★ Show clips, not blog on homepage

  7. Built with? ★ Wordpress ★ Codeigniter ★ Ruby on Rails

    ✕ ✕ ✕
  8. B ✕

  9. use tumblr

  10. and

  11. Problem Solved ★ Showcase clips on homepage ★

  12. Problem Solved ★ Display my tumblr updates ★

  13. Update everything on social networks

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

    by middleman ★ Fast loading powered by backbone Benefits
  15. W ’ b b ?

  16. ★ Javascript MVC Framework ★ Model - View - Collection

    ★ Data Events ★ Routes & History
  17. 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/
  18. 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(); ! ! } ! }); !
  19. 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; ! ! } ! }); !
  20. 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}); } })
  21. W B b ? ( nettus+: 20 JavaScript Frameworks Worth

    Checking Out )
  22. 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
  23. 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
  24. It’s flexible There's More Than One Way To Do It

  25. B b w Q r popular, simple and flexible

  26. JavaScript build interaction build application jQuery Backbone build interface CSS

  27. Dark Age Renaissance Revolution JavaScript jQuery Backbone

  28. Backbone Revolution

  29. W b

  30. https://speakerdeck.com/u/hjortureh/p/javascript-mvc-backbonejs-tips-tricks L & R r S r + 2006 L

    & R r S r 2000 backend L + L + R r +... NOW frontend
  31. 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
  32. take backbone a try http://backbonejs.org/

  33. Questions?