Client Side MVC with Backbone & Rails. Tom

Transcription

1 Client Side MVC with Backbone & Rails Tom

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 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

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* Basics Backbone MVC Model View Template (eco) View + Router Model View (erb) 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 (Rails scaffold) (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 in task view add to events 'click': 'complete' complete: 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 Backone.js CoffeeScript Backbone on Rails Jasmine Twitter Bootstrap Sinon.JS Backbone.Marionett

16 Thank You Gracias Merci Danke 谢谢

17