For web apps, the front end is becoming bigger and bigger, and the back end is getting less important. Our web app atWeld(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.
- landing page built with static HTML.
- old settings module built in AngularJS 1.x.
- new dashboard module built in React.
I would imagine the following is needed:
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
IFramesusing 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.
Varnish Cacheto integrate different modules
- Web Componentsas the integration layer
- 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.