Backbones aren’t the usual fare for tech blogs, but if you’ve been following frontend development, then you’ll have heard of Backbone.js. From their site: Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions,views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
Our long-running pet project FeedMe is a simple shopping list with a JavaScript client. But even simple applications tend to get out of control! Backbone helps keep everything organized (in our case with a little help from Jade, Twitter Bootstrap and RequireJS).
Our model is a “shopping list” and we have a few views to display and edit the shopping lists. Each view has its own JavaScript object. The router (also just a JavaScript object) helps coordinate all the views, and route between them. The view objects use HTML templates, leaving the JavaScript (more or less) free of markup. There’s no controller in Backbone, so our controller code is currently in both the router and the different views.
Interested in seeing an example?
Our work-in-progress can be found here: https://github.com/crispab/feedme
The Backbone files have the following structure:
router: public/js
model: public/js/models
views: public/js/views
templates: public/templates
Pretty simple! So if you’re interested in a better way to organize your frontend JavaScript, try Backbone.
Get in touch via my homepage if you have questions or comments!
