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

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?