10 Web Apps Made with Backbone.js [Case Study]

Have you ever been entangled in spaghetti code? Would you rather feed your app something healthier? If so, take a peek at what can be accomplished with Backbone.js. Backbone is a JavaScript library that is loosely based on the Model-View-Controller design pattern but as it lacks the Controller element, it’s better to call it an MV* framework.

It helps you build fast, sleek and data-rich single-page web apps, keeps your data logic separate from your user interface, saves you from tying your data to the DOM, and scales as your app grows. As Backbone syncs with any RESTful API by default, you can easily connect your client-side app to your existing server-side API through a RESTful JSON interface.

In this post we will be studying 10 web apps that utilize the features of the Backbone library to help you grasp the potential Backbone.js has for your future web app projects.

1. Trello

Trello is an online collaboration and project management app that helps you organize your projects into Boards, Checklists, Cards, Card Lists, and provides you with tools like Conversations for team member communication.

Trello was built from the ground up with Backbone.js. Backbone works together with the HTML5 History API and the Mustache logic-less templating language on the frontend. All elements of the Trello Tech Stack were designed in a way that resulted in a maintainable client that easily handles updates, and dynamically re-syncs with the server whenever a DOM event is triggered.

Trello utilizes Backbone Model and Views for its objects such as Cards or Members, and Backbone Collections for related Models – for example Cards in a list. The developers also built their own client-side Model cache for faster updates and more efficient code reuse.

2. Foursquare

Most likely you have already heard about Foursquare, the popular location-based social networking app that enables you to share venues with your friends across the world.

Foursquare’s core JavaScript API is built around Backbone Models, where the Model classes of the Foursquare API (such as Users, Venues, and Check-ins) are the subclasses of the Backbone Model classes and inherit their methods and properties.

The implementation of the code can be sketched up like this: fourSq.api.models.Venue = fourSq.api.models.Model.extend( ... ); Yes, that’s right, Backbone enables devs to write nice object-oriented JavaScript.

Backbone Views also have their role in the Foursquare app, as they enhance the user experience with features like homepage maps and lists. Other than Backbone, Foursquare’s JavaScript API also makes use of jQuery, Underscore.js (which is Backbone’s only hard dependency), and the Closure Compiler.

3. Basecamp Calendar

Basecamp, the popular project management app uses Backbone.js for its Calendar feature.

The main design goal of Basecamp Calendar was to create an interactive interface that makes intuitive group scheduling possible, and updates itself in milliseconds. In Basecamp Calendar Backbone renders Views into ECO (Embedded CoffeeScript) templates whenever Models (client-side data) are updated.

It’s interesting to note that the developer team didn’t make the entire Basecamp a single-page app which is the primary use case of Backbone.js, but only utilized the library in the Calendar feature where they could really make use of its advantages. Just goes to show that you don’t necessarily need to build a full single-page app with Backbone; it’s better to carefully think over where it can be applied.

Read more on Backbone antipatterns to decide if you need Backbone for your whole app or not.

4. Flowdock

Flowdock is a real-time team communication app that provides you with features like group chat, team inboxes, and real-time workflows

Flowdock was built from the ground up on top of Backbone.js. The main challenge of the development team was to enable real-time messages and workflows. By default Backbone.js connects to the server side over a RESTful interface, which doesn’t make real-time data flow possible. Therefore the devs decided to save messages via the Socket.io real-time engine instead of the REST API.

To achieve this they wrote a custom method called Backbone.sync. As Socket.io is also a JavaScript library it makes the communication between the JavaScript-driven frontend and backend (Node.js) seamless. Flowdock is primarily a Rails app on the server side, but they have a separate Node.js backend that handles the Socket.io connections.

Flowdock enhances real time user experience even more with Bacon.js, a handy JavaScript library that enables functional reactive programming. The EventStreams feature of Bacon.js helps Flowdock keep its Backbone Model and Collections up to date.

5. Cocktail Search

Cocktail Search is an open source app that gives you the chance to take a look at the code of a very simple implementation of Backbone.js. The backend is powered by Python, but what’s interesting to us is the app’s script.js file.

If you examine the code you can see a very basic structure of the Model-View-* framework: it contains one Model defined in the Cocktail class that doesn’t change the default settings of the Backbone.Model parent class, one Backbone Collection for search results, and 3 Backbone Views, each adds new methods to the Backbone.View parent class.

