[CLOSED] FC-0007 - Modular MFE Domains Discovery

This Project will gather requirements and specifications and propose an architectural solution to address the motivations and discovery questions proposed in the Open edX Proposal OEP-XXXX: Modular Micro-frontend Domains. These are summarized below:

Abstract:

Open edX implements a modular front end strategy in order to compartmentalize development of the platform’s front end user interface. Each Micro Front End (MFE) is responsible for all aspects of its composition and display including routing, user navigation, implementation of common platform UI and UX, authorization, runtime dependency management etc…

We would like to investigate and propose a modern solution that can provide a runtime container for Open edX MFE’s to address the short comings of the current approach:

• Inconsistent user experience and navigation across MFEs

• Multiple independent implementations of common UX paradigms and UI components

• No tooling or plugin layer to facilitate MFE development, and runtime interoperability

• Development and build complexity and inefficiency resulting from multiple repetitive dependencies and implementations

• Inefficient use of network and browser resources during runtime resulting from multiple repetitive dependencies and implementations

• Lack of consistent enforcement of project quality including documentation, testing automation, build tooling, deprecation

In addition, in order to simplify deployment of the open edX platform, this project will propose an solution that can facilitate the migration of the front end into distinct top level domains, initially focused on LMS and CMS activities. Each domain container would have the ability to host its own distinct set of MFE’s and impose it’s own business rules, subject to constraints imposed by the container framework iteself.

Solution Requirements:

The following requirement categories broadly describe the features that a solutions should address. A more detailed list is available at this page and includes links to the source of the requirement where appropriate:

UX:

1. provide routing and navigation across MFEs

2. Provide a common user experience, including common headers, footers, and components (Paragon)

3. Provide common runtime configurations for internationalization, device responsiveness, accessibility etc…

4. Provide global error handling

Other:

1. Container services specification and lifecycle (events/MT/Callbacks, shared state, shared dependencies, MFE loading and unloading - npm, lazy load, webpack)

2. MFE runtime specification and lifecycle (initialization, unloading, runtime SDK)

3. Ease of Migration of existing MFEs

4. Page load and network optimizations

5. Compile and Build time optimizations

6. Devstack integration, development tooling and ease of development

7. Deployment configuration and branding (eg: Open edX v edX)

Proposed Solutions:

The following solutions will be examined and compared, as well as additional ones that may be uncovered during this project:

1. Run-time integration via JavaScript

2. Run-time integration via Web Components

3. Webpack Module Federation

4. single-spa

5. Piral

Deliverable:

Deliverables for this project will include a clearly articulated proposed solution based on one of the frameworks above, or a comparable framework, and how well they address the requirements as documented during this project.

They will also include a working prototype of the and open edX LMS Front end domain implemented using the proposed framework and deploying a converted set of MFE’s. In addition to highlighting key features of the chosen solutions that address the requirement sets above, the prototype will help frame the cost of converting existing MFEs to the new paradigm by documenting the conversion process on a representative set of MFEs.