Large-scale JavaScript architecture: modules, facade, mediator
Addy Osmani’s classic answer to growing JavaScript apps: independent modules that only talk through a mediator.
From the archive: in 2014 I shared “Patterns For Large-Scale JavaScript Application Architecture” by Addy Osmani (2011) on my old blog. This page is a short summary in my own words; the original belongs to its author.
In 2011, Addy Osmani described how to keep a big JavaScript application from turning into a tangle. His tweet-sized summary: decouple the app with three patterns.
- Modules: each feature is an independent piece that knows nothing about the others.
- Mediator: modules don’t call each other; they publish messages (“a new message arrived”), and a central mediator passes them to whoever is interested.
- Facade: a thin layer between modules and the core that limits what each module may do, which acts as a security boundary too.
The payoff: you can remove, replace or test a module without breaking the rest, and you are not locked into one library.
Frameworks, components and ES modules have changed the tools since then, but the idea still holds. Loose coupling through events, and small, clear boundaries, are what keep large front-end apps maintainable.
Read the original: Patterns For Large-Scale JavaScript Application Architecture, by Addy Osmani (2011).