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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Client Side MVC with Backbone and Rails

2,356
views

Published on

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

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


0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,356
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
34
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 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. 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* BasicsBackbone MVCModel ModelView 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 MerciGracias Dankeありがとう 谢谢

×