# 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, `<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

* Rails integration.  Back to front.
    * File organization for 3.0: JS, JST, Jammit
    * File organization for 3.1: Asset pipeline, [`rails-backbone` gem](https://github.com/codebrew/backbone-rails)
    * JSON APIs
        * [`ActiveRecord.include_root_in_json`](https://github.com/jasonm/wizards/blob/master/config/initializers/wrap_parameters.rb)
        * Rails 3.1 [Params Wrapper](https://github.com/rails/rails/blob/master/actionpack/lib/action_controller/metal/params_wrapper.rb) / wrap_parameters
        * Model#as_json probably isnt the best place for presentation: Presenter object, [rabl](https://github.com/nesquena/rabl)
    * [CSRF Token](https://github.com/codebrew/backbone-rails/blob/master/vendor/assets/javascripts/backbone_rails_sync.js#L26-27)

---
# 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

* [Jasmine](http://pivotal.github.com/jasmine/) goodies!  Get these.
    * Spy/stub/mock, even your HTTP, with [sinon.js](http://sinonjs.org/)
    * If you're looking for factory_girl.js, it's called [Rosie](https://github.com/bkeepers/rosie)
    * [guard-jasmine](https://github.com/netzpirat/guard-jasmine) autotest your Jasmine with headless webkit ([phantomjs](http://www.phantomjs.org/))
    * Write in CoffeeScript and use the 3.1 asset pipeline with [jasminerice](https://github.com/bradphelan/jasminerice)
    * Get started with James Newbery's excellent blog posts on [testing Backbone with Jasmine](http://tinnedfruit.com/2011/03/03/testing-backbone-apps-with-jasmine-sinon.html)
    * Check out his [examples on GitHub](https://github.com/froots/backbone-jasmine-examples)
* Integration test with:
    * [capybara-webkit](https://github.com/thoughtbot/capybara-webkit) for fast, headless, accurate WebKit testing
    * Selenium for other browsers, or if capybara-webkit has issues.

---
# pushState

# Presenter Notes

* GitHub's source browser uses it with [pjax](https://github.com/defunkt/jquery-pjax)
* `Backbone.history.start({pushState: true});`
* Server-side support.

---
# Push synchronization

# Presenter Notes

* Rails `Model#save` cascades to clients: [backbone_sync-rails](https://github.com/jasonm/backbone_sync-rails) over pubsub bus [Faye](http://faye.jcoglan.com/)
* Work-in-progress [Software transactional memory](http://en.wikipedia.org/wiki/Software_transactional_memory) sync: [https://github.com/codeparty/racer](https://github.com/codeparty/racer)
    * Future plans: [diff-match-patch](http://code.google.com/p/google-diff-match-patch/), [Operational transform](http://en.wikipedia.org/wiki/Operational_transformation)
* [Now.js](http://nowjs.org/)
* [Substack DNode](https://github.com/substack/dnode)
* [Data.js](http://substance.io/michael/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](https://github.com/michael/substance)
* [Backbone on the server with node.js](http://andyet.net/blog/2011/feb/15/re-using-backbonejs-models-on-the-server-with-node/)... with DNode or NowJS (?!)

---
# Resources

---
# Get your code on

* [Todo App example](http://documentcloud.github.com/backbone/#examples-todos)
* [James Newbery's jasmine examples](https://github.com/froots/backbone-jasmine-examples/tree/master/public/javascripts)

---
# Further reading: Books on JavaScript

* [JavaScript: The Good Parts](http://shop.oreilly.com/product/9780596517748.do) by Douglas Crockford
* [JavaScript Web Applications](http://shop.oreilly.com/product/0636920018421.do) by Alex MacCaw (Spine.js author)
* [Test-Driven JavaScript Development](http://tddjs.com/) by Christian Johansen
* [JavaScript Patterns](http://shop.oreilly.com/product/9780596806767.do) by Stoyan Stefanov
* [JavaScript: The Definitive Guide](http://shop.oreilly.com/product/9780596805531.do) by David Flanagan

---
# Further reading: Online resources

* [Backbone on Rails eBook](http://workshops.thoughtbot.com/backbone-js-on-rails?utm_source=jm-talk)
* [Official Backbone docs](http://documentcloud.github.com/backbone/)
* [Annotated source code](http://documentcloud.github.com/backbone/docs/backbone.html)
* [Underscore docs](http://documentcloud.github.com/underscore/) and [source](http://documentcloud.github.com/underscore/docs/underscore.html)
* [Backbone Google Group](https://groups.google.com/group/backbonejs)
* [Peepcode episodes on Backbone](http://peepcode.com/products/backbone-js)

---
# Recap

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

---
# Thanks!

* Me:
    * [jason.p.morrison@gmail.com](mailto:jason.p.morrison@gmail.com)
    * [http://twitter.com/jayunit](http://twitter.com/jayunit)
    * [http://jayunit.net](http://jayunit.net)
* Slides:
    * [View slides online](http://jayunit.net/backbone-js-on-rails-talk)
    * [View slides source on GitHub](http://github.com/jasonm/backbone-js-on-rails-talk)
* Code:
    * [View chat app source on GitHub](http://github.com/jasonm/chat_app)