Micro-frontends (MFEs) in Open edX#

In Open edX, MFE refers to micro-frontend. It is a new approach to building the platform’s user interface (UI). MFEs break this down into smaller, independent functionalities. Each MFE is a mini-application responsible for a specific UI part, such as the learner dashboard or the course content view. Also, MFE components are loosely coupled with the main Open edX platform, meaning changes in one MFE do not necessarily affect others.

These components are typically built using React, a popular JavaScript library for user interfaces.

In terms of architecture, MFEs offer advantages like:

  • Improved scalability: New features and functionalities can be added by developing new MFEs without affecting existing ones.

  • Easier customization: MFEs can be easily customized to meet an organization’s needs.

  • Easier maintenance: Developers can focus on specific areas of the UI without needing to understand the entire codebase. Because MFEs are independent, separate teams can develop and maintain them, making fixing bugs and adding new features easier.

  • Enhanced developer experience: Smaller codebases and independent development cycles make it easier for developers to work on the platform.

  • Faster development: With MFEs, developers can work on different UI parts concurrently. This can lead to faster development cycles.

Note

The Open edX community has developed the Tutor MFE, a plugin that makes it possible to easily add micro frontend (MFE) applications on top of an Open edX platform that runs with Tutor. Learn more about Tutor MFE here.

MFEs that You Should Know:#

  • Profile MFE

  • ORA grading MFE

  • Learning MFE

  • Gradebook MFE

  • Discussions MFE

  • Course Authoring MFE

Profile MFE:#

The Profile MFE, also known as frontend-app-profile, manages user profile information. It is a React-based application that provides functionalities for users to:

  • View their profile details, including name, email, bio, etc.

  • Change their profile picture.

  • Manage privacy settings for their profile information.

Here are some key aspects of the Profile MFE:

  • Independent functionality: The MFE operates independently of the core Open edX codebase, making development and updates easier.

  • Improved user experience: It provides a dedicated space to manage their profile information with a potentially more user-friendly interface.

  • Modular design: The MFE architecture facilitates easier customization for specific organizational needs.

Profile MFE example image

ORA grading MFE:#

The ORA grading Micro-frontend in the platform is called frontend-app-ora-grading. It is designed to enhance the grading experience for Open Response Assessments (ORAs).

The benefits of the ORA grading MFE are:

  • Streamlined grading: It provides a more efficient workflow for instructors to review, evaluate, and grade student submissions for ORAs.

  • Richer previews: It allows for better visualization of submitted content, potentially including files and text.

  • Rubric integration: It enables instructors to easily display the grading rubric alongside the student’s work for clear evaluation criteria.

This MFE will eventually replace the on-platform grading functionalities for ORAs within the Open edX interface.

ORA Grading MFE example image.

Learning MFE:#

The Learning MFE in the Open edX platform, also known as frontend-app-learning, is the core component responsible for rendering all learner-facing course pages. In simpler terms, it controls what students see when they interact with course content.

  • Course Display: It renders various elements of a course, including the course outline, progress tracking, and the actual course content itself (video lectures, readings, quizzes, etc.).

  • Improved Learner Experience: The MFE can introduce features designed to enhance the learning experience for students, such as progress milestones, automatic effort estimates, and learning streak pop-ups (depending on the Open edX release).

  • Modular Design: Like other MFEs, the Learning MFE is independent, allowing for easier development and updates focused on the learner experience.

The Learning MFE became the default courseware experience with the Olive release of Open edX.

Gradebook MFE:#

The Gradebook MFE, also known as frontend-app-gradebook, is an instructor-only tool for viewing and managing student grades.

Here is what the Gradebook MFE offers instructors:

  • Individual and Aggregated Grades: It provides a comprehensive view of individual student performance and overall course grades, allowing instructors to analyze student progress.

  • Search and Filter: The MFE facilitates filtering and searching for specific students or assignments, making navigating large courses with many students easier.

  • Potentially Improved UI: Compared to the legacy gradebook interface, the MFE might offer a more modern and user-friendly design for managing grades.

Gradebook MFE example image.

Discussions MFE:#

The Discussions MFE is a relatively new feature that provides an improved forum experience for course students. It is known as frontend-app-discussions and focuses on enhancing communication and collaboration within courses.

  • Improved Organization: The MFE introduces discussion categories and filters, allowing students to find relevant conversations more easily. They can filter by “My posts,” “All posts,” “Topics,” and posts from other students.

  • Enhanced Navigation: It offers a more user-friendly interface for navigating discussions, making it easier to follow threads and participate in conversations.

  • Streamlined Posting: The MFE might simplify creating new discussion posts and replies.

The community introduced the Discussions MFE in the Olive release of Open edX. If you are using an older version, you will likely experience the legacy discussions forum.

Course instructors can choose to enable the Discussions MFE for their courses through the Pages & Resources view in the Course Authoring MFE.

There might be minor formatting inconsistencies between content created in the Discussions MFE and the legacy discussions forum.

Discussion MFE example image.

To learn more about how to manual enable or disable a discussion MFE for early versions of the platform, you will go to Pages. See Create Your Course in Open edX Studio video.

Course Authoring MFE:#

The Course Authoring MFE, or frontend-app-course-authoring, is a powerful tool designed specifically for instructors and course creators. It provides a modern and modular interface for managing various aspects of a course.

Here are some of the key functionalities:

  • Content Creation and Management: Instructors can use the MFE to create and manage different course elements, including lectures, readings, quizzes, and other learning activities.

  • Pages & Resources: This section within the MFE allows instructors to configure various course applications and tools, such as progress tracking, discussions, notes, and more. They can decide which tools are available to students enrolled in the course.

  • Greater Flexibility: Instructors can customize their students’ course experience by selecting the most relevant tools and activities through the Pages & Resources section.

The Course Authoring MFE became included by default with the Olive release of Open edX. If you are using an older version, you might still have the legacy Studio interface for course creation.

Administrators can choose to turn off the Course Authoring MFE entirely if needed.

ORA Grading MFE example image.

Do You Need Help with MFEs?#

Micro-frontends will come to improve Open edX initiatives. Its adoption has been progressive and optional in the latest versions, such as Nutmeg, Olive, and Palm but eventually, they will be the primary interface for users on this platform. At edunext, we have been working on this process for several years, and we will be ready to accompany and guide you on the way so that you can get the most out of the tools and, in this way, continue to improve the experience of your users and strengthen your E-Learning initiative with Open edX. Contact us.