molily Navigation

Chaplin.js, an Application Architecture based on Backbone.js

For almost one year, 9elements assisted in developing a large JavaScript web application: Moviepilot.com is a place to discover upcoming movies, track them from rumor to release and share opinions with other movie buffs. The site let’s you connect easily with Facebook, Google or Twitter to subscribe to news channels or take part in polls and discussions.

While the backend uses a more classic technical stack with Ruby on Rails, MySQL and Neo4j, the frontend is a sizeable JavaScript application written in CoffeeScript, HAML and SASS. The actual user interface is build completely in JavaScript while the raw data is fetched from the server over a JSON API.

We chose the popular Backbone.js library as a basis. By design, Backbone is rather a minimal library than a complete application framework. However, huge JavaScript applications are built using Backbone – the examples include top-class apps from Groupon, LinkedIn and Diaspora. Backbone is a good start for smaller applicatons, but as the project grows you will need a sophisticated architecture on top of Backbone.

In the last couple of months, Backbone-based application frameworks were released, most notably Thorax by WalMart and Marionette by Derick Bailey. While developing moviepilot.com, we came to similar conclusions – unfortunately the mentioned frameworks were releasing long after we began working on moviepilot.com.

Introducing Chaplin, an application architecture on top of Backbone.js

To promote the discussion on Backbone-driven applications, we have released the JavaScript core of moviepilot.com into the public. The project is called Chaplin. It’s completely free and open-source. Of course the name pays homage to Charlie Chaplin, the great silent film maker. You can take a peek into code on Github and read an in-depth essay on the application structure.

In the meantime, Chaplin grew from an example application architecture to a separate library which is ready for use. You might build upon it and adapt it to the needs of your specific application. The key features of Chaplin include:

  • CoffeeScript classes wrapped in RequireJS (AMD) modules
  • Cross-module communication using the Mediator and Publish/Subscribe patterns
  • Introducing controllers to separate routing and business logic
  • Application-wide view and state management
  • Consistent memory management and proper object disposal

Chaplin ships with a demo application that allows you to log in via Facebook and browse your Facebook Likes. Of course this isn’t as complex as the stuff on moviepilot.com, but it shows how to build application modules upon the Chaplin structure.

Join the discussion

Chaplin aims to documents our experience on developing large JavaScript applications. It’s also a playground and testbed for new ideas. Since we’re constantly improving the architecture, your feedback is highly appreciated. Feel free to get in contact. You might also fork the code or create a new issue on Github.

I’d like to thank the team of Moviepilot.com as well as the people of 9elements for making Chaplin possible.