Backbone.js is a lightweight JavaScript framework that provides the basic infrastructure (Model, Collection, View, and Router classes) to bring structure to your Web applications.
Twitter Bootstrap is a UI toolkit that provides simple and flexible HTML, CSS, and Javascript to implement popular user interface components and interactions.
In other words, Backbone.js and Twitter Bootstrap focus on different areas of your application: core architecture and user interface respectively. Because of their well-defined and non-overlapping scope, Backbone.js and Twitter Bootstrap work well together. In general, I find a lightweight architectural framework and a UI toolkit to be a powerful combination, and an interesting alternative to full-stack frameworks: it gives you the flexibility to choose the library you like (if any) in the respective areas of your application.
The Sample Application
To give this combination a try, I put together a new sample application that uses Backbone.js to organize the code, and Twitter Bootstrap to organize the UI. The application is an Employee Directory that allows you to look for employees by name, view the details of an employee, and navigate up and down the Org Chart by clicking the employee’s manager or any of his/her direct reports.
You can run the application here.
Backbone Directory is a single page application: index.html is essentially empty. Views are injected into and removed from the DOM as needed. Even though it is a single page application, the Backbone.js Router makes it easy to keep the different states of the app “bookmarkable” and “deep-linkable”.
Twitter Bootstrap highlights
“Backbone Directory” uses a number of the Twitter Bootstrap styles, components, and interactions: the 12-column grid with nested columns, a “Navbar”, a “Search Form” with dropdown, the dropdown plugin, the Glyphicons icons, Info and Warning alerts, a “Well”, etc.
Backbone.js highlights
If you are new to Backbone.js, you may want to start with the tutorial (part 1, part 2, part 3, and postface) I blogged recently. “Backbone Directory” includes some interesting elements not covered in the tutorial:
- One-to-Many association. A one-to-many (Manager-to-Employees) association is defined in the Employee model (model/employeemodel.js) as a collection of employees (the direct reports). That collection is lazily fetched in the render() function of EmployeeFullView (view/employeedetails.js).
- Composite View. EmployeeFullView (views/employeedetails.js) is an example of a composite view. Its render() function instantiates two subviews: EmployeeView and EmployeeListView (to display the employee’s direct reports).
Source Code
The source code is available in this repository on GitHub.
Your feedback and comments are appreciated.
What server scripting languages and frameworks have you used with backbone.js? Have you found it to be backend agnostic, or does it work best with node.js, python, ruby, php, etc?
Backbone.js is completely backend agnostic – as long as you can implement something that resembles a RESTful API, you can use Backbone.js.
So the Slim Restful API is a requirement, I guess because it maps the browser state to a faux url – although I thought backbone was doing that with the router object(?). If I am looking to implement backbone to build a UI in suppport of a CMS backside, then I could map the Slim API functions per url to a series of CMS class methods – so long as I am returning a JSON object for underscore to parse into the backbone templates(?).
I feel my understanding of the Slim api in relation to the backbone router is foggy. Can someone please highlight that relationship – and perhaps how it might work from a cms backend?
Thank you, Christophe, for your excellent work! I appreciate the time you put into this tutorial.
The Slim Framework is used to build a RESTful API with PHP. You could use whatever server-side language you prefer (Java, Ruby, etc.). The router should have nothing to do with the REST API; it maps application URLs to front-end (i.e. Backbone) functionality. However, the models & collections get linked to the REST API by URL – the URLs tell Backbone what REST services to use for loading/persisting data contained in the model/collection.
Not sure if it’s a bug with Backbone or the app, but if I click to any other page other than the homepage and try to go back and click the “Show Me!” button it doesn’t bring up the list of employees.
Also, does Backbone not support pushState for history? I don’t know much about this library and am just starting to get into it.
Great little app though! Thanks.
Backbone has optional support for pushstate. It is not enabled by default because not all browsers handle it yet (iOS Safari pre 5.0 is buggy, IE9 still does not support it, not sure about the Android browser and Safari may have issues there as well).
You can enable `pushState` support by passing in the `pushState: true` option when starting the history handler: `Backbone.history.start({pushState: true})`
yes
hi
Thanks! I’ve been looking for a nice BackBone.js starting point for quite some time. Your source code should be a good help for my next project :)
Good work COENRAETS, thanks for sharing this.
Was looking for something exactly like this! Am playing around with Bootstrap but it’s all UI. This is awesome!
@Patrick: Yes Backbone is backend agnostic. For access to remote services, it works really well with RESTful services by default. But you can override Backbone.sync to implement any kind of synchronization strategy. See this post for an example of using the local database on a local device.
Seems to not want to render in IE 9 (I know, I know, BUT many big companies use it). I can “view source” and the source loads – just no rendering happening… looks great in chrome.
Looks great in Chrome as previous poster said. Doesn’t seem to work in FF 3.6 though. Do you know if this is because Bootstrap doesn’t support it?
Great to see that the HTML+CSS+JS workflow is improving. However, I cannot help to think that this “app” would feel smoother in Flash. I think it has to do with small details such as how dropdown lists are rendered, how the page resizes when the elements are loaded, how the hoover selection in the dropdown feels a bit too instant etc. I guess this can be improved by tweeking the css, but these things are natively done right in Flash.
Flash? Seriously.
In 2012, Flash is still superior from a technical quality point of view. Not that I use it anymore. It got hit with the same ugly stick that Java applets were whacked with back in 1999 and that is that.
Nice tutorial. I was wondering how I would go about not showing a particular piece of an html template, is that possible? For example in employee-details.html how could I conditionally show or not show the manager field? Normally I would surround that in an if block with my server side scripting language but with backbone I don’t understand how to accomplish that. Any suggestions?
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.
If you’re stuck for your next sample a backbone.js and Twitter Bootstrap CRUD app would be great ; )
The app is great but there are two problems that I found.
1: the contact link doesn’t get the focus when clicked.
2: if I click one of the top menus, home or contact, the show me doesn’t work, I have to remove the # from url and click again.
I’m gonna try that application with knockout.
Thanks for you time Christophe
Great information. I’ve been searching a long time for something like this.
I should start now learning the aplication with the tutorial and your “Backbone Directory”, i’m new…hahaha
Thanks a million!
@Daniel & Esteban: Thanks for reporting this. I’ll post an update with minor fixes along with the Mobile version.
Hi Christophe,
Really nice App. Thank you. I am a beginner and it will help to start learning backbone and Bootstrap. I have some ideas I will try to learn and do my webapp on my own. I am wondering why you didn’t commercialize this. Small companies can buy this right and is very useful for them just like any time tracking app.
Need small Info: Based on backbone+Bootstrap, are there any open srcd/example templates where a simple app that has support for user login/signups. I want to create an app that allows user to login and enter some details for app to work. One cant access others data. Any pointers how to go about ?? Any one else can also help me.
Thanks for all the educating posts!
Looking forward to the mobile update and maybe some thoughts on how this Bootstrap approach compares to the one with jQuery Mobile?
Thanks! What’s the license for your project ?
Using this url patterns do you believe that google indexation will work fine?
I wrote Perl backend ( using Mojolicious ) for your sample, let me know if you would like to add it to source code. Thanks for sample code
I’d like to see your mojo source code. I have just put a mojolicious with bootstrap boilerplate on github and maybe we could complement it with some mojo with backbone boilerplate. Please feel free to contact me at tudorconstantin at gmail
I pushed my code with perl backend to github https://github.com/lotux/backbone-directory
Christophe, I found a minor bug:
If you visit the main app: http://coenraets.org/directory/
Click “Show Me” under “Try It”. Select someone. Click back. Then click “Show Me” again… nothing happens.
Very minor but FYI
You know what would be really cool?
An extended version of this tutorial w/ additional login and admin capabilities.
One of the biggest question to newcomers on rest-like architecture is how handling login and performance security operations (like adding or removing contents, auth, and so on).
I’m sure it will be a great follow up article
Best
snick
I wonder how I can do to mount this tool locally (localhost). Right now I work, if not due to .htaccess is not set in my MAMP. Or is that the folder “api” PHP is not well located within the project and is not accessible.
Thanks.
PD: Sorry for my English.
Hi
Did you manage to solve this problem as I appear to have the same issue? – does it have to be on live server?
Cheers
Waiting for a new backbone.js article.!!!!
Hey,
This is amazing! Thank you for your work.
This uses Twitter Bootstrap 2 right?
Regards
Amazing example of using backbone.js.
A little confuse about property model of EmployeeListView in “employeelist.js” file.
I think it is better to name it as collection. Actually, it is assigned an instance of EmployeeCollection in “header.js”.
did you find more UI flexibility with Bootstrap over JqMobile? or the other way around?
have you tried compiling a twitter bootstrap mobile site through phone gap
I’m totally new to javascript, twitter-bootstrap and backbone. This is a great tutorial to get started with these.
Read http://backbonetutorials.com/ before starting this tutorial, it will explain the basics of backbone.
btw, how did you create the image that shows the employee hierarchy?
Chris,
Thanks for this and the other great Backbone code and articles. One thing I’d love to see you cover that I haven’t found a good tutorial for yet is handling Bootstrap’s modals, tooltips and popovers–is this something you plan to cover soon?
I solved 2 bugs in this great application:
1. the first one is the “Show Me” button bug : if you click on Contact, then on Home and on the “Show Me” button, the search popup does not appear. This is due to the view recycling system: events are lost when you reinject the HTML into #content. To solve this, you can call the delegateEvents() method of the View.
So in the main.js file, change the home function as this:
home:function () {
// Since the home view never changes, we instantiate it and render it only once
if (!this.homeView) {
this.homeView = new HomeView();
this.homeView.render();
} else {
this.homeView.delegateEvents(); // delegate events when the view is recycled
}
$(‘#content’).html(this.homeView.el);
},
2. I found another bug with the search field: if you press Enter in this field, the page is reloaded!
Quite easy to solve: in the header.js file, add the keypress event and filter the Enter key:
events:{
“keyup .search-query”:”search”,
“keypress .search-query”:”onkeypress”
},
…
onkeypress:function (event) {
if (event.keyCode == 13) {
event.preventDefault();
}
}
Hope this helps!
And many thanks to Christophe for all your great tutorials!
Very nice sample. Thanks!
I’ve created a node.js backend in case anyone is interested: https://github.com/lgvier/directory
Cheers
nice example using backbone.js+Bootstrap.css+Slim.php.
i hope to see amdjs version….
regards.
Hi
First of all – a big thanks for this tutorial – it’s set me on the right path.
…but one problem. I have downloaded the app and trying to get it going on my MAMP setup. I have also imported your directoy.sql file into a ready made database and everything seems to work just great. The problem arises when I select an employee from the drop-down list. It sets the correct URL but nothing shows and I’m not sure why. Obviously I’m connecting to the DB ok as the people wouldn’t appear in the drop-down list so not sure where to start looking.
Any help from anyone would be much appreciated.
Thanks
Sorry – I should be more specific. When I select an employee from the drop-down list it just stays on the homepage but the URL changes in the address bar! I’m thinking it might be to do with the fact I’m on a local setup???
I found Christophe’s use of the backbone Collection object to be a bit confusing because it was different from other tutorials on Backbone that I have read. Most other tutorials show a Collection to be a grouping of Models.
In this tutorial, The ‘EmployeeCollection’ Collection instantiates the ‘Employee’ model (see: js/models/employeemodel.js) but the ‘grouping’ of fellow employees under the “reports” variable is a json_encoded data set that was…
…. retrieved through the ‘EmployeeCollection’ url Slim Restful ‘getEmployeeByName()’ in the ‘api/index.php’
…. instantiated back inside the ‘Employee’ model with:
this.reports = new EmployeeCollection();
…. then looped through in the ‘EmployeeListView’ View render with:
_.each(this.model.models, function (employee) {
$(this.el).append(new EmployeeListItemView({model:employee}).render().el);
Note that this is NOT “wrong.” Backbone does not establish how anyone uses the MVC pattern. But to me, it sort of broke the concept of a ‘Collection’ of ‘Models’. Creating such a variable (‘reports’) within the ‘Employee’ model may well be the best implementation and certainly shows the power of Backbone to do whatever you want. I just thought it needed some clarification.
My take would have been to loop through the list of employees who report to a person (i.e. the Restful resource URI ‘getEmployeeByName()’ and create a model for each of those employees, then instantiate those into the ‘EmployeeCollection’ collection and go from there. To me, that would have kep the concept of a “collection” intact.
Please advise if I misunderstood something.
Great job done.
I am looking for Java back end source codes.
When its coming.
Thanks,
Prabhat
great article man! I was trying to find an article explaning how to use twitter bootstrap beyond the examples in the site and you proposed it!
Great blog, i am learning backbone last 2 months, i have learnt lot in this tutorial,
I have forked this project and added AMD support using require.js,
If you do a Globalogiq html search for “js/bootstrap.min.js” you can find a bunch of examples of sites using bootstrap. Or do a search for “backbone-min.js” to find sites using backbone.
Hi, I’m quite new to js and backbone and I’ve just taken a quick look at your code but don’t you think that exposing sql statements in javascipt files represents a big security hole?
How I can use bootstrap dropdown box with backbone. hover is disabled for DD in bootstrap, I have to click. It’s okay but backbone router take over and route to href instead of open Dropdown box. How to deal with that?
excellent stuff! thanks a lot for sharing
Thank you bro it’s the best blog!
Now is the time to take action and make money. Be your own boss with http://www.PleasureBuilder.com
It’s nearly impossible to find educated people for this topic, but you seem like you know what you’re talking about!
Thanks
Nice demo!
I did notice that when you go to contact the active state on the .nav doesn’t change.
hello good blog
Hi, every time i used to check blog posts here early in the dawn, as i enjoy to gain knowledge of more and more.
Does The Sample Application work on IE? I open it on IE, but nothing display. Does Twitter Bootstrap component work on IE?
Hi. How do I get rid of the # from the URL?