Microfrontends using React: The Complete Guide

Frontend development comes with a lot of challenges. Finding ways to simplify the development process and accelerate the execution of tasks is the goal of every development team. Having team members collaborate on tasks when working on a large and complex product is extremely difficult. Thankfully, microfrontend architecture with react offer solutions to these challenges.

Microfrontends entail the splitting of frontend monoliths into several smaller, easier-to-manage pieces. This development architecture is crucial as it can improve the effectiveness and efficiency of developers working on frontend code. In this article, we will explore what micro frontends are with react, as well as their benefits, downsides and implementation options, and microfrontend architecture. We will also provide examples in order to help you grasp everything on a practical level. 

Table of contents

• What are Microfrontends?
• How to Develop a Microfrontend?
• Benefits and Tradeoffs of Microfrontends
• How to Build a micro frontend with React?
• Conclusion
• FAQs

This blog is also available on Medium

What are Microfrontends?

Microfrontends are a recent development pattern in which web application UIs are put together from autonomous components.

These components can be built by different teams using different technologies. The architecture of microfrontends is similar to that of backends, which are built using semi-independent microservices.

Over the years, the concept of microfrontends has gradually been gaining popularity and acceptance in the developer space. Just like microservices best practices on the backend, each application (in microfrontends) exists separately with a well-defined function or objective.

For example, a typical website has a Home page, About us page, Services page, Checkout page, Payment page, and more. According to the microfrontends concept, each page can be developed as a single, autonomous application. 

The software development teams can also be divided into specialized teams. Therefore, a team of developers can be responsible for writing the Home page, while another team is coding the Services page, and so on. 

This approach comes with a lot of advantages. The microfrontend architecture was designed to help engineers overcome some challenges that come with the current SPA frontend development.  

With this recent and trending frontend development approach, developers can simplify tasks, encourage collaboration, improve the effectiveness & efficiency of the process, and significantly increase productivity.

Brief History of Microfrontends

In 2011, Microservices were explained during an event hosted for software architects. At the time, it was a development style many companies were experimenting with. With time, the benefits of Microservices became successful as a backend development architecture. 

For evolution purposes, Thought Works came up with the term MicroFrontends in Nov 2016, which is a frontend architecture similar to microservices. Companies, therefore, started experimenting with frameworks that could enable them to create frontends using the new architecture.

In Nov 2017, Single-Spa was recommended by Thought Works for microfrontend implementation. Next, in 2019, Martin Fowler wrote a popular article titled: MicroFrontend, which promoted microfrontend architecture. In late 2020, Zack Jackson released Module Federation, a plugin included in Webpack 5. 

The Module Federation revolutionized the microfrontend space. Organizations have now adopted the plugin to move problematic monolithic applications to the microfrontend. That said, microfrontends are still in their “infancy” and we can expect to see more revolutionary changes in the future. 

How to Develop a Microfrontend?

Having defined what a microfrontend is and its brief history, let’s now explore different ways you can develop a microfrontend. You can build a microfrontend using the following three approaches:

• With Module Federation
• With Web Components
• With IFrames

Check out our comprehensive guides on Top NodeJS Frameworks for 2022 and Why Use Kubernetes for Your Enterprise?

1. Module Federation

Module Federation, a plugin by Webpack 5, enables you to develop a range of different builds that are not dependent on one another. As a result, they can be built and launched individually. With the plugin, you can quickly create multiple different functions that come together to make up a single product.

What Makes Module Federation Interesting?

There are some features that make Module Federation worth considering for your development needs. Here’s why you should use it:

Resolve Dependency Challenges: The plugin comes with functions that allow developers to resolve dependency issues. 

Great Code Sharing: It offers developers a better way to share code. Developers can expose any code for any application that Webpack supports. 

It isn’t Environment Dependent: You can apply shared code on diverse platforms. The fact that it’s not dependent on any environment eradicates any challenge related to incompatibility. 

Module Federation Configuration

The plugin needs to be configured for appropriate use. You need to know how the configuration works to make the most of the software. Here are the major configuration options you need to be acquainted with:

Name:  This refers to the exclusive name of the exposed container. Basically, the name you input when initializing ContainerPlugin, used by Module Federation, becomes the container’s relative path.

Library: The library is what dictates how the exposed code is stored and accessed. The library function allows you to configure it further in order to determine the name and type.

Filename: This is the filename for the output bundle. In addition, it also functions as the bundle’s entry point.

Remote: The remote configuration option has to do with the list of static remote modules. Local modules can access these remote modules.

Shared: This configuration option enables you to share your node libraries. This option also comes with a range of configuration functions that enable you to determine how libraries are shared.

There are also other Webpack configuration functions you need to understand, including Output, Experiments, and Optimization. A good understanding of these configuration options is necessary to be able to develop a microfrontend with Module Federation properly.

2. Web Components

