Micro Frontend ReactJS with MUI for Effective Web UI

Introduction to ReactJS

Introduced in 2013, ReactJS was created and maintained by Facebook. It is a design approach that organizes a web application into tiny, independent frontend services, thus, helping us build an effective WebUI. Moreover, this approach leverages the unique capabilities of Material-UI (MUI) and ReactJS, offering a uniform, scalable, and adaptable user experience.

Building Micro Frontends with React JS

In ReactJS, developers divide a frontend application into smaller, independently deployable parts called micro-frontends, each handling a specific feature or capability. Working on isolated components using this architectural pattern facilitates easier maintenance, scalability, and independent deployment for developers. Moreover, ReactJS micro-frontend implementation can leverage different methods, including iframes and module federation. These approaches contribute to enhanced flexibility and adaptability in building robust web applications.

Mirco Frontend ReactJS Architecture

blog-image
Mirco frontend ReactJS Architecture Picture Representation

 

 

 

 

 

 

Below is a brief overview of the key elements and concepts of a React micro-frontend architecture:

  1. Communication between Micro-frontends: A consistent user experience across micro-frontends depends on seamless communication. Potential solutions for managing shared or global states include Redux, React Context, and various other state management frameworks.
  2. Navigation and Routing: The container application manages routing and navigation. Each micro-frontend associates with a certain route or set of related routes within the container application.
  3. Webpack Module Federation: If you’re using Webpack, use Module Federation to enable dynamic micro-frontend loading. At runtime, this enables the integration of independently installed React apps.
  4. Testing: End-to-end integration and unit testing are critical.

How ReactJS differs from Micro Frontend ReactJS?

How ReactJS and Micro Frontend ReactJS differ?
Representation of ReactJS and Micro Frontend ReactJS differences

About MUI

Google developed Material Design as a language known for its clean and modern appearance. Material-UI allows developers to build React applications with a consistent and visually appealing user interface.

Implementation

  1. First, select the folder in which you want your code to be located. Open Command Prompt and follow the below commands

    Command to Create a Micro Frontend ReactJS application
    
    npx create-mf-app
  2. Commands to customize the Properties of the created Micro Frontend ReactJS Application
    Customization of MFE Application properties
  3. The Folder Structure for Micro Frontend ReactJS Applications

    Folder Structure as a part of Implementation
    Folder Structure

    Detailed description of the folder structure in React JS
    public/: The application’s main HTML file and static assets are located in this folder.
    src/: This folder is the primary location for source code.
    components/: Reusable React components that are specific to this application.
    services/: Other tasks make use of service or utility functions, including API calls.
    shared/: Consists of shared elements that are compatible with various micro-frontends and plugins.
    microfrontend1/ microfrontend2: Individual micro-frontend directories are located in microfrontend1/, microfrontend2.
    Similar to the main program, each micro-frontend has a source code structure of its own.

  4. Sample code of a component in Micro Frontend ReactJS Application
    Sample MFE code
  5. Global commands to install React-dom and Node modules

    npm install react-router-dom
    npm i
  6. Command to run a Micro Frontend ReactJS Application
    cd Home
    npm start
Commands for MUI installation
  1. Command to Install the MUI
    npm install @mui/material @emotion/react @emotion/styled
    
  2. To Install the MUI Components
    npm install @mui/material @mui/styled-engine-sc styled-components
  3. Command to Install the MUI Icons
    npm install @mui/icons-material
  4. The Plugins to be added  for Remote ComponentRemote Component PluginsExplanation about the Plugin Structure
    “Remote” is the name assigned to the remote module.
    “Remote@http://localhost:8081/remoteEntry.js” specifies the URL (http://localhost:8081/remoteEntry.js) where the remote module’s entry point (remoteEntry.js) is located. “The current Micro Frontend can dynamically load components or modules from the specified remote.”
    “./header”: “./src/components/header.jsx” exposes the header.jsx component located in ./src/components/ directory with the alias ./header.
    “./footer”: “./src/components/footer.jsx” exposes the footer.jsx component located in ./src/components/ directory with the alias ./footer.
    This exposure of components makes them available for consumption by other Micro Frontends that dynamically import them using the specified aliases.
  5. The Expected output of Individual components of a Micro Frontend ReactJS Application basic results along with their customized propertiesOutput of Home ApplicationOutput of Remote Application

Scenario: Legacy Monolithic Application with Multiple Development Teams

Consider an e-commerce platform that has expanded over the years into a massive monolithic front-end application. The platform has several components, including user profiles, product listings, etc. The difficulties can be as follows:

  1. Slow Development Cycles: Teams need to cooperate closely, resulting in bottlenecks.
  2. Dependency Conflicts: Different teams working on unique aspects find dependency issues, making upgrading libraries or adopting new technologies tough.
  3. High Coupling: The monolithic structure leads to significant coupling between different application sections. Changes in one area may accidentally influence other areas, leading to unintended effects.

Micro-Frontend with ReactJS Solution

In this scenario, implementing a micro-frontend architecture in ReactJS might alleviate these challenges:

  1. Independent Development: To effectively manage the development process, divide the monolithic application into micro-frontends.
  2. Reduced Coupling: Designers implement micro-frontends independently to minimize the dependencies among various application sections. Teams may create and iterate on their micro-frontend without harming others.
  3. Easier Testing: Testing efforts are more targeted, with teams responsible for building tests for their micro-frontends.

Real-time Examples using Micro Frontend ReactJS

  1. E-commerce Platforms
    Large e-commerce platforms with multiple teams working on different sections (such as product catalog, cart, etc) can benefit significantly from micro-frontends.
  2. Healthcare Applications
    Healthcare systems with diverse modules such as patient records, appointments, etc can effectively adopt micro-frontends for modular development and easier maintenance.
  3. Gaming Platforms
    Online gaming platforms often have multiple features, such as user profiles, game lobbies, and payment systems.

Conclusion

Micro Frontend can be implemented using React.js in various scenarios and projects, particularly those involving large, complex applications. For instance, if your online application needs to share features or components with a desktop or mobile application, this method can be advantageous.

About the author

Laharika Chinthakayala

I am Laharika Chinthakayala, a software developer from the AppDev.NET Team. I am grateful for the opportunity to lead the investigation into Micro Frontend ReactJS with MUI. I enjoy experimenting and working with Micro Frontend ReactJS as it provides developers with the flexibility to create modular, independently deployable frontend components that preserve web page design integrity and deliver an incredible user experience throughout the application. My sound knowledge of Microfrontend ReactJS has motivated me to write blogs and encourage others to do the same.

Add comment

Welcome to Miracle's Blog

Our blog is a great stop for people who are looking for enterprise solutions with technologies and services that we provide. Over the years Miracle has prided itself for our continuous efforts to help our customers adopt the latest technology. This blog is a diary of our stories, knowledge and thoughts on the future of digital organizations.


For contacting Miracle’s Blog Team for becoming an author, requesting content (or) anything else please feel free to reach out to us at blog@miraclesoft.com.

Who we are?

Miracle Software Systems, a Global Systems Integrator and Minority Owned Business, has been at the cutting edge of technology for over 24 years. Our teams have helped organizations use technology to improve business efficiency, drive new business models and optimize overall IT.

Recent Posts