# 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](http://www.nytimes.com/2011/08/21/magazine/do-you-suffer-from-decision-fatigue.html)
* 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
---
# 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, `