Backbone.js and Rails

A quick intro to using backbone.js with Ruby on Rails.

Transcript

1. Backbone.js & Rails A intro for Rails Developers Matt Smith @symana matt@thinkific.com Wednesday, 27 March, 13
2. Agenda • What is Backbone.js? • Why backbone? • Integrating with Rails Wednesday, 27 March, 13
3. What is Backbone.js? • Models & Collections to represent your data • Views for declarative event handling & rendering • Templates (agnostic: eco, haml-js, ejs, etc.) • Connects to your RESTful JSON API Structure & Organization for JavaScript Wednesday, 27 March, 13
4. What it’s Not? • Not Opinionated == Flexible • Not MVC Wednesday, 27 March, 13
5. Why Backbone? • Lightweight (10kb w/ Underscore.js) • Flexible • Integrates with RESTful API • Test your Code • Mobile Friendly (mobile web or trigger.io/ phonegap) Wednesday, 27 March, 13
6. JavaScript & Rails Phase I Helpers (e.g. data- remote=true) Phase II jQuery Spaghetti Phase III “PageObjects” & Tests Phase IV Frameworks (backbone) Source: Sarah Mei @ PivotalLabs Wednesday, 27 March, 13
7. What does it give you? • Model Mirroring (Models & Collections) • Event Handling (Views) • Rendering (Templates) • History (Router) Wednesday, 27 March, 13
8. Integrating with Rails Wednesday, 27 March, 13
9. JavaScript Manifest // Backbone & Dependencies //= require jquery //= require json2 //= require underscore //= require backbone // My Backbone Application Code //= require backbone/models //= require backbone/collections //= require backbone/views //= require backbone/routers //= require app //= require_tree ../templates Wednesday, 27 March, 13
10. class ProductsController < ApplicationController def index render :json => Product.all end # Other RESTful actions... end Rails Controller Wednesday, 27 March, 13
11. Initialize App - javascript_tag $(function(){ app.initialize( = product.to_json ); }); Wednesday, 27 March, 13
12. app.js app = { models: {}, collections: {}, views: {}, initialize: function(productData){ app.product = new app.models.Product(productData); app.productView = new app.views.ProductView({ model: app.product }); } } Wednesday, 27 March, 13
13. models.js var app.models.Product = Backbone.Model.extend({ // Connects to Rails API urlRoot: '/products', // Default properties defaults: { name: "My Default Name" }, // Constructor initialize: function() { }, // Called everytime set is called validate: function(attrs) { // Validate product attributes } }); Wednesday, 27 March, 13
14. var app.views.ProductView = Backbone.View.extend({ // Represents the actual DOM element that corresponds to your View el: '#product', // Constructor initialize: function() { this.listenTo(this.model, 'change', this.render); this.render(); }, // Event Handlers events: { "click .add": "addToCart" }, render: function() { this.template = JST['products/index']; this.$el.html(this.template(model.toJson())); return this; }, addToCart: function() { // Add to the Cart this.model.addToCart(); } }); views.js Wednesday, 27 March, 13
15. index.ejs.jst <h1 class="name"> <%= name %> </h1> <p class="description"> <%= description %> </p> <a class="add">Add to Cart</a> Wednesday, 27 March, 13
16. Thoughts • Backbone is probably best fit for transitioning to add client-side interactivity to an existing rails app (e.g. Phase IV) Wednesday, 27 March, 13
17. Resources • PeepCode 3 Part Screencasts on Backbone • CodeSchool Backbone • Backbone on Rails (Thoughtbot Book) • RailsCasts (very basic) • Backbone Docs & Annotated Source Code Wednesday, 27 March, 13
18. Thanks & Questions Wednesday, 27 March, 13