Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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 being composed into another, independently deployed MFE. This happens at runtimewill 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 child guest (see above) bundle of code from a separate build process.

Parent

The MFE that loads code from a remote bundle, resulting in a child MFE being composed into its UI. It may be the Shell application, or it may be one of the shell’s children loading content from another downstream MFEMFE. 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 likely its own a module from an independently deployed child MFE.

Plugin

Another way of thinking about child code being loaded into a parent when it doesn’t take over the majority of the page, but is loaded into a smaller part of itguest 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.