In the latest Open edX release, Maple, the Learning micro-frontend (or MFE) will now be the default student LMS experience. 

What new features are present in the Learning MFE?

We’ve added some great things into the Learning MFE! Course outlines now feature automatic effort estimates for subsections. Here is what estimates look like on the course outline page – this shows the estimated time to read and watch videos, plus the number of activities, for the course section “Self-Care for Learning”:

Additionally, there are some new in-course celebrations of progress – a modal popup when a learner finishes their first section:

and a 3-day streak celebration modal popup:

Progress milestones and streaks are configurable on the backend. Also configurable is a landing page aimed at learners who have just completed a course.

Learner Impact

The new features in the Learning MFEs are tools to increase learner success rates. The automatic effort estimate feature empowers learners by providing data to help them make more effective time management decisions, in both self-paced and supported learning environments. The feature is part of a broader strategy to support personalized learning schedules, which may increase course completion rates by 50%. Progress milestones and learning streak pop-ups encourage self-check-ins and reinforce consistency through positive feedback loops. Learners who engage with course materials 3 days in a row are 20x more likely to pass their course than those who don’t. 

What are MFEs?

Open edX micro-frontend applications are small React applications that can be built and deployed independently. MFEs are dynamic client-side rendered JavaScript applications that enable safer and more rapid deployments of new code to live production systems. They also pull small bits of focused code out of the edx-platform monolith, making it easier for your team to develop new features and contribute upstream. Learn more about MFEs here. 

The Learning MFE renders all learner-facing course pages, such as the course outline, progress page, and course content. It was optionally available in the Lilac release while the “legacy” experience was the default; in Maple that situation is reversed, with the Learning MFE provided as default and the legacy experience optionally available for those who desire. Be aware, however, that the legacy experience is expected to be retired in the Nutmeg release next June.

What, if any, limitations are there?

Note that all course videos must have durations in edx-val, and courses need to be republished, for the course outline effort estimates (detailed above) to show up.

Entrance exams are slated to be deprecated and have not been implemented on the Learning MFE; courses with entrance exams will trigger an error if viewed through the MFE. Course search is unavailable. Also, any Custom JavaScript Problem blocks which contain JavaScript that modifies other problem blocks or accesses any parent elements will now fail – this change was made to better secure your installation.

On the more esoteric side, non-standard course hierarchies will not render in the MFE (all Studio-authored courses follow the correct hierarchy; non-standard ones can only be created by hand-authoring content in OLX). Also, course content in “old Mongo” (where the course key pattern ORG/COURSE/RUN is used instead of the new pattern, course-v1:ORG+COURSE+RUN) cannot be served by the MFE. It’s highly unlikely that either of these two issues apply to your installation.

To revert your installation to using the Legacy (LMS Django-rendered) experience, site operators can use two flags (1) and (2) either globally or per-course-run. Do note that these options, and the Legacy experience, are expected to be removed in Nutmeg.

Are there other weird things I should know?

Funny you asked! You should be aware that for now, for authors, previewing course content as a learner will continue to use the Legacy experience. The legacy experience will also serve the following content: the XBlock student view, the Instructor Dashboard, and the following tabs: Discussions, Wiki, Teams, Notes, and any static tabs (custom pages).

Additionally, there are some minor stylistic differences between the Legacy experience and the MFE that you may notice.

Site Operations: How do I deploy the Learning MFE?

Check out the micro-frontend base plugin for Tutor. Tutor is the Docker-based Open edX distribution, both for production and local development.

It’s important that the domain name for your Learning MFE instance is added to the CORS_ORIGIN_WHITELIST for ecommerce, discovery, lms, and studio. 

Where should I go with questions, or to get help?

To read more about these changes, check out the Maple release notes as well as the Maple technical changes document. Additionally, the Open edX community is available for help in a number of ways. You can post questions about software development in the Discord development topic, or questions about site operations in the Discord DevOps topic. On Slack, find frontend developers in #frontend-working-group and SRE/DevOps assistance in #ops.

Thank you!

Finally, I want to give a shout out to the Build-Test-Release working group (#wg-build-test-release in Slack) who have shepherded the Maple release and worked hard to make sure that the Learning MFE – and MFEs in general – worked properly for Open edX installations. Interested in helping out with the Nutmeg release? Release planning begins now! Take a look at the how to join BTR instructions, and don’t be afraid to reach out in Slack with questions.