Client Side MVC with Backbone and Rails
description
Transcript of Client Side MVC with Backbone and Rails
Client Side MVC with Backbone & Rails
Tom Zeng
@tomzeng
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
• 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/
Thank You
Gracias
ありがとう
Merci
Danke
谢谢