For web apps, the front end is becoming bigger and bigger, and the back end is getting less important. Our web app at Weld (web/app creation tool) is 90% front-end code, with a very thin back end. I can imagine that a majority of new web apps being built today are dealing with a similar situation.
Web apps also change over time, as do development techniques and frameworks. This requires support for allowing different front-end frameworks to co-exist, e.g. older modules built in JQuery or AngularJS 1.x, combined with newer modules built in React or Vue.
Having a monolithic approach to a large front-end app becomes unwieldly. There needs to be a way of breaking it up into smaller modules that can act independently.
myapp.com/- landing page built with static HTML.
myapp.com/settings- old settings module built in AngularJS 1.x.
myapp.com/dashboard- new dashboard module built in React.
I would imagine the following is needed:
- A collection of separate modules, “mini-apps”, built in various frameworks. Stored in different code repositories.
- A deployment system that bundles all the modules together from different repositories and deploys to a server, whenever a module is updated.
But as it turns out, a lot of other people is thinking about the same ideas. The common term is “micro frontends”.
Here’s a few different approaches to implementing micro frontends:
- Isolating micro-apps into IFrames using libraries and Window.postMessage APIs to coordinate. IFrames share APIs exposed by their parent window.
- Multiple single-page apps that live at different URLs. The apps use NPM/Bower components for shared functionality.
- Using Varnish Cache to integrate different modules.
- Web Components as the integration layer.
- “Blackbox” React components.
- Ask Hacker News: “What do you use to build micro-front ends?”
- Project Mosaic by Zalando, a set of libraries to support a microservice style architecture for large scale websites. See also this presentation from Zalando Tech.
- Micro Frontends (GitHub) — will contain techniques, strategies and recipes for building a modern web app with multiple independent teams.