The Micro Frontend Manifesto
What is the “micro frontend” (MFE)? It’s a collection of principles and practices that help engineers independently develop UI units (typically pages) that get assembled into a cohesive user experience (UX). What is it not? In principle, it is not a JavaScript framework, nor a bundler, nor a styling strategy, nor any particular technology. In practice, we develop web applications that imply the use of web technologies (eg. JavaScript, React, Webpack, etc.). However, at its core, MFE encourages and supports the development of smaller, decoupled units of user interface and practices that enable scalable and parallel development.
Principles
Independence
MFE applications get built independently from each other and their service dependencies. Each application provides its own development experience, and each will build, version, and release distinctly apart from each other. Applications should engage in continuous integration, constantly building and releasing themselves following semantic versioning rules. The desire for independence should encourage MFE applications to mock dependencies like APIs, reducing the coordination needed between teams and allowing for UIs to be developed in parallel with each other and their data services.
Composition
To combat the Ringlemann effect [1], the entire development lifecycle of a micro frontend application should be manageable by a reasonably small development team. Rather, the overall user experience should be the result of a composition of many MFE applications into a single consolidated whole. Teams should strive to build small units with narrow responsibilities, relying on patterns or frameworks for composing these units into a coherent UX. This composition should support horizontal scaling of UI development to many teams and allow engineers to avoid organizational bottlenecks to feature delivery.
Isolation
MFE applications should be free of dependency conflicts and cascading regressions. In the context of a build and dependency resolution system, this means each application is free to bundle and depend on its own set of libraries and frameworks. For example, multiple applications may rely on a framework like React, but each would be free to depend on different versions. Similarly, each application may depend on a different version of a shared components, reducing deployment coordination and regression risk.
Automation
In order to confidently manage the ecosystem of MFE units, we expect and rely on automated tools. This includes, but is not limited to, e2e test automation, continuous integration, and continuous delivery. We intend the maintenance burden of each application to be limited by investments in tooling and automation. For example, managing the upgrades of dependencies across many MFE applications should few to no manual steps. When an MFE application is not being actively developed, the cost of maintaining it should be mitigated by this automation.
Background
ThoughtWorks describes “Micro Frontends” on their technology radar:
“Our preferred (and proven) approach is to split the browser-based code into micro frontends. In this approach, the web application is broken down into its features, and each feature is owned … by a different team. This ensures that every feature is developed, tested and deployed independently from other features. Multiple techniques exist to recombine the features — sometimes as pages, sometimes as components — into a cohesive user experience.” [2]
In a nutshell, this approach draws from some of the lessons and benefits discovered as engineering organizations have moved toward micro service architectures. It espouses the decomposition of UIs into smaller, decoupled, and independent units that are recombined at runtime. Naturally, these units gain an enormous amount of independence and flexibility from this approach and are theoretically free to decide upon their own technologies and frameworks.
References
[1] “Ringelmann Effect.” Wikipedia. https://en.wikipedia.org/wiki/Ringelmann_effect
[2] ThoughtWorks Technology Radar: Micro Frontends. https://www.thoughtworks.com/radar/techniques/micro-frontends