If you take a look at the index.html file, you can discover how the developer added Backbone.js and its dependencies, Underscore.js and jQuery in the head section. Underscore.js is the only hard dependency of Backbone while jQuery is needed if you want to manipulate the DOM with the help of Backbone Views (which is the case of the Cocktail Search app).

6. Bitbucket

Bitbucket is a source code hosting and code management app similar to Github. Atlassian, the company behind it uses Backbone in the JIRA commercial issue tracking software, their other main product too.

During the thorough utilization of Backbone.js in their apps, the development team found a couple of things that they missed from Backbone. They encountered many silent failures caused by the loose definition conventions of Backbone.js. This basically means that Models, Collections and Views don’t necessarily define the custom events they expose. And if that weren’t enough, Models don’t even always define the attributes they expose.

This permissive nature is a feature loved by many developers but not by the Atlassian team so they developed their own Backbone extension called Backbone.Brace that adds mixins and self-documented attributes and events to the library.

If you are annoyed by the same thing, you can add Backbone.Brace to your own app, as it’s an open-source project hosted on Bitbucket itself. BitBucket uses the Mustache templating language just like Trello for rendering Backbone Views on the frontend.

7. SoundCloud

SoundCloud is a popular audio distribution platform where you can record, upload and share your own audio, or listen to music for free.

Developers of SoundCloud used Backbone.js first as the frontend framework of their mobile app, but they liked it so much that they also employed it on the client side of their desktop website. In their Backstage Blog they explain their choice of framework with Backbone’s ability to provide a solid structural basis while still remain flexible.

Scaling is a main concern for an audio streaming app, and SoundCloud acknowledges that it “has more to do with organization than implementation” which makes the well-organized but lightweight Backbone an ideal choice for them.

SoundCloud utilizes the Handlebars semantic templating system for rendering Backbone Views on the frontend.

8. AirBnB

AirBnB is an insanely successful community marketplace where you can find and book different types of accommodations in almost 200 countries worldwide

AirBnB firstly used Backbone.js in its mobile app just like SoundCloud, but later utilized it more and more in its web app features such as Wishlists, Match, Search, Communities and Payments. AirBnB loved Backbone so much that they didn’t only settled for using it on the frontend but also wanted to make it possible to run the library on the backend.

They later made their server-side Backbone library, Rendr, open source and available on their Github page. Rendr is written in Node.js and it follows the philosophy of “imposing minimal structure, allowing the developer to use the library in the most appropriate way for their application” just like Backbone itself

If you are interested more in AirBnB’s tech stack, read their blog post about their journey from a Rails backend to the Holy Grail of the simultaneous utilization of Backbone both on the client- and server-side.

9. Hulu

Hulu is a video streaming app that enables you to watch TV shows and movies for free, if you are located in the US.

Hulu made use of Backbone.js to build a seamless and fast user experience for movie lovers. The interface allows you to move quickly through the app with gentle transitions as you navigate. Backbone saves bandwidth for users as scripts and embedded videos don’t get reloaded all the time.

Hulu runs a Rails engine on the backend, and if you like amusing but informative talks, you can read about how the developer team got entangled with jQuery before finally deciding to change to the more organized Backbone framework.

Backbone.js allowed Hulu to incrementally convert their rendering from server-side to client-side instead of doing a risky rewrite of their existing Rails backend.

10. Countly

Countly is a real-time mobile analytics app that enables you to track the performance of your iPhone, Android or Windows Phone app right from the browser window.

Take a look at the remarkable list of open source software that was used to develop the platform, including the superstars of recent years: Nginx, MongoDB, Node.js for the server side and of course Backbone.js for the frontend.

Countly utilizes the Handlebars semantic templating library to render Backbone Views that display data prepared and loaded with Backbone Models. Countly is a developer-friendly app: it’s not only easily extensible but its documentation also provides devs with tutorials like this on how to build custom plugins on top of the core Backbone client.

Editor’s note: This is written by Anna Monus for Hongkiat.com. Anna is a web developer and code writer with an interest for science, artificial intelligence, and disruptive technologies.

10 Web Apps Made with Backbone.js [Case Study]