Juri StrumpflohnerFollowJuri is a full stack developer and tech lead with a special passion for the web and frontend development. He creates online videos for Egghead.io, writes articles on his blog and for tech magazines, speaks at conferences and holds training workshops. Juri is also a recognized Google Developer Expert in Web Technologies
4 min read
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
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
Similar to AuraJS, also MarionetteJS takes an event-driven architecture approach.
A couple of weeks ago, they released v1.0 with components like RegionManager and 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