Writing a Responsive Application with Backbone.js

July 11, 2012

As we have written on our blog before we are implementing a Responsive Design for Squirro. Today we’ll talk about how we are doing that using Backbone.js.

The original concept for this came from Pierre Spring of Nelmio. We have since extended it, so the blame for the weirder parts belong to us, not Nelmio.

Challenge of Responsive Design

Responsive Web Design aims to build one web site for all device types and sizes. This is usually accomplished using media queries that check for the screen size. At Squirro we believe that this is great but not enough. It’s necessary to also adjust the behavior or feature set per platform.

Squirro settings screen on mobileJust a simple example from Squirro for that. The settings are split in various sections. On the desktop we show a navigation with the sections on the left and then the actual settings on the right. On mobile we need to provide that navigation first as a full page view. Then on clicking we show the actual settings, again using the full page.

It’s probably possible to do that with pure CSS but separating the implementations makes the implementation cleaner.

Implementation

What follows is a code-level description for how we implemented this.

Getting Started

As a first step we decide on page load which edition we want to use. Yes, that prevents us from going textbook responsive as we don’t re-render on window resize. But in our opinion the problem we want to solve is really not browser window resizing but device adaption.

This is a simplified snippet from our index.html file:

As you can see we use three different RequireJS entry files for the different editions: app-desktop.js, app-tablet.js and app-mobile.js.

RequireJS Setup

The main job of those entry files is configuring the RequireJS paths. That’s the main approach we use to decide which views, controllers and templates get used for the respective devices.

As an example, this is an extract of how it looks inside app-desktop.js:

As you can see we load separate views, controllers and templates based on device type. We sometimes overwrite the path for a full folder (controllers) and sometimes on a per-file basis (views and templates).

Application Setup

After setting up the paths the job goes to app-common.js to initialize the application itself.

That file basically looks like this:

Because of the RequireJS path setup the page view will now be loaded in a device-specific way.

To make sure we can re-use code, we usually inherit from a base class. For the sharing example there can be a BaseShareView which the individual device-specific views inherit from. That base class at views/base/Share.jslooks something like the following:

The actual desktop view then simply inherits from this base view and extends it where needed:

Building

The final ingredient to get this to work was proper setup of the r.js building tool. To get that to work we parse the individual entry files (such as app-desktop.js) and replicate the path setup in the build configuration file.

Conclusion

So far this has enabled us to replicate the web site relatively easily to the various device types. We’re constantly tuning the setup to make it more maintainable and reduce duplications as much as we can.

Squirro settings screen on the desktop

Feedback

Unfortunately there’s no comment section here but you can contact me on Twitter (@pneff) if you have feedback or questions.