Web components are low-level browser application programming interfaces that enable developers to extend the browsers using new components. In addition, web components offer a standard interface for defining or determining new components. 

This tool is useful for contemporary web design & development, where developers leverage components to house user interface capabilities. With web components, you can develop components that utilize HTML and DOM API used by other front-end frameworks. 

This implementation is interesting because you enjoy the flexibility of developing your own components without losing interoperability. Once you’ve built a web component, you can apply it in a wide range of applications since web components are functional wherever the web is functional. works.

The Three Main Concepts of Web Components

There are three concepts of web components you need to comprehend: 

Custom Elements: These are JS APIs that enable you to build custom HTML elements. When developing your own HTML elements, you can dictate exactly how they behave.

Shadow DOM: This refers to a private DOM that is available only to your component. The shadow DOM is able to isolate JS and CSS.

HTML Templates: These are HTML tags you can use to build templates for your components.

3. IFrames

IFrames allows you to implement microfrontends. Basically, IFrames are HTML documents that can be incorporated into another HTML document. IFrames are embraced because they make it easy to develop a main page out of independent sub-pages. When it comes to styling and global variables not impacting one another, IFrames provide a reasonable level of isolation.

Although they are great overall, IFrames do have some downsides. IFrames are old technology old and therefore do not provide the best developer and user experience. Working with them entails certain difficulties that affect the responsiveness of your page. Nevertheless, IFrames can be used to develop microfrontends.

A leading advantage of IFrames is their ability to offer independence and a good level of isolation among microfrontends. This enables you to fully leverage the benefits of the microfrontend architecture. On the flip side, they make it difficult to integrate microfrontends with one another. Furthermore, IFrames lack flexibility and are hard to are not flexible and easy to link and& route.

Benefits and Tradeoffs of Microfrontends

A microfrontend is a new frontend architecture that resolves some of the major issues that come with the conventional monolith frontend architecture. In this section, we’re going to be taking a look at the advantages and disadvantages of micro frontends react.

Benefits of Microfrontends

1. Incremental Upgrades: Adding new features to a large, old monolithic frontend app can be both cumbersome and difficult. With micro frontends react, your team can quickly upgrade and deliver new features by breaking down the app into different pieces. Instead of approaching the frontend architecture as a single application, different parts of the application can be worked on and new features delivered separately.

This approach enables teams to apply incremental upgrades to dependencies, user experience, load speed, architecture, and more. Development teams can streamline their efforts to focus on a particular part of the product. This creates a platform for thorough decisions and high-quality implementation of new technologies – as opposed to having to approach one giant and cumbersome frontend app.

2. Simple Codebases: One of the challenges developers face is sophisticated codebases. Dealing with a complex codebase is a job of its own seeing as you need to be extra careful in order to avoid mixing things up. You can put all this in the past with a  microfrontend. This new approach breaks things down into different, smaller code bases, thus providing the simplicity you need to code with optimal clarity.

By default, the code of each frontend app will be smaller than the monolithic code. Consequently, it’s easier to work with. In addition to offering a clutter-free codebase, proper boundaries are set between components. Developers are therefore less likely to get confused or frustrated trying to fix bugs or making changes to the code.

3. Independent Deployment: Microfrontend enables independent deployment. Due to the existence of multiple frontend apps in separate builds, you can deploy each one individually.  Regardless of where the code resides or is hosted, every microfrontend is expected to have a development pipeline that enables you to build, test, and deploy.

The ability to deploy independently allows you to ship features much faster. For instance, when working with a monolith frontend app, you must wait until you have finished applying changes before you can deploy. With the microfrontend approach, a separate part of the product doesn’t prevent you from deploying a part that’s ready.

4. Autonomous Teams: The modularity of a microfrontend allows for a focus on a specific part of a product. If you have a big team, you can improve effectiveness and efficiency by dividing your team into smaller units. Each group of developers will be responsible for working on a given part of the product, thus improving focus and enabling engineers to build a specific feature with maximum efficiency.

Apart from encouraging specialization and improving the quality of the code being shipped, team management and collaboration are enhanced. Furthermore, it’s easier to know who does what when the team is small. 

The team head will also find that task allocation and monitoring become easier – compared to bigger teams. Overall, autonomous, small teams create a comfortable space which promotes collaboration and skill transfer. 

5. Tech Agnostic: Microfrontend allows you to maintain each app as a module and separate them from others. As a result, you can develop each app using different technologies, frameworks, or libraries. The ability to diversify development technologies or frameworks allows you to build robust products using the best possible tools. 

Every part of a product is different and so are the tools required to build them. Instead of being stuck with a given set of frameworks, micro frontends react give you the flexibility to freely explore development tools pertaining to each module. 

The Tradeoffs of Micro frontends with React

1. Bigger Download Sizes: Duplicate dependencies are reported to be the reason micro frontends react cause bigger download sizes. Given that every app is built with React and each has to download the dependency when a visitor wants to load a page, higher download sizes result.

