Micro-frontend Plugins

[e0d]

Abstract

The ability to extend the user interface of the Open edX Platform is a prerequisite for scalable innovation, customization, and experimentation. It allows us to maintain a small, stable, and extensible platform core, and is a vital part of our micro-frontend customization capabilities.

Micro-frontend plugins (a.k.a., "Experience Plugins" or "XPs") give us a dramatic increase in flexibility in how we build and deploy our user experiences. They enable an increase in team autonomy for feature development, modularization of cross-cutting features, code reuse, and approachable experimentation and extensibility.

Approach and Status

MFE plugins may be implemented with variety of technologies, such as LTI, plain iframes or federated modules. The initial implementation has focused on iframe-based plugins, as they're simpler than LTI, but more secure than module federation, and feel like a "sweet spot" that's most applicable to the community's needs.

We intend to write an OEP on Micro-frontend Plugins describing the above approaches and their relative strengths and weaknesses in more detail. @davidjoy is writing an initial draft (openedx/open-edx-proposals#259, openedx/open-edx-proposals#287)

An initial implementation of iframe-based plugins is currently sitting in a pull request in frontend-platform: openedx/frontend-platform#235

Note that this capability depends on improved micro-frontend configuration capabilities. Our current environment variable-based approach is insufficient for build-time MFE configuration. See related tasks below.

Related issues:

• Discovery: MFE Extensibility and Pain Points axim-engineering#146
• Support for JS-based config in frontend-platform wg-frontend#11
• iframe-based Experience Plugins support in frontend-platform wg-frontend#13
• Support for JS-based config in tubular wg-frontend#12
• Proposal: Application headers and footers v2.0 wg-frontend#41
• Standardize plugin slots wg-frontend#178

Related Repositories

• https://github.com/openedx/frontend-plugin-framework

Related PRs

OEPs

• OEP-XXXX: Micro-frontend Customization open-edx-proposals#259
• OEP-XXXX: Micro-frontend plugins open-edx-proposals#287

Implementations

• feat: iframe-based experience plugins frontend-platform#235
• feat: slot component for dynamic plugins frontend-app-communications#184
• Convert "Pages & Resources" page to a plugin system frontend-app-authoring#638