Presentation at DC Ruby User Group 2013-01-10 meetup

1. Client Side MVC with Backbone & Rails
Tom Zeng
@tomzeng
tom@intridea.com

2. Client Side MV* with Backbone & Rails
• Benefits of Client Side MVC
• Backbone.js Introduction
• Client Side MV* Alternatives
• Backbone + Rails + CoffeeScript - a great combination
• Sample App Walkthrough
• Resources
• Q&A

3. Benefits of Client Side MVC
• Interactive Responsive Single Page Apps
• Better User Experience
• Provide Structure to Client Side App Development
• More Manageable Apps (vs plain jQuery, etc)
• Large Scale Apps
• Making Use of Standard and Popular Technologies (HTML5 /
CSS3 / JavaScript)
• ...

4. Client Side MV* Alternatives
• Backbone.js - Simple, Easy, Popular, Flexible, Extensible
• Ember.js - Data & View Bindings, Computed Fields, Rails like
• Angular.js - Minimal Boilerplates, View Binding and DOM
Abstraction, Extensible Markups
• Spine.js - Simple, MVC, CoffeeScript, Rails like
• Sencha - Full Featured, Many UI Components, Class System

5. Client Side MV* Alternatives

6. Higher Level Frameworks
• Backbone.Marionette
– Scale applications out with modular, event driven architecture
– Sensible defaults, such as using Underscore templates for view rendering
– Easy to modify to make it work with your applicaton's specific needs
– Reduce boilerplate for views, with specialized view types
– Build on a modular architecture with an Application and modules that attach to it
– Compose your application's visuals at runtime, with Region and Layout
– Nested views and layouts within visual regions
– Built-in memory management and zombie killing in views, regions and layouts
– Built-in event clean up with the EventBinder
– Event-driven architecture with the EventAggregator
– Flexible, "as-needed" architecture allowing you to pick and choose what you need

7. Higher Level Frameworks
• Chaplin.js
– CoffeeScript class hierarchies as well as object composition
– Module encapsulation and lazy-loading using AMD modules
– Cross-module communication using the Mediator and Publish/Subscribe patterns
– Controllers for managing individual UI views
– Rails-style routes which map URLs to controller actions
– A route dispatcher and a top-level view manager
– Extended model, view and collection classes to avoid repetition and enforce conventions
– Strict memory management and object disposal
– A collection view for easy and intelligent list rendering
• Thorax (by Walmart Labs)
– An opinionated, battle tested Backbone + Handlebars framework to build large scale web
applications. It provides a filesystem structure, on demand module loading, model and
collection view binding, inheritable view and DOM events, data loading helpers, form
serialization / population and validation

8. Backbone MV* Basics
• Model - business domain models, key/value properties,
events, persistence, validation
• Collection - list of models, provides convenience methods for
sort, find, filter, iterator, add/create/remove/fetch/sync, event
handling, shuffle, etc (most func from underscore)
• View - Rendering markup, handle app & DOM events
• Router - map routes(url patterns) to handlers
• Template - UI pages that get compiled and rendered to
browser

9. Backbone MV* Basics
Backbone MVC
Model Model
View Template (eco) View (erb)
View + Router Controller

10. Backbone + Rails + CoffeeScript
• CoffeeScript/Backbone + Rails is a pleasure to work with
• Server side experience can be easily carried over to the Client
side
• CoffeeScript - similar to Ruby
• With the backbone-on-rails gem, similar convention is set up
on the client side
• Jasmine - similar to RSpec

11. Sample App Walkthrough
• Todo List app
– Simple app to track todo’s
• Server side setup
– Rails as the API server
– RSpec
• Client side setup
– CoffeeScript (Rails 3 default)
– Backbone + Twitter Bootstrap + Sass (Compass)
– Jasmine, Sinon

12. Gems used in the app
• Backbone.JS
– gem “backbone-on-rails” # minimal scaffold, CoffeeScript, eco
– gem “rails-backbone” # full featured scaffold, JS, ejs
• Twitter Bootstrap
– gem “twitter-bootstrap-rails” # support Rails scaffold
– gem “less-rails” # twitter bootstrap uses Less
• Eco Template
– gem “eco” # embedded CoffeeScript, similar erb
• Jasmine (RSpec for JS, client side BDD)
– gem “jasminerice” & gem “jasmine” # embedded CoffeeScript, similar erb
–
• Sinon.js(server request/response mock/stub)
– gem “sinon-rails” # or just use jasmine-sinon.js

13. Sample App Walkthrough
• Server side
• rails new todo-backbone
• Add necessary gems to Gemfile
• rails g rspec:install
• rails g backbone:install
• rails g bootstrap:install
• rails g jasminerice:install
• rails g scaffold Task title:string completed:boolean
• rake db:migrate
• rake db:test:load
• rails g controller main index --skip-javascripts
• guard # can also run rake jasmine:headless and rake spec
• rails s
• http://localhost:3000/tasks (Rails scaffold)
• http://localhost:3000/main/index (Backbone)
• Add RSpec specs and develop Ruby code

14. Sample App Walkthrough
• Client Side
• Update spec/javascripts/support/jasmine.yml to include both js and cs specs
• Add spec.css and spec.js.coffee in spec/javascripts
• Add Jasmine specs and develop CoffeeScript/JavaScript code
• rails g backbone:scaffold task
• http://localhost:3000/jasmine
• in task view add to events
• 'click': 'complete'
• complete: ->
• @model.set("completed", not @model.get("completed"))
• in model task spec add
• it "should have title", ->
• task = new TodoBackbone.Models.Task
• task.set("title", "attend DCRUG")
• expect(task.get("title")).toEqual "attend DCRUG"

15. Resources
• Sample app https://github.com/tomz/todo-backbone
• Backbone.js http://backbonejs.org/
• CoffeeScript http://coffeescript.org/
• Backbone on Rails https://github.com/meleyal/backbone-on-rails
• Jasmine http://pivotal.github.com/jasmine/
• Twitter Bootstrap http://twitter.github.com/bootstrap/
• Sinon.JS http://sinonjs.org/
• Backbone.Marionett http://marionettejs.com/

16. Thank You Merci
Gracias Danke
ありがとう 谢谢