Introduction tofor Rails developers      Alex Korban
What is it?•   Small JavaScript library to organise your UI and    data on the client•   Follows the MVC pattern•   Doesnt...
Why use it?•   Libraries like jQuery dont help with code    structure•   Doesnt assume anything about your UI•   Flexible ...
Whats in it?•   Controller•   View•   Model•   Collection•   Hash change and history handling
Controller     class AppController extends Backbone.Controller       routes:                 handler method            "us...
View  class UsersView extends Backbone.View    tagName: "div"     the views DOM element parameters    id: "users"    event...
Templates•   Since Underscore.js is included, you can use    _.template which provides variable interpolation    and arbit...
Managing templates•   One option is to use Jammit (documentcloud.github.com/jammit)•   JavaScript templates are stored alo...
Models and collectionsclass User extends Backbone.Model is_invited: ->   @get("invitation_token") != null          get() a...
Persistence•   Backbone.sync() is called every time Backbone reads or saves a model    to the server•   The default is RES...
Persistence & Rails•   With JSON persistence, your Rails update method might be:      def update        user = User.find p...
Initialising data•   One option is to include the data when rendering the Rails view:    / index.haml    :javascript      ...
Alternatives•   Sproutcore (sproutcore.com)•   Cappuccino (cappuccino.org)•   KnockoutJS (knockoutjs.com)•   JavaScriptMVC...
Questions?Documentation: documentcloud.github.com/backbone      These slides: devblog.aoteastudios.com
Upcoming SlideShare
Loading in …5
×

Introduction to Backbone.js for Rails developers

5,382 views

Published on

Published in: Technology
  • Be the first to comment

Introduction to Backbone.js for Rails developers

  1. 1. Introduction tofor Rails developers Alex Korban
  2. 2. What is it?• Small JavaScript library to organise your UI and data on the client• Follows the MVC pattern• Doesnt provide widgets or HTML structure
  3. 3. Why use it?• Libraries like jQuery dont help with code structure• Doesnt assume anything about your UI• Flexible with regards to data persistence• You can use an HTML templating engine of your choice• Only hard dependency is Underscore.js• Only 3.9kB minified
  4. 4. Whats in it?• Controller• View• Model• Collection• Hash change and history handling
  5. 5. Controller class AppController extends Backbone.Controller routes: handler method "users": "users"URL hash "users/:cid/edit": "edit"fragment parameter part users: -> @view = new UserListView edit: (cid) -> @view = new EditUserView { model: Users.getByCid(cid) } $ -> window.app = new AppController() Backbone.history.start()
  6. 6. View class UsersView extends Backbone.View tagName: "div" the views DOM element parameters id: "users" events: DOM event handler "click .add_user": "click_add_user"eventtype selector constructor(@users): -> @template = _.template("HTML string with params to interpolate") @users.bind "add", @add_user Bind collection event to view method @users.bind "refresh", @render render: -> $(@el).html @template(@users) click_add_user: -> @users.add() Triggers a call to add_user add_user: (user) => view = new UserView {model: user} @el.append view.render()
  7. 7. Templates• Since Underscore.js is included, you can use _.template which provides variable interpolation and arbitrary JavaScript execution• You can use a different templating engine such as Mustache.js, Haml-js or Eco• You could even insert elements into the DOM instead of using templates
  8. 8. Managing templates• One option is to use Jammit (documentcloud.github.com/jammit)• JavaScript templates are stored alongside Rails views: // app/views/users/user.jst <div class = "user"> <h2>Name: <%= name %></h2> <em>Hometown: <%= birthplace %></em> </div>• Jammit allows different templating engines• Jammit concatenates, compresses and precompiles templates• Then you can access a template on the client side like this: JST[“users/user”]({name: “Joe”, birthplace: “Picton”})
  9. 9. Models and collectionsclass User extends Backbone.Model is_invited: -> @get("invitation_token") != null get() and set() provide access to the attribute hashclass UserCollection extends Backbone.Collection model: User url: "/users"users = new UserCollection()users.fetch() # loads models from the serverusers.add [{name: "John"}, {name: "Mary"}] Adds 2 User instances to the collection because model isis_invited = users.at(0).is_invited() defined in UserCollection
  10. 10. Persistence• Backbone.sync() is called every time Backbone reads or saves a model to the server• The default is RESTful JSON requests using $.ajax(): create → POST /collection read → GET /collection[/id] update → PUT /collection/id delete → DELETE /collection/id• Responding to a “read” request: send down an array of model attribute objects• Responding to a “create” or “update”: send the attributes of the model changed by the server• You can override sync() to use XML or LocalStorage
  11. 11. Persistence & Rails• With JSON persistence, your Rails update method might be: def update user = User.find params[:id] user.update_attributes params render json: user end• Set Backbone.emulateHTTP = true to replace PUT and DELETE requests with a POST + _method parameter• Set config.active_record.include_root_in_json = false or override parse() in Backbone models (see gist.github.com/957474 for an example)
  12. 12. Initialising data• One option is to include the data when rendering the Rails view: / index.haml :javascript Supplied by a Rails controller this.users.refresh(#{@users.to_json(only: User::JSON_FIELDS)}); this.checklists.refresh(#{@checklists.to_json}); This just sets collection data from the argument #content• The other option is to get the data on page load: :javascript $(function() { this.users.fetch(); This performs an AJAX request this.checklists.fetch(); });• Your UI will need to handle the delay in loading the data• You probably want to preload just enough data to display the initial page, and load the rest using .fetch() as needed
  13. 13. Alternatives• Sproutcore (sproutcore.com)• Cappuccino (cappuccino.org)• KnockoutJS (knockoutjs.com)• JavaScriptMVC (javascriptmvc.com)• Sammy.js (sammyjs.org)
  14. 14. Questions?Documentation: documentcloud.github.com/backbone These slides: devblog.aoteastudios.com

×