Client Side MVC with Backbone and Rails
Upcoming SlideShare
Loading in...5
×
 

Client Side MVC with Backbone and Rails

on

  • 2,693 views

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

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

Statistics

Views

Total Views
2,693
Views on SlideShare
2,692
Embed Views
1

Actions

Likes
4
Downloads
30
Comments
0

1 Embed 1

http://feeds.feedburner.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Client Side MVC with Backbone and Rails Client Side MVC with Backbone and Rails Presentation Transcript

  • 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 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
  • 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* BasicsBackbone MVCModel ModelView Template (eco) View (erb)View + Router 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 MerciGracias Dankeありがとう 谢谢