OpenMFE – Portable Microfrontends with API Contracts
OpenMFE is an open standard for building portable and retrofittable microfrontends with browser-native technology, strong encapsulation and clearly defined interfaces.
What is a Microfrontend?
A microfrontend is a self-contained, small application which can be easily integrated into a web page as a UI component.
Microfrontends can be used as stand-alone solutions, but they are also great for building entire websites in a modular way.
Microfrontends allow distributing web development across multiple independent teams, thereby dramatically increasing agility and accelerating delivery.
How does OpenMFE work?
OpenMFE is a standard that relies on native browser technology. It is not a framework, although we provide some development tools. But these are really optional and not necessary to build or integrate a microfrontend. All OpenMFE does is guide developers to building microfrontends in a loosely coupled and strongly encapsulated way.
On the right-hand side, you see how this works in practice: The microfrontend itself is just a custom element plus one line of JavaScript to load it. With a few lines of code, understood by any common browser, OpenMFE microfrontends can be integrated into any webpage.
Each microfrontend comes with a YAML-based manifest file which formally describes the microfrontend’s configuration and event APIs. This manifest file is a contract that formally describes how to interact with the microfrontend.
<!-- Embedding into any web page -->
<my-microfrontend
some-attr="foo"
some-other-attr="bar"
></my-microfrontend>
<script src="https://x.com/my-mfe.js"></script>
# The API contract (YAML file, excerpt)
name: My Microfrontend
tag: my-microfrontend
url:
frontend: ../my-mfe.js
description: This is a random microfrontend.
attributes:
- name: some-attr
description: Just an attribute.
schema:
type: string
pattern: "^[a-z]+$"
- name: some-other-attr
description: Another attribute.
schema:
enum: ["foo", "bar"]
Browser-native
Frameworks are not necessary to build microfrontends, and often they undermine the tenets of this architectural approach. Teams are supposed to design, build, and run microfrontends independently, but frameworks tend to impose build mechanisms or shared state—which leads to tight coupling and implicit dependencies. OpenMFE relies on native web components and browser events.
Strong Encapsulation
A modular application can only be successful if its components do not depend on each other. They must not share state, they must not know about each other, and they must not interfere with the environment or have other side effects. Because if they do, they become tightly coupled to each other or the environment. OpenMFE governs how microfrontends behave at runtime and thereby ensures that they do not violate their boundaries.
Interface Contracts
Any inbound or outbound messaging must be publically documented in an interface contract, meaning that each microfrontend specifies its attributes and events upfront. By entering such a contract and guaranteeing not to break it (in the sense of semantic versioning), updates can be rolled out at any time without the integrating environment even knowing. For specifying the interface contract, OpenMFE defines a manifest standard, similar to OpenAPI/Swagger.