Proposal: Course About page, Index Page, and Course Catalog MFE conversion
View the GitHub ticket for proposal status updates
Overview
This proposal aims to transition the Course About, Catalog, and Index pages of the Open edX platform from legacy architecture to MFE. The goal is to address maintenance challenges, improve user experience, and increase the platform's competitiveness. By adopting MFE, we will enable easier integration of new features, improve performance, and increase retention rate.
Problem
Overview of Current Challenges with Legacy Architecture for Course About and Catalog pages.
Maintenance Complexity: Maintaining both legacy and MFE pages whithin the OeX is time-consuming and costly. As other interfaces has already transitioned to MFEs, this pages require legacy approach for customizations which should be maintained and supported separately from other solutions in OeX system.
Customization Difficulty: Course catalog and about pages are challenging to customize in the current system due to limitations of legacy code, and tech debt around those functionalities. Course creators cannot modify search filters/facets without additional development to these pages, leading clients that don’t want to invest into 3rd-party systems like Wordpress to opt for other LMSs that allow such customizations for the catalog.
Integration Limitations: The legacy architecture lacks necessary attributes for smooth service integration. New features like a video player or taxonomy are challenging to incorporate into legacy pages, and it requires maintaining separate solutions to integrate other core features into these pages.
Pluginization Issues: The legacy architecture prevents the creation of new frontend and backend plugin types for these pages, that are more distinct from comprehensive theming, and can be reused in the Open edX community.
Adaptability on Mobile App: Course About page on mobile apps is not adaptive due to hard usage of custom HTML and specific layout of the page. It is difficult for students using mobile app to find information they need about the course.
Key Use Cases And Benefits
Students: Improved UX and performance will enable students to quickly find the information they need about courses, enhance course search functionality, and facilitate easier discovery of courses they are interested in.
Open edX Community: Moving from legacy architecture to MFE is likely to attract more community contributions, leading to the development of new plugins for the Course About and Course Catalog pages. This will also unblock new developments in Catalog domain, enabling the development of new features at a lower cost.
Educational Institutions: With a more advanced API layer to support an easier integration with other systems, reduced maintenance burdens, and improved overall platform performance for catalog pages, educational institutions can meet more effectively their students' needs.
Open edX partners and Operators: Decreased maintenance costs may improve user retention rates, making Open edX a more attractive option compared to other LMS systems. As the customization complexity is decreased, Open edX vendors and operators will be able to easily adjust Catalog and About pages to unique business needs for the clients. This will benefit Open edX partners by potentially increasing their client base.
Solution
A standard approach can be taken, using existing APIs, components, and solutions where possible to ease the initial migration. The key goal is to directly port existing legacy functionality to the updated new MFE interface.
You can see the change in the following prototype: MFE & Plug in slots proposal
A new MFE application will be created to host Catalog domain-related user interfaces.
The API Layer in edx-platform is slated for refactoring to enable seamless integration with the new MFE interfaces covering the Course Catalog, Index, and Course About pages.
The Index page will be reimplemented as an MFE:
The Course Catalog page will be redesigned using the Paragon Design System, aiming to achieve full feature parity with the existing legacy Course Catalog page in the MFE:
The Course About page will be reimplemented in the MFE, preserving its core functionality:
Enable frontend pluginization on Course About, Course Catalog, and Index pages, to meet user needs without extensive customizations.