index.html

---
layout: base
---

<div class="social-buttons">
  <iframe class="social-button-twitter" allowtransparency="true" frameborder="0" scrolling="no" src="https://platform.twitter.com/widgets/follow_button.html?screen_name=chaplinjs&show_count=true&size=l" style="width:184px; height:30px;"></iframe>
  <iframe class="social-button-github" src="http://ghbtns.com/github-btn.html?user=chaplinjs&repo=chaplin&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="165px" height="30px"></iframe>
</div>

<p>
Chaplin is an architecture for JavaScript applications using the <a href="http://backbonejs.org/">Backbone.js</a> library. Chaplin addresses Backbone’s limitations by providing a lightweight and flexible structure that features well-proven design patterns and best practices.
</p>

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

<div class="downloads clearfix">
  <div class="primary-downloads">
    <div class="download-block">
      <a class="dl-button primary" href="http://chaplinjs.org/downloads/chaplin.js">Download chaplin.js</a>
      <p>or install with package managers:</p>
      <ul>
        <li><code>bower install --save chaplin</code></li>
        <li><code>component install chaplinjs/downloads</code></li>
      </ul>
    </div>
    <div class="download-block">
      <a class="dl-button primary" href="http://chaplinjs.org/downloads/chaplin.min.js">Minified (12K gzip)</a>
    </div>
  </div>

  <h3>Boilerplates</h3>


  <div class="download-block first">
    <a class="dl-button secondary" href="https://github.com/paulmillr/brunch-with-chaplin">Brunch with Chaplin</a>
    <p>Uses <a href="http://brunch.io">Brunch</a> as builder which allows ultra-simple workflow. It incorporates <a href="http://html5boilerplate.com/">H5BP</a> and <a href="http://coffeescript.org">CoffeeScript</a> / <a href="http://learnboost.github.io/stylus/">stylus</a> / <a href="http://handlebarsjs.com/">handlebars</a>. For those preferring plain JS, there is also a <a href="https://github.com/paulmillr/brunch-with-chaplin-js">Plain JavaScript variant</a></p>
  </div>

  <div class="download-block">
    <a class="dl-button secondary" href="https://github.com/chaplinjs/chaplin-boilerplate/archive/master.zip">Chaplin boilerplate</a>
    <p>Simple “Hello world” example project using Chaplin and Require.js</p>
  </div>

  <div class="download-block">
    <a class="dl-button secondary" href="https://github.com/chaplinjs/chaplin-boilerplate-plain/archive/master.zip">Chaplin boilerplate js</a>
    <p>Plain JS variant of the previous boilerplate </p>
  </div>

  <div class="download-block">
    <a class="dl-button secondary" href="https://github.com/chaplinjs/chaplin-rails/archive/master.zip">Rails boilerplate</a>
    <p>With Backbone, Chaplin and Require.js</p>
  </div>
</div>

<div class="downloads why-answers clearfix">
  <h2>Why Chaplin</h2>
  <div class="download-block">
    <div class="dl-button dummy">More than Backbone</div>
    <p>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.</p>
    <p>Chaplin addresses these limitations by providing a lightweight but flexible structure which leverages well-proven design patterns and best practises.</p>
  </div>

  <div class="download-block">
    <div class="dl-button dummy">Super scalable</div>
    <p>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.</p>
  </div>

  <div class="download-block first">
    <div class="dl-button dummy">Less to learn</div>
    <p>Using <a href="http://exosjs.com/">Exoskeleton</a> as a Backbone drop-in replacement and your stack size will be just <strong>20K</strong>, while stuff like <a href="http://emberjs.com">Ember</a> is <strong>over 60K</strong></p>

    <p>
      Even if you add <strong>Underscore</strong> and <strong>jQuery</strong> to this stack, overall size will still be just <strong>52K</strong>.
    </p>
  </div>

  <div class="download-block">
    <div class="dl-button dummy">Clean architecture</div>
    <p>Chaplin allows you to achieve these goals:</p>
    <ul>
      <li><strong>No global variables:</strong> forgot about horrible global shared mutable namespaces a-la <small>App.Views.Signup.ContinueStep</small>. Using any module system (Common.js, AMD or ES6) is <em>required</em> for Chaplin.</li>
      <li><strong>Loose coupling:</strong> by default, you can’t access chaplin internals inside your app. Events and messages are used in communication of components.</li>
    </ul>
  </div>
</div>

<h2>Well-structured</h2>

<p>Making REST web apps is extemely easy with Chaplin.</p>

<p>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 <a href="http://brunch.io">(with Brunch)</a>. </p>

