Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Client Side MVC with Backbone and Rails


Published on

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

  • Sex in your area is here: ❶❶❶ ❶❶❶
    Are you sure you want to  Yes  No
    Your message goes here
  • Follow the link, new dating source: ❶❶❶ ❶❶❶
    Are you sure you want to  Yes  No
    Your message goes here

Client Side MVC with Backbone and Rails

  1. 1. Client Side MVC with Backbone & Rails Tom Zeng @tomzeng
  2. 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. 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. 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. 5. Client Side MV* Alternatives
  6. 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 applicatons 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 applications 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. 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. 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. 9. Backbone MV* BasicsBackbone MVCModel ModelView Template (eco) View (erb)View + Router Controller
  10. 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. 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. 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. 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. 14. Sample App Walkthrough• Client Side • Update spec/javascripts/support/jasmine.yml to include both js and cs specs • Add spec.css and 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. 15. Resources• Sample app• Backbone.js• CoffeeScript• Backbone on Rails• Jasmine• Twitter Bootstrap• Sinon.JS• Backbone.Marionett
  16. 16. Thank You MerciGracias Dankeありがとう 谢谢