A year ago, I blogged Employee Directory, a sample application that demonstrates how to build modern web apps with Backbone.js and Twitter Bootstrap. With 1200+ stars and 300+ forks on GitHub, it has been my most popular sample application to date.
Because of the continued interest in the application as a starting point and a reference for Backbone.js and Twitter Bootstrap, I decided to give it a well deserved update.
New in this version:
- Latest version of Backbone.js (1.0)
- Latest version of Twitter Bootstrap (2.3.1)
- Layout is now responsive
- Data persistence layer is now abstracted (see below)
- Additional data persistence options: In-memory datastore, Node.js/MongoDB, Parse.com (In addition to PHP and Java)
- New GitHub repository organization (see below)
- Bug fixes and cleaner code
Running the Application
You can test the hosted version of the application here, or you can download the code (see GitHub repository information below) and test the application locally.
Data Persistence Abstraction
Among the great feedback I received, a number of you mentioned you wanted a self-contained version of the app with no dependency on a specific back end to be able to “download and run” without having to set up a server and a database. So I rearchitected the persistence layer with simple and pluggable data adapters. By default the application now uses an in-memory data store, but other adapters are available. To change the data persistence strategy, just comment out model-in-memory.js in index.html and uncomment one of the other data adapters using the table below as a reference.
I initially published the application with two implementations of a RESTful back end: A Java version using Jersey, and a PHP version using Slim. A year later, I’m adding the long overdue Node.js/MongoDB back end.
| Adapter | Description | Back end Repo |
| model-in-memory.js | In-memory data store | No server required |
| model-rest-json.js | Backbone.js default behavior. The application gets data through RESTFul services. | directory-server-nodejs directory-server-php directory-server-java |
| model-rest-jsonp.js | If the server serving your pages and the server serving your data are on different domains, use this adapter instead to avoid the same origin policy error. | directory-server-nodejs directory-server-php directory-server-java |
| model-websql.js | Uses local database using the WebSQL api. | No server required |
| model-parse-dot-com.js | Don’t want to host your own data infrastructure? Parse.com is a cloud service that will host your data for you. Use this adapter to test your app with sample data I deployed on Parse.com. | No server required |
The Node.js, Java, and PHP RESTful back ends work with both JSON and JSONP. If the request includes a query parameter named “callback”, a JSONP response is returned, otherwise, a regular JSON response is returned.
New GitHub Repositories
The original repository (backbone-directory) grew somewhat chaotically as I kept adding different versions and different data persistence options. So I decided to start fresh with new repositories.
The client code for the application is available in the new directory-backbone-bootstrap repository. In the future, this new repository naming scheme will allow me to add different versions of the app (for example, directory-backbone-foundation or directory-angular-bootstrap) while keeping each repository clean and focused.
If you want to go beyond the in-memory datastore, you can download the REST services in the following repositories:
directory-rest-nodejs (Node.js/MongoDB implementation)
directory-rest-php (PHP implementation)
directory-rest-java (Java implementation coming soon)