For example, here’s how micro frontends react happens: a user has to download React more than once (multiple times) as they move from one page to another – given that every microfrontend has a copy of React. This is a major architectural concept that could significantly impact load time, which affects user experience and conversion rate.

However, there is still the possibility for individual pages to load faster at the initial fast load speed. That said, subsequent navigation will be slower as users must reload the same dependencies as they move from one page to another.

2. Differences in Environment: It can be disastrous if the development container is different from the production container. Microfrontend architecture enables developers to create separate frontend apps without being hindered by the microfrontends being built by other development teams. This decentralized approach makes development faster and a lot easier.

However, developing in an environment which differs from the production environment comes with a serious problem. A microfrontend will be broken or behave differently after deployment to production if the development-time container is different from the production container. A key sensitive part of this issue is the global style that could be part of the container or other microfrontends.

The remediation process is simple. When building locally in an environment that behaves differently from the production environment, it is advisable to integrate and deploy microfrontends to production-like environments regularly. 

In addition, proper testing should be carried out regularly to ensure integration problems are spotted and fixed on time. This will go a long way to minimizing this potential tradeoff. You need to evaluate the risk of integration challenges for every project you intend to execute with microfrontends.

3. Management Complexity: The microfrontend decentralized approach usually leads to a complex range of small teams and resources that can be difficult to manage. Microfrontends make for more things to handle. Depending on the size of a project, there will be more repositories, tools, development pipelines, servers, domains, and so on. 

In light of the above, it’s advisable to consider the responsibility that comes with handling decentralized development architecture before adopting it. You need to have enough automation on the ground to be able to provision and cope with the proliferation of resources.

When it comes to managing a development process, using microfrontends means that decisions concerning tooling and coding best practices will be more decentralized and will not be under the control of the central management. Adapting microfrontends requires the user to be comfortable with having less control over important decision-making processes. 

4. Compliance Issues: Maintaining uniformity across many independent frontend codebases can be difficult. It takes excellent leadership to ensure quality, consistency, and governance are upheld across all teams. Compliance issues are bound to pop up if code review and regular supervision are not properly executed.

How to Build a micro frontend with React?

Now that we’ve covered what a microfrontend is, how it works, development approaches, advantages and disadvantages, it’s time to learn how to build a microfrontend with React.

Step 1. Create the 3 modules: host, layout and pages

Step 2. Start with your layout components

Step 3. Create some pages

Step 4. Put everything together in the Host module

Step 5. Run the three apps and try each of them on your browser.

For the purposes of our example, we will be using a recipe website.  Does Click & Cook sound like a cool name to you?

As we teach you how to build a microfrontend, we will be making use of Webpack’s Module Federation with the help of create-mf-app in order to speed things up a little. 

Steps Involved (we are going to suppose the user is using Linux/MacOS)

Step #1: Create the 3 modules: host, layout and pages.

1. Create the directory for the project and move into it.
   1. Mkdir micro-frontend-example && cd micro-frontend-example.
2. Create Host Module.

3. Create the Layout Module.

4. Finally, create the Pages Module.

Step #2: Start with your layout components (those that are commonly shared over all pages). Note: We will be using Tailwind to give the components some style.

1. Create a Header component. Code:

2. Create a Footer component. Code:

3. Expose both components in a webpack.config.js file.

Step #3: Now, let’s create some pages!

1. We will need some routing, so let’s start by installing a react router on all modules.
   1. `npm install react-router-dom`.
2. Next, let’s add some fixed recipes to a JS/JSON file.

3. Now, create a page to list all recipes.

4. Create a page to show the details of a single recipe.

5. Expose both components in the webpack config file.

Step #4: Put everything together in the Host module. 

1. Add both Pages and Layout Modules as remotes in the webpack.config.js file of the Host Module.

2. Add the components and routes to App.tsx.

Step #5: Run the three apps and try each of them on your browser.

1. Run the `npm start` command in each one of the modules and then go to http://localhost:3000 to test the result!
   
   

Note: To see the full example of micro frontends react go to https://github.com/luischaavez/micro-frontend-example. 

Conclusion

Microfrontends are undoubtedly a revolutionary architecture that solves some of the problems associated with monolith frontend apps. With a microfrontend, you can enjoy a speedy development process, improved efficiency, incremental upgrades, simple codebases, independent deployment, autonomous teams, and more.

Given the high level of professional efficiency required to implement microfrontends with react, we recommend working with experts. Before adopting the architecture of microfrontend with react, make sure to consider the automation requirements, operational & governance complexity, quality, uniformity, and other important factors.

Thinking of working with a software development company? Look no further than ClickIT, the best DevOps Nearshore team. We stand out because we help businesses build robust, secure, high-quality software-based applications to increase productivity and efficiency. Contact us today to learn more about our services and how we can help you.

This blog is also available on DZone.

FAQs