Development
Ready to touch some actual code? After familiarising yourself with the architecture, there are a few options for starting with building OpenMFE microfrontends. If you’re new to native web-components, try the 2-minutes hands-on demo. To learn more about the building blocks of an existing project, take the deep dive. After that, you can have a look at more specific topics such as localisation or orchestration.
Quick Hands-on Demo
In order to get you started with browser-native microfrontends, we will first launch a minimalistic demo of a web component to show the basic pattern. This will give you a feeling of what native microfrontends are about, and it will not take more than two minutes. This is not yet a microfrontend, but it will implement the part that developers are least familiar with, the custom element.
Microfrontend Deep Dive
A real-world, native microfrontend is a full-stack web application, and therefore has certain degree of complexity. Let’s have a close look at an example microfrontend to understand the building blocks and how they work together.
Microfrontend Performance
Great performance is important for the user experience of any web application. With microfrontends, it is especially important to be diligent, because mistakes and bad practices multiply. Luckily, there are lots of areas for optimisation.
Microfrontend Localisation
Creating multilingual software is not as easy as it might seem, especially in a modular architecture. This article shows how to localise a modular UI component (such as a microfrontend). You will learn about message catalogs, contexts, plurals, date formats and localised layout as well as a lot about human language in general.
Composition and Orchestration
OpenMFE microfrontends are stand-alone applications wrapped into a custom element. In order to build larger sites, composition and orchestration must be implemented. This can be done with a thin layer of glue code, also known as the integration layer.
UI Design
When developing a microfrontend, UI design can be challenging. Strictly speaking, the UI is a <em>contract</em> between the host page and the microfrontend. But as much as OpenMFE loves formalising contracts, this is barely possible when it comes to visual coherence. Therefore, OpenMFE relies on the developers’ skill and judgement in that regard. That said, there are several best practices that you should consider.
OpenMFE Devtools
OpenMFE is not prescriptive when it comes to the “how” of your implementation. But to ensure contract validity and integrity as well as runtime compliance, we are providing some development tools.