I have been programming in JavaScript for just a little over two years give or take, I am still in the intermediate part of the know-how spectrum. I have recently just discovered Backbone and I love its minimalist way, and the way it gives me freedom to decide how to architect my application, problem is that, that is the problem, finding the best or at least an optimal solution that work for a variety of problems across the board is hard.
Particularly for applications with complex UI interactions (basically things that have lots of bells and whistles like Stack Exchange for example).
My problem is not so much about architecture as such, but how to organize my components and views in a way that they can communicate with each other while remaining 'totally' unaware of the details of each others existence
To this end I decided to combine the Module pattern (a representation of it at best) and three other event based patterns i.e Event Emitter, Pub-Sub and Promises (also representations not the ideal). I developed an application class called Itajs on top of Backbone to help me make sense or at least control my applications execution.
The application class provides ways for defining modules called mediators, routes, and uses a single backbone router, it also provides a way of subscribing to commands and firing/publishing these commands, and I also added three optional components (Entities, Controllers and PageMakers). One thing I wanted for my applications was that their views should remain as minimal as possible and should only care about user interactions, so, they don't make any data requests, they just fire events (Event Emitters), and the controllers take care of handling the events, that is, if u do use controllers.
The controllers should take care of creating and controlling the views and handling the events they emit, and also get data and implement the application logic, this logic could in turn, be passed down to the models (if you are religious about it), so that controllers just become glorified data accessors, The PageMakers are there to make pages just as their name suggest, I use them to respond to routing requests that are responsible for new pages. The Entities are responsible for loading collections and models and responding to data requests, they handle client-server comm.
After doing all that I realized at some point I was going to need a way to synchronize my application components in a serialized manner, so I came up with what I call a strict promise, that means that we first set what it to happen when the promise is resolved or rejected, and then fire the promise which for my architecture is just a command. For Clarity if I didn't make sense here is a breakdown for a typical application execution that uses all the components
- Create Application Instance
- Load the Config,
- Load all Entities,
- Load all Mediators
at each Mediator
load Controllers, PageMakers and what not
subscribe to Commands and register Routes
End
During application execution:
OnRoute:
Call a PageMaker page handler
Fire Creation and Loading of the different views through single commands
or
Create and Fire a Promise chain
Controllers Create Views, Register for Event Handling and fire response
command for action when completed,passing back a view or any other args
handlers may need
OnCommand: Do whatever it may be that the handler might be doing, just make sure that you don't get caught in endless recursion or cycle.
Here is a paste bin link to Itajs and Simple Use case with a mediator. Itajs Example
P.S Itajs uses backbone events and something that really made me smile was the fact backbone doesn't register duplicate handlers for events, so no worries for duplicate controller event handlers on the views. Also the Backbone Views extend Backbone Events and therefore are event emitters themselves
So the question is, is this a solution that can work and am I implementing the details in the right way, particularly the promises or am I locking myself into the synchronous mode that I am trying to break out of?
