Single page application with Backbone.js on Rails

If you want to start a single page application (SPA) with a heavy front-end interface and you don’t have time to build your own Javascript MVC – you should definitely choose Backbone.js.

We are currently building a SPA that talks to an API written on Ruby on Rails. Choosing the right MVC Javascript framework from start was a crucial thing. From all frameworks released in the wild the most suitable ones for me seem to be Sammy.js and Backbone.js.

Judging by the features of the framework I could have chosen Sammy.js. It has a nice API and useful functions that Backbone.js is lacking. The multiple template type support for Sammy is also a plus.

On the other hand, Backbone.js seemed to be pretty wild and small compared to Sammy. The default templating system is Underscore.js that seemed to be pretty simple, based on micro templates.

After some testing I went with Backbone.js. The fact that it’s light and integrates beautifully with Ruby on Rails accentuated the choice. The missing features can be easily added by some extra programming. The micro templates are faster compared to HAML or Mustache. The only ugly thing is the pour readability of the templates but the new Rails has a cure for this, providing the integration of Jammit templates that are automatically compiled to micro templates on the first app run with the help of the jammit gem. Same thing with the CoffeScript files that are automatically compiled to javascript and glued on the first run.

A very important thing is to keep an intuitive app structure on front-end (which I didn’t do in the beginning). Keep all the models, collections, routers and views in separate files and folders. The most suitable structure for our team was this one:

/assets
    /javascripts
        /app
            /models
                user.coffee
                profile.coffee
                comment.coffee
            /collections
                users.coffee
                comments.coffee
            /routers
                main.coffee
            /views
                /users
                    add.coffee
                    list.coffee
                    search.coffee
                /profiles
                    edit.coffee
                    list.coffee
                /comments
                    add.coffee
                    list.coffee
            app.coffee
            index.js

The app.coffee has the main router initialization and also the templates manager configuration and loading. index.js has a list of all the files that have to be loaded and converted to raw javascript.

As for the templates loading and caching I used my custom jQuery plugin that I forked from markdagleish on GitHub and adjusted so it integrates smoothly with Undercore.js.

Backbone.js didn’t disappoint me so far. Seems to be simple, easy, light and fun. Tried it with Rails and NodeJS. Integrates very well with jQuery and Zepto.js. Use it with no fear :)

2 Responses to Single page application with Backbone.js on Rails

  1. Dana Benson says:

    I’m really stoked on SPAs too but one thing to keep in mind is that they suck when it comes to SEO.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Switch to our mobile site