-
Chaplin
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.
or install with package managers:
bower install --save chaplincomponent install chaplinjs/downloads
Boilerplates
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
Simple “Hello world” example project using Chaplin and Require.js
Plain JS variant of the previous boilerplate
With Backbone, Chaplin and Require.js
Why Chaplin
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.
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.
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.
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)- initialize
- routes
- controllers/users-controller
- models/user
- views/base/view
- views/site-view
- views/templates/site
- views/random-users-view
- views/templates/random-users
- views/user-view
- views/templates/user
Features
- Better support for CoffeeScript class hierarchies as well as object composition
- Better support for inheritance: automatic merging of declaratively bound events (and some other props) from the whole prototype chain.
- Strict memory management and object disposal
- Optional Underscore and jQuery using Exoskeleton
- Module encapsulation and lazy-loading using AMD / common.js modules
- Cross-module communication using the Mediator and Publish/Subscribe patterns
- Controllers for managing individual UI views
- Rails-style routes which map URLs to controller actions
- URL reversals which allow to dynamically construct app URLs
- A route dispatcher and a top-level view manager
- Extended model, view and collection classes to avoid repetition and enforce conventions
- A collection view for easy and intelligent list rendering
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.1 (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.
