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.
Just 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.
Feedback
Unfortunately there’s no comment section here but you can contact me on Twitter (@pneff) if you have feedback or questions.
