Open Source Tools

To support the development of Modular Web Architecture artefacts, especially microfrontends, we are mainataining a set of Open Source tools and libraries. Here’s and overview of them; please refer to their individual repositories to learn more about them.

Manifest Loader/Validator and Contract History Checker

The @openmfe/manifest tool retrieves and validates the contract of an OpenMFE microfrontend. It also resolves relative paths to full URLs. When you load a microfrontend’s manifest with this tool, you can be sure that the manifest complies with the OpenMFE specification (if not, it will throw an exception). The validation feature can be installed to any JavaScript project. It works from the command line or as a module, both ES and CommonJS are supported.

The contract history checker makes sure that a microfrontend’s contract doesn’t introduce breaking changes over time. This is important because a microfrontend is supposed to be always deployed under the same URL. Therefore, its consumers must be confident that attributes, events and other aspects of the interface do not change in a breaking way.

Runtime Behaviour Checker

The @openmfe/check-runtime tool is used to check if a microfrontend behaves specification-compliant at runtime. These checks look for violations of the “General Provisions” in the OpenMFE specification as well as the output generated by the prerendering endpoint.

Please be aware that the checks of this tool are still largely incomplete. There are still lots of provisions the tool doesn’t check for. It may be that, as the tool matures, a previously “valid” microfrontend will be marked as invalid due to the addition of new checks.

Eleventy Plugin

The @openmfe/eleventy-plugin tool is a plugin for the Eleventy Static Site Generator to embed a microfrontend into any Eleventy page. While microfrontends can be easily embedded into any page by loading the script and adding the custom element tag, this plugin provides some extra functionality: It also inserts the prerendered placeholder as well as (optionally) the semantic JSON-LD into the page. Additionally, it checks the manifest of the microfrontend and makes sure it doesn’t break its contract over time.