Your new post is loading...
Over the past few months we've been developing the 2nd (and much improved) generation of the SOOMLA dashboard. Though we use myriad front-side technologies, the jewel in the crown is Backbone.js. Much has been written about Backbone, though still I find that most articles focus on HOW-TOs of models, views and events. In this post, I’ll describe our dashboard’s Backbone architecture, with an attempt to zoom out a bit and understand the fundamentals of building complex, heavy single page applications (hereinafter SPA) with Backbone. Disclaimer: this post is not about code, but about architecture concepts. Therefore, the code examples won't be detailed to the bits and bytes, but they are all documented sufficiently to understand the idea.
We use:
* Require.js for dependency management and modular code.
* Backbone.js - for basic application structure and separation of concerns.
* Marionette.js - for composite application architecture and saving lots of Backbone boilerplate.
* underscore.js for general object, array and function utilities.
* undescore.string for extended string manipulation functionality.
* Handlebars.js - for client side templating.
* jQuery for DOM manipulation, AJAX, promises, and much more.
* These jQuery plugins: Qtip, SlimScroll, Isotope, jQuery UI sortable and jQuery validations.
* imagesloaded - for capturing and synchronizing image load events.
* Less - for CSS pre-processing.
* grunt.js - for build automation (tasks like pre-compilation, minifying and concatenating code).
