I am building a small administrative application, and I want to use Backbone.js on the client.
Now I am having some trouble on understanding how I should model my pages. I will give an example.
Lets say I have 2 pages: products, orders.
Now I understand on the products page I have a products model, collection, and view. Same goes for the orders page. That is pretty straight forward.
The problem I have is with the other sections on the page. My application has authentication, So there is a small section with the details of the user, and logout buttons. There is a small section with messages that the user has, with links to view them.
Besides that I have the menu’s of the application, and all the pages also have there own small menu.
Now how do I model such a page. I was thinking of creating a model/view for the page. Or do I create small models like menuModel, currentUserModel, messagesModel.
“The secret to building large apps is never build large apps. Break your applications into small pieces. Then, assemble those testable, bite-sized pieces into your big application” –
Justin Meyer, author JavaScriptMVC (quoted from http://addyosmani.com/largescalejavascript/ )
🙂
The point of the quote, in your context, is that you should take the approach that you suggested at the very end of your post.
You should build many small “applications” for your over-all application. Each section of the page that you describe – authorization, menu, messages, main content area – should be it’s own small set of code that you encapsulate and separate from the rest of the overall application.
Once you have all of these small pieces in place, there are a handful of ways that you can make them communicate. You can use a mediator, as Addy Osmani suggests in that link. You can use an event aggregator as I typically use and describe here: http://lostechies.com/derickbailey/2011/07/19/references-routing-and-the-event-aggregator-coordinating-views-in-backbone-js/ And there are still other patterns that can be used, of course.
By taking the approach of building many small applications – one for each of the functional areas of the over-all page that the user is interacting with – you’ll create code that is properly decoupled, well organized, and easier to maintain in the long run.