<a href="http://chaplinjs.org/basic-example/public/">(non-iframe link)</a>, <a href="https://github.com/chaplinjs/basic-example/">(GitHub repo)</a>
<iframe class="basic-example" src="http://chaplinjs.org/basic-example/public/index.html" seamless></iframe>

<ul class="tabs">
  <li>initialize</li>
  <li>routes</li>
  <li>controllers/users-controller</li>
  <li>models/user</li>
  <li>views/base/view</li>
  <li>views/site-view</li>
  <li>views/templates/site</li>
  <li>views/random-users-view</li>
  <li>views/templates/random-users</li>
  <li>views/user-view</li>
  <li>views/templates/user</li>
</ul>

<script src="https://gist.github.com/paulmillr/6699567.js"></script>

<h2>Features</h2>

<ul>
  <li>Better support for CoffeeScript <strong>class hierarchies</strong> as well as object composition</li>
  <li>Better support for <strong>inheritance</strong>: automatic merging of declaratively bound events (and some other props) from the whole prototype chain.</li>
  <li>Strict <strong>memory management</strong> and object disposal</li>
  <li>Optional Underscore and jQuery using <a href="http://exosjs.com">Exoskeleton</a></li>
  <li><strong>Module</strong> encapsulation and lazy-loading using AMD / common.js modules</li>
  <li>Cross-module communication using the <strong>Mediator</strong> and Publish/Subscribe patterns</li>
  <li><strong>Controllers</strong> for managing individual UI views</li>
  <li>Rails-style <strong>routes</strong> which map URLs to controller actions</li>
  <li>URL <strong>reversals</strong> which allow to dynamically construct app URLs</li>
  <li>A route dispatcher and a <strong>top-level view</strong> manager</li>
  <li>Extended <strong>model, view and collection</strong> classes to avoid repetition and enforce conventions</li>
  <li>A <strong>collection view</strong> for easy and intelligent list rendering</li>
</ul>

<h2>Dependencies</h2>

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

<p>Latest release is 1.0.1 (<a href="https://github.com/chaplinjs/chaplin/blob/master/CHANGELOG.md">changelog</a>, <a href="http://docs.chaplinjs.org/upgrading.html">upgrading guide</a>, <a href="http://github.com/chaplinjs/chaplin/compare/0.12.0...1.0.1">diff from 0.12</a>)</p>

<p>If you're using Chaplin with <a href="http://documentcloud.github.com/backbone/">Backbone</a>, you will need <a href="http://lodash.com/">lodash</a> / <a href="http://documentcloud.github.com/underscore/">Underscore</a> and <a href="http://jquery.com/">jQuery</a> / <a href="http://zeptojs.com">Zepto</a>.</p>

<p><strong>There is another option:</strong> you can use <a href="http://exosjs.com">Exoskeleton</a>. 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.</p>

<p>If you’ll be using Chaplin with AMD, you will also need an AMD module loader like <a href="http://requirejs.org/">RequireJS</a>, <a href="https://github.com/jrburke/almond">Almond</a> or <a href="https://github.com/cujojs/curl">curl</a> to load Chaplin and lazy-module application modules.
</p>

<h2>Brought to you by</h2>

<p class="builders">
  <!-- Mathias need to link from molily.de to his G+ profile -->
  <a href="http://molily.de/" rel="publisher"><img src="https://secure.gravatar.com/avatar/ae86e2cc402e0dceb88e7d4fc10cbc85" width="48" height="48" alt="Mathias Schäfer">
   <span class="name">Mathias</span> Schäfer</a>

  <a href="http://paulmillr.com/" rel="author"><img src="https://secure.gravatar.com/avatar/d342e4ef045c54a6a6f41d070d8a0406" width="48" height="48" alt="Paul Miller">
   <span class="name">Paul</span> Miller</a>

  <a href="https://github.com/mehcode" rel="author"><img src="https://secure.gravatar.com/avatar/23e170cf3bbbb2a392a96df75858b332" width="48" height="48" alt="Ryan Leckey">
   <span class="name">Ryan</span> Leckey</a>

  <a href="https://github.com/chaplinjs/chaplin/graphs/contributors">and others</a>
</p>

<!--

<h2>Getting started</h2>

<p>Getting started with Chaplin is really simple</p>

-->

<footer>
  <p><small>Hosted on <a href="https://github.com/chaplinjs/chaplinjs.github.com">GitHub Pages</a>. The content on this website is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/deed.en_US">CC BY 3.0</a>.</small></p>
</footer>