Backbone.js on Rails

(This is an HTML slide deck. Press "h" for help, or use the arrow keys to navigate. Press "p" for presenter notes, where you'll find a bunch of links, especially towards the end.)

Presenter Notes

Web apps shifting client-side

Presenter Notes

  • These days, some web apps have more code on the client than on the server.
  • Who is seeing these trends? What are you doing about it?
  • How much JS?

    • Airbrake: Almost 0
    • Copycopter: 30%
    • Trajectory 41%
    • IoraHealth: 62%
  • Hands up: Ruby, Rails, JavaScript, web apps, csmvc

This talk

  • Client-side frameworks
  • Moving parts of Backbone
  • Example
  • Code dive
  • Bonus topics
  • Resources

Presenter Notes

After this talk, you will:

  • Know why and how to use a client-side framework
  • Be able to read up on a few of them
  • Be able to follow along with Backbone tutorials
  • Know how to add Backbone to a new or existing Rails app

Organize your JavaScript

Presenter Notes

  • Where do frameworks come from?
  • Paradigm -> path-least-resistance -> implementation -> architecture -> technical debt
  • Server: Req/response (CGI, EHTML) -> procedural & tag soup *SP.
  • Client: Async ($) -> Deeply nested callbacks (if-like), Stateful (DOM) -> app data stored in the DOM.
  • Patterns for organization. MVC is one. Good for GUI.
  • MVC over HTTP is often stateless. Some state maintained with session
  • CS-MVC in GUI is stateful. THIS IS OKAY!

But which framework?

  • Cappuccino
  • SproutCore (1.x, 2.x)
  • Knockout.js
  • Batman.js
  • JavaScriptMVC
  • Spine.js
  • Backbone.js
  • Angular, Coherent, PureMVC-js, AFrameJS, TrimPath Junction, ...

Presenter Notes

  • Decision Fatigue NY Times Mag article
  • Cappuccino/SproutCore: UI controls. Desktop like.
  • SC2: Similar, larger. Less doc. Declarative bindings, even in templates.
  • Knockout: MVVM. WCF, Silverlight.
  • Batman: Node server, share models, data-bind templates
  • JavaScriptMVC: Larger, older, generators, dep mgmt, builds, testing, jQuery-based-and-like, JSON/REST transport
  • Spine.js: Very similar. Even smaller. Coffee. Fully async, client rules.
  • Backbone: Small, readable, intended for modification, extracted from DocumentCloud

Backbone.js

Presenter Notes

Moving parts

  • History
  • Router
  • View
  • Model
  • Collection
  • Sync
  • Underscore
  • $

Presenter Notes

  • History - Handles hashchange, pushstate, BB.history.start()
  • Router - read fragment, dispatch to action
  • View - Takes model data, presents in DOM. Binds to DOM events, triggers app logic. 1:1 el, this.$, events, $.delegate, templating
  • Model - Conversions, computed properties, validations, access control, events change/change:attr,destroy,error
  • Collection - Ordered set of models. URL, fetch(), reset(json), _.methods, comparator, events reset/add/remove/all model events
  • Sync - Encapsulation of persistence. Default $.ajax to RESTful JSON API. Designed for override, global or per-class.
  • Underscore - FP (select, reduce), bind, template, deep isEqual, clone, tap
  • $ - jQuery || Zepto

Example

  • http://backbonechat.herokuapp.com
  • https://github.com/jasonm/chat_app

Presenter Notes

  • https://github.com/jasonm/chat_app
  • URI: /projects/oss/stories/#1
  • GET /projects/oss/stories/
  • Rails response: HTML, <script>s, JSON
  • Bootstrap collections
  • Instantiate router
  • Backbone.history.start()
  • Route fragment
  • Dispatch to backbone action
  • Create view
  • event and data bindings
  • view.render()
  • _.template()
  • $('#some-elem').html(someHtml)

Rails integration

  • File organization
  • JSON API
  • CSRF

Presenter Notes

Bonus stuff!

Presenter Notes

  • What is left?
    • Testing
    • pushState
    • push sync (WebSocket)

Testing

Presenter Notes

  • Business and presentation logic
  • Stateful
  • Asynchronous
  • Modular, decoupled JS

Testing

  • Isolation: Jasmine
  • Integration: capybara-webkit, selenium

Presenter Notes

pushState

Presenter Notes

  • GitHub's source browser uses it with pjax
  • Backbone.history.start({pushState: true});
  • Server-side support.

Push synchronization

Presenter Notes

Resources

Presenter Notes

Presenter Notes

Further reading: Books on JavaScript

Presenter Notes

Recap

  • Client-side frameworks
  • Moving parts of Backbone
  • Example
  • Code dive
  • Bonus topics
  • Resources

Presenter Notes