Chaplin is an architecture for JavaScript applications using the Backbone.js library. Chaplin addresses Backbone’s limitations by providing a lightweight and flexible structure that features well-proven design patterns and best practices.

Chaplin empowers you to quickly develop scalable single-page web applications; allowing you to focus on designing and developing the underlying functionality in your web application.

Download chaplin.js

or install with package managers:

  • bower install --save chaplin
  • component install chaplinjs/downloads

Boilerplates

Brunch with Chaplin

Uses Brunch as builder which allows ultra-simple workflow. It incorporates H5BP and CoffeeScript / stylus / handlebars. For those preferring plain JS, there is also a Plain JavaScript variant

Chaplin boilerplate

Simple “Hello world” example project using Chaplin and Require.js

Chaplin boilerplate js

Plain JS variant of the previous boilerplate

Rails boilerplate

With Backbone, Chaplin and Require.js

Why Chaplin

More than Backbone

Backbone is very good at what it does (simple MVC library), but a library alone is not enough for building single-page apps. For example, there is no good memory management solution in Backbone.

Chaplin addresses these limitations by providing a lightweight but flexible structure which leverages well-proven design patterns and best practises.

Super scalable

Chaplin allows you to focus on designing and developing the underlying functionality in your web application. You can quickly make a prototype and then use it as a starting point and make really big web app in little time.

Less to learn

Using Exoskeleton as a Backbone drop-in replacement and your stack size will be just 20K, while stuff like Ember is over 60K

Even if you add Underscore and jQuery to this stack, overall size will still be just 52K.

Clean architecture

Chaplin allows you to achieve these goals:

  • No global variables: forgot about horrible global shared mutable namespaces a-la App.Views.Signup.ContinueStep. Using any module system (Common.js, AMD or ES6) is required for Chaplin.
  • Loose coupling: by default, you can’t access chaplin internals inside your app. Events and messages are used in communication of components.

Well-structured

Making REST web apps is extemely easy with Chaplin.

Here’s example app. When you click on app link, it tries to load GitHub user data and display it. It was separated to 11 files so that you can see each chunk separately. Each file is a module and loaded from other file (with Brunch).

(non-iframe link), (GitHub repo)

Features

Dependencies

Chaplin supports AMD and Common.js modules. There is no “global variables” build, so Chaplin explicitly prohibits any using without module systems.

Latest release is 1.0.0 (changelog, upgrading guide, diff from 0.12)

If you're using Chaplin with Backbone, you will need lodash / Underscore and jQuery / Zepto.

There is another option: you can use Exoskeleton. Exoskeleton is a faster and leaner Backbone for your HTML5 apps. It allows you to totally drop these dependencies. Just include Exoskeleton with Chaplin and you're done.

If you’ll be using Chaplin with AMD, you will also need an AMD module loader like RequireJS, Almond or curl to load Chaplin and lazy-module application modules.

Brought to you by

Mathias Schäfer Mathias Schäfer and others