Chaplin – an Application Architecture based on Backbone.js

Today we’re releasing the application architecture of moviepilot.com into the public: Meet Chaplin! In April 2011, Moviepilot, a successful Berlin-based startup, asked us to help building their new product moviepilot.com.

After having established an international fan-base of over four million movie addicts on their facebook page, they wanted to use this momentum to create a social place for discovering upcoming movies and tracking them from rumor to release.

Behind the scenes of Moviepilot

Together with the Moviepilot team we decided to build a large-scale single-page application. The backend was built with a classic and bulletproof technical stack using Ruby on Rails, MySQL and Neo4j databases. The frontend is a sizeable JavaScript application written in CoffeeScript, HAML and SASS.

We chose the popular Backbone library as a basis for our JavaScript code. Since we were always convinced of the idea behind single-page apps, we started working with Backbone pretty early. When we built salon.io, one of our products designed as single page app, we gathered valuable experience (kudos @thedeftone).

By design, Backbone is more of a minimalistic library than a full-featured framework. However, huge JavaScript applications are being built using Backbone and well-known companies like Foursquare, LinkedIn and 37Signals rely upon Backbone. While Backbone is fine for what it’s made for, large projects require a sophisticated architecture on top of it that implements well-proven design patterns.

Recently, several frameworks based on Backbone were released, most notably Thorax and Marionette. Independently from each other, we came to similar conclusions during the development of moviepilot.com.

Meet Chaplin, an Application Architecture based on Backbone

Today we’re releasing the application architecture of moviepilot.com: Meet Chaplin! It’s free and open-source, MIT-licensed.

Chaplin is not a ready-to-use library, but an example how a real-world Backbone application might look like. Consider it as a scaffold which you might build upon and adapt to the specific needs of your application. The key features of Chaplin include:

• Pure CoffeeScript classes wrapped in RequireJS (AMD) modules
• Cross-module communication using the Mediator and Publish/Subscribe patterns
• Separated routing and business logic by introducing controllers
• Application-wide view management
• Strict memory management and object disposal

You will find an in-depth explanation of the application structure on the Chaplin Github page.

Chaplin comes with a simple demo application which allows you to log in via Facebook on the client-side and browse your Facebook Likes. While this isn’t by far as complex as moviepilot.com, it demonstrates how application modules interact and how a client-side login might be implemented.

Fork Chaplin on Github

By releasing Chaplin into the public, we’d love to share our experience on building large-scale JavaScript applications and contribute to the discussion on Backbone development. Chaplin is also our testbed to evolve our application structure, and it’s already ahead of the moviepilot.com codebase.

Since we’re constantly improving the architecture, your feedback is highly appreciated. Feel free to contact us, fork the code or create a new issue on Github.

We’re also considering initiating a Backbone user group meet-up in Berlin in the next months. Let us know if you’re interested to join!