Modules? I don’t Have Anything Similar to that!
Consider for example GitHub’s site:
I just quickly went over its UI and marked the regions that “might” possibly be independent widgets. I just highlighted some of the most obvious ones (but there are obviously a lot more than those).
Separating your application into smaller parts is essential for keeping your architecture clean, reusable and mainly maintainable. The principle is a known concept in computer science: “divide and conquer”. Divide everything up into smaller parts which have
- lower complexity
- are easier to test
- easier to extend
- cause less headaches
and then compose them again together to form the whole application.
But Wait: My Widgets Have to Communicate!
Sure, modules (or widgets) within your application need to communicate with each other. Such communication creates dependencies as widget A needs to have a reference to widget B if it needs to invoke some operation on it, right? Well, not necessarily, as that would again couple those widgets together and you couldn’t exchange widget B arbitrarily without having to also change widget A.
Therefore, a common practice for creating a modular architecture is to decouple communication among components through event broadcasting mechanisms. Candidates are pub/sub architectures but also the Observer pattern. Below are just some frameworks I picked out that target the issue of modularizing large-scale applications.
AuraJS - Widget Architecture for Backbone
Aura is a decoupled, event-driven architecture for developing widget-based applications. It takes advantage of patterns and best practices for developing maintainable applications and gives you greater control over widget-based development. Aura gives you complete control of a widget’s lifecycle, allowing developers to dynamically start, stop, reload and clean-up parts of their application as needed. AuraJS GitHub
Addy also published some good reads related to this topic. You should definitely take a look at them:
MarionetteJS - Another Backbone Extension
Similar to AuraJS, also MarionetteJS takes an event-driven architecture approach.
A couple of weeks ago, they released v1.0 with components like
EventAggregator. Those concepts sound quite similar to PRISM (another modular application framework for .Net) and indeed when I asked the author:
:) definitely not coincidence. I spent 5+ years building large scale winforms apps, and worked with prism just enough to understand the composite architecture it created. I built a very large system with patterns from the Enterprise Integration Patterns book, which are all present in PRISM and Marionette now. This is definitely the influence and direction that I took with Marionette :)
The secret to building large apps is to NEVER build large apps. Break up your applications into small pieces. Then assemble those testable, bite-sized pieces into your big application. JMVC Docs: Organizing Your App
Part 1 - MVC Architecture and the Observer Pattern
Part 2 - Development process