The Open edX micro-frontend framework has some problems and growing pains which we’re trying to solve in a variety of ways. This is an attempt at cataloging those so we can understand which of them the frontend composability project (FC-0054) should be responsible for fixing, vs. things like the frontend plugin framework or improvements to Tutor, which are both arguably outside the scope of this work.

Vision

• Independent Deployment of MFEs

• Composable UI

• Efficient Development

• Shared Dependencies

• Less dependency overhead

• More consistent dependencies

Potential Solutions

These are things we think we can reach for to solve the problems described below; each pain is annotated with which of these solutions addresses it (up for debate, this is my gut interpretation of which actually fixes it. For instance, adopting module federation or piral may give us some options regarding multi-tenancy, but we still don’t get that without additional, dedicated effort. People Processes is here because many of the pains we described in the original FC-0007 description, and our upcoming frontend modules OEP, aren’t actually things that are solved by frontend composability itself, but which require us to follow-through with a process to ensure quality and consistency.

• Plugin Framework

• Tutor Improvements

• 🧱 Module Federation

• Piral

• People Processes

• Multi-tenancy Support

Pains (with associated potential solution icons)

• Consistency

  • 🧱 Reusable Component Consistency

    • MFEs have have different versions of Paragon, resulting in UI inconsistencies

  • 🧱 Shared Organism (header/footer/navigation) Consistency

    • MFEs have different versions of shared components like the header and footer, resulting in navigation inconsistencies

  • 🧱 Branding/Styling Consistency

    • MFEs have different versions of the brand and paragon, resulting in visual inconsistencies

  • User Experience Consistency

    • MFEs do not have a unified user experience, since they were all made at different times.

  • 🧱 Dependency Consistency

    • Inconsistent dependency versions between MFEs have different capabilities and bugs.

  • Testing Standards Consistency

    • MFEs have been written with different testing standards

  • Technology Consistency

    • Different MFEs sometimes use different libraries and paradigms, like redux, react-query, redux-saga, react context, font awesome, paragon icons, etc.

  • Documentation Consistency

    • MFEs have been written with different documentation standards and levels of completion.

  • Deprecation Standards

    • We lack consistent application of DEPR standards and processes across MFEs.

• Performance

  • 🧱 Build time

    • Because each MFE bundles its own complete set of dependencies, and because there are so many, build time suffers.

  • 🧱 Bundle size

    • Because each MFE bundles its own complete set of dependencies, our bundle sizes are much larger than should be necessary.

  • Development Cycle Time

    • The tools we need to manage running so many MFEs slow down development for any given MFE. (i.e., in Tutor, making a change in one MFE means they all need to be rebuilt since they share an image)

• Development

  • 🧱Decoupled Cross-MFE Composability

    • We have no good way displaying components from two MFEs (think domains) at the same time short of creating a hard-coded build-time dependency between the two.

  • Development Resource Consumption

    • Running so many development servers, one for each MFE, is very resource intensive.

  • Library Development Complexity

    • Developing libraries means fooling an MFE into using local sibling code, which can be brittle.

  • 🧱 Dependency Maintenance Burden

    • Each MFE bundles its own version of all MFE dependencies, drastically increasing the number of dependencies we need to keep up-to-date overall.

  • Repository Proliferation

    • We rely on creating separate repositories frequently as a way of being flexible (separating deployments, custom libraries, overrides, etc.) which increases complexity for all the above roles.

  • Documentation Quality

    • A lack of complete documentation makes the platform more difficult to work with.

• Customization

  • MFE Component Overrides

    • Overriding an MFE component is not supported

  • Limited Non-Invasive Customization

    • We have few ways of customizing MFEs short of forking them.

  • Multi-tenancy Configuration

    • Configuring an instance to use different MFEs and brands per tenant is not supported.

• Autonomy

  • 🧱 Independent Deployment