Going from near-zero experience with front-end MVC frameworks to a functional Backbone app has been something of a rough ride. I thought I’d share some lessons I’ve learned along the way. Keep in mind that I’m still learning, so much of this will be wrong. Corrections are welcome.
Setup It is relatively easy to download and manually install Backbone by copying the relevant files to your
Using the gem hooks up Backbone to the asset pipeline, which should improve page load times in production. It also provides us with a nice generator. After adding
backbone-on-railsto the Gemfile, we can execute the following:
bundle install rails g backbone:install rails g backbone:scaffold MODEL
Passing in the name of the model, the generator will construct a directory structure and boilerplate files under
We put an MVC in your MVC The generated directories have a familiar structure, coming from Rails. Models is fairly self-explanatory. Views in Backbone are a little different and a fair bit more complex than in Rails. They tend to hold much more logic than a Rails view should. Further, they delegate presentation to a template. Backbone-on-Rails sets us up with a JST template for each view.
Collections and routers Backbone collections have no direct analogue in the Rails world. They are, basically, arrays of Backbone models. Since a major function of Backbone is syncing remote objects with the front end, collections are an important tool for keeping our objects organized.
The generator has also given us a router. Routers in Backbone are similar to Rails controllers. Unlike a Rails controller, there’s very little magic to make our lives easier. These two lines are critical to understanding how a router works:
view = new App.Views.ModelAction(collection: @someCollection, model: @someModel) $('.container').html(view.render().el)
The first line is instantiating a new view, and passing in a collection and model. Note that
modelare special keywords. They will be made available to the view directly, whereas passing in arbitrary key-value pairs can and will result in hair-pulling.
The second line is calling jQuery to update the DOM, replacing the contents of the
.containerelement with the return value from
view.render(). What that will be depends upon how we write the
renderfunction in the view. Typically, the render function will invoke the template, which will then be inserted into the DOM.
Phew! This just scratches the surface of Backbone.js. If you’d like to learn more, there are two excellent (and paywalled, unfortunately) RailsCasts: #323 and #325 that were incredibly helpful to me. Good luck!