Sample Application with Backbone.js and Twitter Bootstrap: Updated and Improved

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.

Because the templates of this application are loaded using XMLHTTPRequest, you will get a cross domain error (Access-Control-Allow-Origin) if you load index.html from the file system (with the file:// protocol). Make sure you load the application from a web server. For example: http://localhost/directory-backbone-bootstrap.

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)

32 Responses to Sample Application with Backbone.js and Twitter Bootstrap: Updated and Improved

  1. Mike April 17, 2013 at 5:20 pm #

    awesome. Thank you.

  2. Tolu April 17, 2013 at 9:40 pm #

    Hi Christophe, great job as usual – being following the ‘Employee App’ series since version 0! Always a delight to learn from you. Got a little request however, please kindly do a simple app that would consume restful api data for user registration and subsequent authentication… Please!

    Thank you.

  3. VInay April 18, 2013 at 9:42 am #

    Form Flex to Html5 found your tutorial very handy. Thanks a lot!
    On Chrome its giving error
    “Origin null is not allowed by Access-Control-Allow-Origin.” for
    HoemView.html and contactView.html.

    However while running through BlazeDS (I still use Flex…. ) its working fine.

    • Christophe Coenraets April 18, 2013 at 11:35 am #

      VInay, The default in-memory adapter should work out of the box since there is actually no server involved. Which data adapter did you use? If you want cross-domain access, you should use the JSONP adapter.

    • Christophe Coenraets April 18, 2013 at 1:18 pm #

      Vinay, Actually I think you are running into this issue because you load the app from the file system. Because the templates of this application are loaded using XMLHTTPRequest, you will get a cross domain error (Access-Control-Allow-Origin) if you load index.html from the file system (with the file:// protocol). Make sure you load the application from a web server. For example: http://localhost/directory-backbone-bootstrap. I just added a note to the post.

      • Vinay April 19, 2013 at 9:49 am #

        Thanks for exploring more on this.

        Yes you are right!
        I was using the application from the file system, so the chrome rejected the “http option”(XMLHTTPRequest) request due to the lack of http protocal and web server.
        Once I accessed the application from the webserver its worked well on both browsers IE and Chrome.

  4. Ben Wu April 18, 2013 at 5:58 pm #

    Hi,
    Why you picking Parse.com instead of other Cloud API like cloudmine?
    Just wondering.

    • Christophe Coenraets April 18, 2013 at 6:22 pm #

      @Ben: no specific reason other than it’s a popular service. Would love to hear your thoughts on CloudMine. You can also contribute an adapter if you are interested.

  5. Oren April 26, 2013 at 4:25 pm #

    Hi Chris.
    nice update to your app.
    I’ve also started an open source app to investigate Backbone architecture applied to a web-app.
    I ended up with he Echoes project:

    Echoes Media Player – http://echotu.be

    I’m also looking for a free cloud based solution for persistence and have thought of parse.com to store user’s data. how has it been to integrate parse.com? comfortable? easy to use?
    Thanks.

  6. Thomas Goddard May 21, 2013 at 2:47 am #

    This is great! Would you mind adding a version with Angular, and perhaps Yoeman? Thanks!

  7. Geoff Hollingworth May 26, 2013 at 1:15 pm #

    Hi, beginner question. what is the most effective way to configure to set up the serving of the client files from a webserver. Normally i would use a node/express backend structure to do this but here we also have a backend with server.js i will use. Should i write a combined server.js express that serves both backend and front end?

  8. Jake June 25, 2013 at 5:17 pm #

    Awesome sample application!

    I sometimes just wish the demo projects / tutorials I see online would use a non-default theme though, just to mix things up. Cheap themes are available from http://www.bootstraptheme.net/ or you can even get free ones from BootSwatch.

    Might be worth considering.

  9. Cláudio July 2, 2013 at 6:28 pm #

    Sorry for my ignorance… but what can be made to solve the cross reference template loading? How can i launch the app from a server?

  10. Fuguno July 4, 2013 at 3:20 pm #

    Hello, do you have skype? I’m making a project following two of your project the wine project and the Employee Directory project, I trying to put the wine register on the Employee Directory (DP) screen when i click in “contact” but I’m having a really big trouble in the project.

    In other words, i’m trying to create a user register in the DP, when I click in “register” like many sites do, but I’m in trouble to concatenate my mySQL database made in java to the register and make the loguin of the user link to the LOGUIN section.

    Can you add me on skype to you try to fix this please? it’s fuguno-sensei, thanks!

    Sorry for my bad english

  11. Chiaka July 24, 2013 at 4:20 am #

    Mr Christophe Coenraets I am one of your fans. Your skills and Training series are wonderful and impressive. Please Christophe I need your help. how can I connect the ” directory-rest-php sample ” and the ” offline-sync sample” ie. using MySQL as datebase in the ” offline-sync sample ” please thank you for quick reply.

  12. ramba July 29, 2013 at 1:40 pm #

    hiii, am new in web application development, please i need your advice to grow up like : where i can start or what can i start with, i have started few weeks past and i have studied HTML5 and CSS3 but i don’t know any thing about javascript and those libraries like backbone.js and others, please i need your answer.

  13. Esben August 8, 2013 at 4:03 am #

    Great post!

    Just wondering: when will you publish the Java implementation (“directory-rest-java (Java implementation coming soon”)?

    • Esben August 11, 2013 at 9:06 am #

      Oh, and by the way, there is a small bug in your implementation: when clicking a menu item from the navbar in “mobile mode”, the menu doesn’t roll up as it should.

  14. adult industry September 7, 2013 at 9:42 pm #

    It is easier to let Mom or Dad pay a utility bill
    so that your child can buy some item that is wanted but not quite affordable.

    We must not take for granted that we have the chance to decide what we want in
    life, who we want to become and where and how we want to spend every day of our lives.
    With the availability of streaming videos, these demonstrations may
    be viewed time and again, making it the perfect learning tool to
    foster an adult learner’s interest.

  15. jrsalunga November 30, 2013 at 1:22 pm #

    what this line does?

    $.when.apply(null, deferreds).done(callback);

  16. Jean-Noel December 11, 2013 at 3:45 pm #

    Hi

    Thanks a lot for this example application. There is something I don’t get, but I’m new to javascript, so please bear with me.

    In EmployeeListItemView.html, I saw the following

    the makes me think of the jsp notation, but I see no use of java technology. Could you explain where this comes from?

    Best regards

    Jean-Noël

  17. Firman January 18, 2014 at 4:36 pm #

    @Cristophe,
    sir, can you please create a simple tutorial to connect this application to use your directory-rest-php?
    so that this application can use SQL as a database, not local one.

    thanks.

    • Wawan B. Setyawan February 4, 2014 at 10:57 am #

      to connect this application to directory-rest-php,
      just simply copy-paste that folder inside your directory-backbone-bootstrap folder.
      then uncomment “” inside index.html,
      and in /js/models/model-rest.js replace urlRoot with “/directory-backbone-bootstrap/directory-rest-php/employees”

      this work for me ;)

    • Wawan B. Setyawan February 4, 2014 at 11:04 am #

      uncomment script src=/js/models/model-rest.js on line 46 (index.html)

  18. wachid February 2, 2014 at 2:19 am #

    Mr Christophe Coenraets, i am new in web application development, please i need your advice to grow up, i try to implement your example project ” Sample Application with Backbone.js and Twitter Bootstrap: Updated and Improved ” with back end server php with configuration client ini xampp:// htdoc : directory “directory” and php server ini directory htdoc “directory/directory-rest-php/employees” why i get this message in google chrome console ” http://localhost/directory-rest-php/employees/?callback=jQuery19104608414969407022_1391325433787&name=a&_=1391325433788 ” thanks for your attention and sorry for my bad english

  19. priya February 21, 2014 at 4:14 am #

    Great work Christophe. I’ve been getting to grips with Twitter Bootstrap 2.0 for an internal work tool the last couple of weeks and this sample is well timed.

  20. Rajesh March 1, 2014 at 3:49 am #

    Greetins !..Awesome Post again from you. I just wanted to develop an Bootstrap Mobile app with SQL Server DB. Please share the information on how to develop with SQL. please assist me on this.

    Keep me posted. It would be highly appreciable for your quick response.

    Thank You..

  21. Kevin March 12, 2014 at 11:03 am #

    Anybody interested in building JS apps with a combination of Bootstrap and Backbone might be interested in my Backstrap package available on GitHub – http://backstrap.github.io/backstrap/

    It provides a layer of functionality tying together Bootstrap and Backbone, making it easier to build powerful and good-looking apps. Please check it out.

  22. Carmine March 20, 2014 at 10:17 am #

    Hi Christophe,

    this sample application is very useful to learn about the latest and cutting-edge front-end technologies. Inspired by your work, I have decided to make my own app with Java Backend ( on which you’are working on that for Employee Directory project ).
    If you are interested and you have time please have a look @ http://wp.me/p3mL3Q-S

    Any feedback on Java backend architecture would be appreciated.

    Thanks,

    Carmine 

Trackbacks/Pingbacks

  1. Implementing RESTFul Services with Node.js and MongoDB | Christophe Coenraets - April 18, 2013

    [...] my previous post, I shared a new version of the Employee Directory sample application. By default, the application [...]

  2. Sample App: Storing your Application Data in the Cloud with Parse.com and the JavaScript SDK | Christophe Coenraets - April 19, 2013

    [...] couple of days ago, I shared a new version of the Employee Directory sample application. By default, the application uses an in-memory data store to provide a [...]

  3. A Sample Web Application with Twitter Bootstrap, Backbone JS, RESTFul and J2EE/JPA backend. | Pirates not the Navy - March 20, 2014

    […] Inspired by Christophe Coenraets‘ blog that I usually follow and read, I have decided to make my own app realizing the Java Backend that it is not still implemented in Christophe’s sample app Employee Directory. […]

Leave a Reply