Example Facebook Application built with Chaplin.js
This is a small example application built with Chaplin.js, an application structure on top of Backbone.js. It can be used as a boilerplate.
While traditional site login using e-mail and password is still around, single sign-on gained popularity. The example application features a client-side OAuth 2.0 login with Facebook Connect. Facebook is just a sample service provider. In a separate repository, you will find code for client-side login using Google APIs Client Library and Twitter Anywhere
This example uses a Facebook application named “Chaplin Example App”. On login, you will be asked to grant access rights to this Facebook app. Of course this app will not post anything to Facebook on your behalf or publish/submit your personal data. You’re free to revoke access rights at any time. You might easily create your own Facebook App and change the app ID in
Running the Example
The original sources are written in CoffeeScript (
js/ directory). To recompile the CoffeeScripts, you might run the command line CoffeeScript compiler in the repository’s root directory:
coffee --bare --output coffee/ js/
This repository also contains a copy of the Chaplin library in
Since Facebook apps are always bound to a specific domain, the login only works if the app runs on the (nonexistent) domain
chaplin.moviepilot.com. To access the application, follow these steps:
- Add the line
127.0.0.1 chaplin.moviepilot.comto your hosts file.
- Start a simple local HTTP server (like nginx for example), point the document root to the app directory.
- Then you’re able to access http://chaplin.moviepilot.com/ in your browser and log in with Facebook.
After successful login, your Facebook likes are fetched from the Open Graph and displayed as a list. You might click a list entry to see more details.
Besides the likes browsers, there’s a second screen which displays some latest posts on the moviepilot.com Facebook page. This is just another controller in order to demonstrate the change between controllers with proper routing and cleanup.
This example has a standard Chaplin MVC directory structure:
All vendor libraries like jQuery and Backbone are located
There are two special files which are responsible for the application bootstrap:
facebook_application.coffee is the application root class which inherits from
Chaplin.Application. It starts up all Chaplin core modules and starts the routing. It is loaded and instantiated in
routes.coffee contains all application routes which map URLs to controller actions.
Since Chaplin is template-engine agnostic, you have to decide which templating solution you want to use and how you want to load the templates. This example uses Handlebars templates and loads them on-demand using the RequireJS Text plugin.
Chaplin expects that views implement the
getTemplateFunction method which needs to return the actual templating function. Since all views in this example use the same templating solution,
getTemplateFunction is provided once by two base classes all other views inherit from:
.hbs template files are located in the
To ease the development, this repository also provides application-specific base classes for models, collections and controllers. They inherit from the Chaplin base classes:
coffee/lib/utils.coffee demonstrate how to extend the feature testing and utility files of Chaplin.
Last but not least, this example uses a specific
Layout class which can be found in