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)

  • Mike

    awesome. Thank you.

  • Tolu

    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.

  • VInay

    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

      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

      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

        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.

  • Pingback: Implementing RESTFul Services with Node.js and MongoDB | Christophe Coenraets()

  • Ben Wu

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

    • Christophe Coenraets

      @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.

  • Pingback: Sample App: Storing your Application Data in the Cloud with Parse.com and the JavaScript SDK | Christophe Coenraets()

  • 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.

  • Thomas Goddard

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

  • Geoff Hollingworth

    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?

  • Jake

    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.

  • Cláudio

    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?

  • Fuguno

    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

    • ali khan

      SEO professionals, they help business owners provide their sites to top position search search engines. They make sure that the website has a unique setting that attracts Internet users. Seo professionals apply the newest analytics service, which has a positive impact on a web page. her explanation

  • 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.

  • 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.

  • Esben

    Great post!

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

    • Esben

      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.

  • 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.

  • jrsalunga

    what this line does?

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

  • Jean-Noel

    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

  • @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

      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

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

  • wachid

    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

  • 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.

  • Rajesh

    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..

  • Kevin

    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.

  • 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 

  • Pingback: A Sample Web Application with Twitter Bootstrap, Backbone JS, RESTFul and J2EE/JPA backend. | Pirates not the Navy()

  • Hi Christophe Coenraets,

    Was searching for a good Backbone.js sample App for writing a tutorial on integrating existing backbone.js apps with Appacitive, which is a BAAS provider.

    I came across your sample and ended up forking it and adding my own adapter for persisting data on Appacitive. Great sample and extensibility.

    I tried to lookup for license on your github repository, but its not there. Would it be ok, if we use the forked sample for publishing a tutorial on our site. Let me know if any issues.

    Thanks,
    Chirag

  • 74GregoryT

    Hi, it’s hard to find networkview.ru in google, i found it on 33 spot, you should build some high quality backlinks, i know what can help you, simply search in google for – edaya traffic increase

  • The frustration lies within many online marketers of the multiple and maybe even unnecessary changes the search engines
    make to their so called “algorithm” and YES I will agree I have shared these frustrations.
    Directories-Directories like Yellowpages, Foursquare, and Yelp
    can actually place you quite high on the search engine.
    This plugin will help you by automatically optimizing your titles so search engines can identify the keywords
    people are searching in your title for each blog post.

  • Jix

    Hi, is it possible to show a table on the home page with all the entries from the directory database as overview? I’m using the rest-php.

    Btw: Very great work! I love ist.

    Thanks

  • jenny

    Hi, thanks for the great sample! Is there any possibility to use ldap as database?

    Tanks,
    jenny

  • Useless tutuorial. What’s interesting here comparing to bootsrap tutorial?

  • Nice post!..good information,it is really helpful..it really impressed me alot and i just loved it.Thanks for posting such an informative content..

  • Robert

    I’m sure, by now, you can think where all this is leading: How is just one personal going to be ever able to perform this? This brings me to the issue of automatic writing a blog. serruriers

  • sarah jones

    It seems
    model-websql.js Uses local database using the WebSQL api. No server required

    is missing from your githup repo

  • Pingback: Материалы для изучения backbone.js « Blog — organiser()

  • With increase online marketing, SEO is becoming a popular service to help companies to reach out to their customers online. There are many SEO Company Orange County,

  • Pingback: Javascript Weekly No.127 | ENUE Blog()

  • christian campo

    Hi,

    what is the license for this code base. I like to use it on a tutorial for Docker in an open source conference. Do you allow the usage ?

    christian campo

  • kalite,fiyat uygunlugu ve imalattan.profesyonel ekip eşliğinden güvenilir işler yapılmaktadır

  • Pingback: Configuration between MongoDB,Cordova and Node.JS - CSS PHP()

  • Parse is great but the only problem is that others can read your javascript code and mess with your database.

css.php