Composable Micro-frontends Glossary

Let’s just level set on some terms used throughout FC-0054. A lot of these overlap, but are used in different contexts.

MFE

Micro-frontend, yo. Not a perfect acronym since “frontend” is one word.

Compose, Composability, Composition, etc.

This is the ability to have more than one independently deployed MFE on the same browser page at the same time. You load a URL and parts of the page get pulled from multiple MFEs, each of which was bundled and deployed separately. This capability is the main thing we’re trying to get out of this work, because it fundamentally unlocks a bunch of downstream possibilities around sharing code, improving performance, decreasing maintenance burden, and preserving MFE independence.

Shell

The “shell” is the top or outer-most independently deployed application when composing frontends together.

Module

An MFE will export one or more modules, which can be loaded at runtime.

Host

An MFE that loads runtime modules from other MFEs.

Guest

An MFE being loaded at runtime by a host MFE.

Remote

The webpack term for a guest (see above) MFE. A remote contains one or more modules which were bundled as part of its independent build process.

Page

The shell will contain a bunch of high level “pages” or routes, each of which is a module from an independently deployed guest MFE. Pages may themselves load Plugins (see below), but they’re both just modules. The only difference is semantics and how much of the page they generally use.

Plugin

A Host MFE can load modules as a “plugin” within a page. Again, pages and plugins are effectively the same, it’s just a useful distinction sometimes.

Slot

An area of the page where a plugin (or page) can be loaded. Implies that content in that area is dynamically configured and could be overwritten. It may also have a default module.

Domain

An MFE may contain interfaces from one or more logical domains of the overall system. Studio, learning, learner dashboard, account settings, authentication, profile, etc., can all be considered domains. A domain may have subdomains, like how “learning” has course home and courseware inside it, or “authentication” has both login and registration. These are the fracture planes in our user journeys and code, and we find composition boundaries along their edges.