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.
Pingback: Bookmarks for February 16th from 19:47 to 21:20 | Netweb Interactive()
Pingback: My Daily Shared Bookmarksfboiton's blog | fboiton's blog()
Pingback: Using Backbone.js with jQuery Mobile()
Pingback: backbone.js | Pearltrees()
Pingback: Crafting Native Looking iOS Apps with HTML, Backbone.js, and PhoneGap()
Pingback: Simple webinterface for AD (ldap) | PHP Developer Resource()
Pingback: Tutorials/Guides/Articles/Etc | backbone.js | Pearltrees()
Pingback: Single-Page CRUD Application with Backbone.js and Twitter Bootstrap()
Pingback: Backbone.js giving structure to your application - javascripted.me()
Pingback: Super Simple Backbone Starter Kit / Boilerplate | webApp(B)log()
Pingback: 本人收集了一些Bootstrap的资源,供大家参考。 | 南龙的小站()
Pingback: Using Backbone.js to create list views with multiple layouts | Javier Manzano's Blog()
Pingback: Using Backbone.js to create list views with multiple layouts | Javier Manzano's Blog()
Pingback: Backbone.js apps with Authentication Tutorial | Clint Berry()
Pingback: Twitter bs (Bootstrap) « TechnoBuzz()
Pingback: Bootstrap:优秀的社区标准化前端框架 | 拼客王十三 Www.WangShiSan.Com()
Pingback: 10 posts de Backbone.js que no debes perderte « Silvercorp()
Pingback: 新溪转发博客 » [javascript]Bootstrap:优秀的社区标准化前端框架()
Pingback: 新溪转发博客 » Bootstrap的资源()
Pingback: Confluence: TengFei Qi, 齐腾飞()
Pingback: The Best BootStrap Resources | lotshe()
Pingback: 前端框架利器-Bootstrap – CSSwang-CSS网站()
Pingback: Employee Directory Sample App with Backbone.js and jQuery Mobile | Christophe Coenraets()
Pingback: 前端框架利器-Bootstrap()
Pingback: Using Backbone.JS with jQuery Mobile | Appliness()
Pingback: BootStrap资源 | 易老师课堂()
Pingback: The Best BootStrap Resources - 华子博客 - 前端技术博客,一起研究关于前端的那点事()
Pingback: The Best BootStrap Resources学习BootStrap的一个最好最全的资源 | JSUED ·前端开发· 视觉设计· 交互设计· 用户体验· 界面设计()
Pingback: Sip a cup of Backbarstrap: Backbone, Handlebars, and Bootstrap with CoffeeScript and RequireJS | Agile Development Blog()
Pingback: The Best BootStrap Resources | 觉()
Pingback: Sample Application with Backbone.js and Twitter Bootstrap: Updated and Improved | Christophe Coenraets()
Pingback: Rough roadmap for the next releases ← Application Maker - CRM Edition()
Pingback: Backbone Example Sites with Tutorials | Hugo Mineiro Portfolio()
Pingback: Microsoft Adds Bootstrap Support To Visual Studio 2013 | whatsweb()
Pingback: Mehmet Akif SÖNMEZ()
Pingback: Sample App with Backbone.js and Twitter Bootstrap » Pagellan()
Pingback: Learning Full Stack Web Development | Mitchell Fang's Coding()
Pingback: twitter bootstrap javascript framework - Search Yours()
Pingback: Sample App with Backbone.js and Twitter Bootstrap |()
Pingback: Getting Familiar with Backbone.js | All The Things...()