I have studied the various frameworks build with Backbone.js and built the Vertebrae for a project at HauteLook. The project goals included... dynamic script loading, AMD module format, dependency management, build with mostly open source libraries, organize code in packages, optimize and build for one or many single page apps, host on fully cached server, e.g. no server-side scripting using only an API for data, and the funnest for me, use behaviour driven development for the project. There is a description on the project at : http://www.hautelooktech.com/2012/05/24/vertebrae-front-end-framework-built-with-backbone-js-and-requirejs-using-amd/
Our Problem:
Selected libraries (jQuery, Underscore.js, Backbone.js, RequireJS, Mustache) provide module loading, dependency management, application structure (for models, collections, views and routes), asynchronous interactions with API, various utilities and objects to manage asynchronous behaviors, e.g. (Promises) Deferreds, Callbacks. The remaining logic needed to complete the framework includes:
- an object (model) to manage state of the single-page application;
- a layout manager to present, arrange/transition and clear views, and
- controllers which respond to routes, get/set application state, and hand off work to layout manager.
Our Solutions (implemented in Vertebrae):
Application State Manager -
The application manager stores data in memory and also persists data in browser storage to provide a resource for common data/metadata. Also provides data (state) to reconstruct the page views based on previous interactions (e.g. selected tab, applied filters). The application state manager provides a strategy for resources to retrieve state. Meant to act as a state machine.
Layout Manager -
The layout manager has one or many views as well as document (DOM) destinations for each (rendered) view. A page may transition between many views, so the layout manager keeps track of view states, e.g. rendered, not-rendered, displayed, not-displayed. You may use the layout manager to lazy load and render (detached) views that a site visitor is very likely to request, e.g. tab changes on a page. The transition between view states is managed by this object. An entire layout may be cleared so that view objects and their bindings are removed, preparing these objects for garbage collection (preventing memory leaks). The layout manager also communicates view state with controller(s).
Controller -
A controller object is called by a route handler function, and is responsible for getting relevant state (application models) to generate a page (layout), (also responsible for setting state when routes change). The controller passes dependent data (models/collections) and constructed view objects for a requested page to the layout manager. As a side-effect the use of controllers prevents the routes object from becoming bloated and tangled. A route should map to a controller which then kicks off the page view, keeping the route handling functions lean.
The Todos app is hosted both in dev mode and optimized on Heroku...
- http://vertebrae-framework.herokuapp.com/
- http://vertebrae-optimized.herokuapp.com/
Many of the concepts in the other frameworks are borrowed, e.g. the need to destory views to preview memory leaks as pointed out by Derick Bailey - http://lostechies.com/derickbailey/ ; the Layout Manager by Tim Branyen http://tbranyen.github.com/backbone.layoutmanager/
In summary, Backbone.js is meant to be a tool in your application the Backbone.js library does not provide all the architecture you will need to build an application, but does provide great interactions with an API and solid code structure for... Views (act like controllers too) and your data layer Models and Collections, and finally Routes. We built Vertebrae to meat the goals of our project, and decided to extract the code as a framework for others to use, learn, or whatever.
The answer to your question in my opinion is to learn from all the frameworks and use what you need to meet your goals, if you find that your project goals fit closely with one of the frameworks built with Backbone then great, otherwise built your own framework there are great examples being shared by the community. Or if you find yourself a bit lost in the direction of your application then choose something more opinionated and structured perhaps Ember.js. The great thing is there are a good assortment of choices to help you code using an (MVX) MVC like pattern with JavaScript.
