Backbone Revolution

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?