Backbone.js, Rails, and Handlebars

Taking Backbone.js beyond a todo application; includes interesting rubygems, modeling relationships, advice on getting started, and a little intro to handlebars.

Transcript

1. Backbone.js Rails 3.2 & with Handlebars
2. @whazzmaster
3. Javascript MVC = SQUEE!
4. Step One Angular.js Knockout.js Backbone.js Ember.js Serenade.js Batman.js Sammy.js Cappuccino Spine.js Sproutcore 1.x SHAZAM.js GWT
5. Dust Mustache.js Underscore.js JavaScript Micro-Templating Handlebars.js Hogan.js BabaJS Chain.js Step Two jQote jSmart
6. ಠ_ಠ Step Three
7. Rails 3.2 Backbone.js Handlebars One Option
8. Todo...
9. C’mon, bring your green hat
10. ★Useful gems and libraries! ★Backbone model relationships! ★Off on the right foot! ★Use Handlebars for template!
11. GEMS! backbone-on-rails https://github.com/meleyal/backbone-on-rails ➡Vendors latest backbone + underscore ➡Includes useful generators ➡Nice naming conventions
12. GEMS! handlebars_assets https://github.com/leshill/handlebars_assets ➡Vendors latest handlebars version ➡Integrates with asset pipeline ➡Automatic inclusion in JST hash
13. /javascripts application.js /collections /models /routers /templates /views my_app.js.coffee Application skeleton
14. my_app.js.coffee #= require_self #= require_tree ./routers #= require_tree ./templates #= require_tree ./models #= require_tree ./collections #= require_tree ./views window.MyApp = Models: {} Collections: {} Views: {} Routers: {} init: (options) -> @router = new MyApp.Routers.MainRouter(options) Backbone.history.start()
15. My Foo has many Bars! HALP
16. LIBRARIES! Backbone-relational https://github.com/PaulUithol/Backbone-relational ➡Define model relationships in JS ➡Relationship-based events ➡Load all or partial subcollections
17. Phone Book Person Phone Number Phone Number Phone Number
18. models/person.js.coffee class MyApp.Models.Person extends Backbone.RelationalModel relations: [{ type: Backbone.HasMany, key: "phone_numbers", relatedModel: "MyApp.Models.PhoneNumber", collectionType: "MyApp.Collections.PhoneNumbersCollection", reverseRelation: { key: "person" } }] defaults: first_name: null last_name: null url: -> "/people/"+@get("id")+".json"
19. models/phone_number.js.coffee class MyApp.Models.PhoneNumber extends Backbone.RelationalModel defaults: label: null number: null url: -> if @isNew() "/people/"+@get("person_id")+"/phone_numbers.json" else "/people/"+@get("person_id")+"/phone_numbers/"+@get("id")+".json"
20. Congratulations! Your models are now in a relationship ★ fetchRelated to get sub-collections ★ add, remove, and update events exposed ★ traverse from parent to child or vice-versa
21. ADVICE (IANA***)
22. Carefully choose workflows to javascriptize
23. Start with an ‘app’ container view
24. Work outside in and refactor once things work
25. Then aggressively reduce complexity, per-view
26. Look for ‘widgetizable’ views
27. Prefer event-binding to overloading a view’s render method antipattern: your render method invokes a bunch of jQuery calls
28. Handleba
29. <h2>{{first_name}} {{last_name}}</h2> <ul> {{#each phone_numbers}} <li>{{label}}: {{number}}</li> {{/each}} </ul> templates/people/show.jst.hbs MyApp.Views.People ||= {} class MyApp.Views.People.ShowView extends Backbone.View template: JST["templates/people/show"] tagName: 'div' views/people/show_view.js.coffee
30. Thank you
31. Zachery Moneypenny @whazzmaster code at github.com/whazzmaster slides at whazzmaster.github.com