Code Monkey home page Code Monkey logo

chaplin's Introduction

Chaplin

An Application Architecture Using Backbone.js

Introduction

Chaplin is an architecture for JavaScript applications using the Backbone.js library.

Documentation and Support

Commercial Support and Training

9elements — Berlin/Bochum, Germany

One of the creators of Chaplin, is offering commercial support and training for Chaplin and Backbone-based JavaScript applications. 9elements is a software and design agency located in Berlin and Bochum, Germany. Send us a mail for more information: [email protected].

Paul Miller — Kharkiv, Ukraine

Chaplin & Brunch maintainer is offering consulting & training for all Backbone-related stuff. Contact him: [email protected].

Concordus Applications — Sacramento, CA, USA

Offering commerical support and training for Chaplin and Backbone-based JavaScript applications. Concordus Applications is an enterprise integration and software development firm. Email us for more information: [email protected].


Key Features

  • CoffeeScript class hierarchies as well as object composition
  • Module encapsulation and lazy-loading using AMD modules
  • Cross-module communication using the Mediator and Publish/Subscribe patterns
  • Introducing Controllers that represent UI screens
  • Rails-style declarative routes that map URLs to controller actions
  • A route dispatcher and a top-level view manager
  • Extended model, view and collection classes to avoid repetition and enforce conventions
  • Strict memory management and object disposal
  • A collection view for easy and intelligent list rendering

Motivation

Modern Times

While developing several web applications using Backbone.js, we felt the need for conventions on how to structure such applications. Backbone is an easy starting point, but provides only basic, low-level patterns. Especially, Backbone provides little to structure an actual application. For example, the famous “Todo list” is not an application in the strict sense nor does it teach best practices how to structure Backbone code.

Backbone doesn’t intend to be an all-round framework so it’s not appropriate to blame Backbone for these deliberate limitations. Nonetheless, most Backbone use cases need a sophisticated application architecture.

This is where Chaplin enters the stage. Chaplin is derived from the codebase of moviepilot.com, a real-world single-page application. It draws attention to the top-level architecture: everything above simple routing, individual models, views and their binding.

Dependencies

Chaplin depends on the following libraries:

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

Download Chaplin

Using bower

  1. Install the Node package for the Bower package manager.

    sudo npm install -g bower
  2. Install chaplin via bower.

    bower install chaplin

    Specific versions may be requested as follows:

    bower install chaplin#0.6.0

    This will also download the required version of backbone but will not download the required DOM manipulation or utility libraries. These can be installed separately via bower install underscore, bower install jquery, bower install lodash, etc.

Manually

Download the latest release on chaplinjs.org. See below on how to compile from source manually.

Building Chaplin

The Chaplin source files are originally written in the CoffeeScript meta-language. However, the Chaplin library file is a compiled JavaScript file which defines the chaplin module.

Our build script compiles the CoffeeScripts and bundles them into one file. To run the script, follow these steps:

  1. Download and install Node.js.

  2. Open a shell (aka terminal aka command prompt) and type in the commands in the following steps.

  3. Install the Node package for the grunt command line interface globally.

    sudo npm install -g grunt-cli

    On Windows, you can omit the sudo command at the beginning.

  4. Change into the Chaplin root directory.

  5. Start the build (will install dependencies and build).

    npm install
    

This creates two directories:

  • ./build/amd/ with a build using the AMD module style
  • ./build/commonjs/ with a build using the CommonJS module style

These directories contain four files each:

  • chaplin.js – The library as a compiled JavaScript file.
  • chaplin.min.js – Minified. For production use you should pick this.
  • chaplin.min.js.gz – Minified and GZip-compressed.

Running the Tests

Chaplin aims to be fully unit-tested. At the moment most of the modules are covered by Mocha tests.

How to run the tests:

  1. Follow the steps for building chaplin.

  2. Open a shell (aka terminal aka command prompt) and type in the commands in the following steps.

  3. Change into the Chaplin root directory.

  4. Start the test runner.

    npm test
    

Note that you can now additionally open test/index.html to run the tests in your browser (instead of in node). Furthermore code coverage reports are generated and may be viewed by opening test/coverage/index.html in your browser.

Boilerplates

Chaplin needs a simple skeleton to start up and configure the core modules. We provide several boilerplates to make the start easier.

Chaplin Boilerplate is a “Hello world” example project using Chaplin. If you’re not a CoffeeScript user, there’s also a plain JavaScript boilerplate.

For Ruby on Rails users, we’ve compiled a Boilerplate Rails Application with Backbone, Chaplin and Require.js.

Brunch with Chaplin

github.com/paulmillr/brunch-with-chaplin

Brunch with Chaplin is a skeleton application, where brunch is used for assembling files & assets. It has ready-to-use classes for session management, html5boilerplate and stylus / handlebars.js as app languages.

Examples

Several example applications are available today:

Facebook Like Browser

github.com/chaplinjs/facebook-example

This example uses Facebook client-side authentication to display the user’s Likes.

Ost.io

github.com/paulmillr/ostio is a forum for GitHub projects and a modern replacement for mailing lists.

Ost.io serves as a good example of a fast service-based application, using Ruby on Rails as a lightweight backend (which is open-sourced too) that only handles authentication / server-side logic & talks JSON to clients. In this way, the frontend is completely decoupled from the backend which gives the ability to work on both projects in parallel and increases scalability, speed & maintainability quite a lot.

Tweet your Brunch

github.com/brunch/twitter is a simple twitter client. It uses Twitter client-side authentication to display user’s feed and to create new tweets.

Ending

chaplin's People

Stargazers

 avatar

Watchers

 avatar  avatar

Forkers

regedarek

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.