• 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

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

• 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!

• 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

• 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

• 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. Back to front.
  • File organization for 3.0: JS, JST, Jammit
  • File organization for 3.1: Asset pipeline, rails-backbone gem
  • JSON APIs
    • ActiveRecord.include_root_in_json
    • Rails 3.1 Params Wrapper / wrap_parameters
    • Model#as_json probably isnt the best place for presentation: Presenter object, rabl
  • CSRF Token

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

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

• Jasmine goodies! Get these.
  • Spy/stub/mock, even your HTTP, with sinon.js
  • If you're looking for factory_girl.js, it's called Rosie
  • guard-jasmine autotest your Jasmine with headless webkit (phantomjs)
  • Write in CoffeeScript and use the 3.1 asset pipeline with jasminerice
  • Get started with James Newbery's excellent blog posts on testing Backbone with Jasmine
  • Check out his examples on GitHub
• Integration test with:
  • capybara-webkit for fast, headless, accurate WebKit testing
  • Selenium for other browsers, or if capybara-webkit has issues.

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

• Rails Model#save cascades to clients: backbone_sync-rails over pubsub bus Faye
• Work-in-progress Software transactional memory sync: https://github.com/codeparty/racer
  • Future plans: diff-match-patch, Operational transform
• Now.js
• Substack DNode
• Data.js: Data Manipulation and Graph Persistence for Node.js and the Browser. Can ride now.js transport.
  • substance.io, above, is written with Backbone.js, and is open source https://github.com/michael/substance
• Backbone on the server with node.js... with DNode or NowJS (?!)