Backbone.js Rails 3.2 & with Handlebars

@whazzmaster

Javascript MVC = SQUEE!

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

Dust Mustache.js Underscore.js JavaScript Micro-Templating Handlebars.js Hogan.js BabaJS Chain.js Step Two jQote jSmart

ಠ_ಠ Step Three

Rails 3.2 Backbone.js Handlebars One Option

Todo...

C’mon, bring your green hat

★Useful gems and libraries! ★Backbone model relationships! ★Off on the right foot! ★Use Handlebars for template!

GEMS! backbone-on-rails https://github.com/meleyal/backbone-on-rails ➡Vendors latest backbone + underscore ➡Includes useful generators ➡Nice naming conventions

GEMS! handlebars_assets https://github.com/leshill/handlebars_assets ➡Vendors latest handlebars version ➡Integrates with asset pipeline ➡Automatic inclusion in JST hash

/javascripts application.js /collections /models /routers /templates /views my_app.js.coffee Application skeleton

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()

My Foo has many Bars! HALP

LIBRARIES! Backbone-relational https://github.com/PaulUithol/Backbone-relational ➡Define model relationships in JS ➡Relationship-based events ➡Load all or partial subcollections

Phone Book Person Phone Number Phone Number Phone Number

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"

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"

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

ADVICE (IANA***)

Carefully choose workflows to javascriptize

Start with an ‘app’ container view

Work outside in and refactor once things work

Then aggressively reduce complexity, per-view

Look for ‘widgetizable’ views

Prefer event-binding to overloading a view’s render method antipattern: your render method invokes a bunch of jQuery calls

Handleba

{{first_name}} {{last_name}}

{{#each phone_numbers}}
• {{label}}: {{number}}
{{/each}}

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

Thank you

Zachery Moneypenny @whazzmaster code at github.com/whazzmaster slides at whazzmaster.github.com