Client Side MVC with Backbone & Rails

Tom Zeng

@tomzeng

tom@intridea.com

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

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)

• ...

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

Client Side MV* Alternatives

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

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

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

Backbone MV* Basics

Backbone

Model

View Template (eco)

View + Router

MVC

Model

View (erb)

Controller

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

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

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

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

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"

Resources

• Sample app https://github.com/tomz/todo-backbone

• Backone.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/

Thank You

Gracias

ありがとう

Merci

Danke

谢谢