Everything You Ever Wanted to Know About Micro Front-end

Introduction

Micro frontends are an important part of modern web development. But what are they? And how can you use them to build better web applications? Find out what micro frontends are, how they can benefit your web development, and get started using them today! This comprehensive guide will teach you everything you need to know about micro frontends, from the basics to the advanced. Read on to find out everything you ever wanted to know about micro frontends but were afraid to ask.

What is Micro Frontend?

The concept of composing individual frontend programmers into a larger whole according to Micro-Fronted architecture. It is simply a section of a webpage (not the entire page). The Micro-Frontend Architecture page has a “Host” or “Container” page that can host one or more Micro-Frontends. Some of the components on the Host/Container page can also be shared.

Micro-frontends are a testing approach for web apps controlled by independent teams that provide many features or modules to make them more user-friendly and less bulky.

In essence, they separate a front-end application into a number of smaller, semi-independent apps, each of which may be created with a different framework (such as React, Angular, or Vue) and then simply connected together into a single project.

This is a revolutionary design approach in which the front ends of web applications are made up of fragments created by numerous teams utilizing a variety of technologies.
Micro-frontend designs resemble back-end architectures, which are composed of microservices that are loosely coupled.

IT businesses have begun to divide huge programs into smaller, easier-to-manage parts in recent years.

The goal of this method is to enlist the help of a huge number of people.
services that may be independently designed, tested, and deployed

In terms of backend development, this is what the microservice architecture is.
However, the same approach may be used in frontend development, and it’s known as.

Why Micro Frontends?

A lot of issues with SPA frontend development were addressed by the Micro-Frontends concept.
I’ve seen a website expand to the point where it’s difficult to scale, alter, or even train new engineers to work on it.
Developers will be unable to modify such a monolithic system. Some of the advantages of Micro-Frontends are listed below.

Why do we need micro-frontends?

Consider the following scenario: you’re working on a project that requires the use of a specific framework or library (such as React.js), but you need to switch to another framework or library, or you need to include another module created with a different framework (like Angular.js).

You’ll have to rewrite the entire project or module if you don’t use a micro-frontend, which is a time-consuming procedure.

Another instance is when you’re working on a large project with several teams, making collaboration difficult.

Because a big codebase necessitates the connection of components and pages, you may find yourself overlapping your work with that of other team members.

This results in more rewrites, more complexity, and poor time management, as well as a delay in the entire development process.

What if you didn’t have to alter anything and could simply start adding new modules to your existing framework?

They enable us to develop apps in a variety of frameworks (including Vanilla JS) and load them all from the same router and domain.
We can start by creating the primary parent app, which will include authentication and routing. We can then add many child apps that run independently and can be loaded on the same or other sites.

How to build micro-frontends?

Now let’s see how to build a real app and how to integrate two frameworks, React and Angular, using micro-frontends. The first question that comes into play here is how we should divide apps as there are no specific criteria to divide them. We can do this in a number of ways depending on our requirements. Let’s look at some of them below:

Feature Wise

We shall separate the application’s functionality or modules according to this most typical division. For example, let’s say there are three features on the dashboard, we can also have three micro-frontends for each respective feature with the dashboard as the common stage.

Page Wise

In some of the apps, functionalities are divided by page. We can divide the apps by page and each page will have independent functionalities when using this method.

Domain Wise

Apps can be divided per domain as well. For example, we can divide the app into either the Core Domain, Payments Domain, or Profile Domain based on our requirements.

There are two ways of implementing sub-applications on a web page:
One application on each page
All the sub-applications on a single page

How does Micro Frontend Works?

Micro Frontend best practices, strategies, and recipes to build a modern web application with multiple teams using different JavaScript frameworks.

The main Concept behind Micro Frontend Architecture is as follows:

Be Technology Independent

Each team should choose and upgrade the stack without coordinating with other teams. Custom elements help to hide implementation details while providing a neutral interface to others.

Isolate Team Code

Never share a runtime, even if teams use the same framework. Build an independent application self-contained. Do not rely on shared state or global variables.

Create Team Prefixes

Use naming conventions where isolation is not feasible. Namespace CSS, Local Storage, Events, and Cookies to avoid collisions and clarify ownership.

Favor Native Browser Features over Custom APIs

Instead of building a global PubSub system, use browser events for communication. If there is a need to build a cross-team API, try to keep it as simple as possible.

Build a Resilient Web Design

The features should be useful, even if JavaScript cannot be executed. To improve perceived performance, use universal rendering and progressive enhancement.

5 Reasons You Should Adopt a Micro Frontend Architecture

Scaling up to multiple teams.
Adopting a different tech stack.
Development and deployment become faster.
It makes your web application more maintainable.
It represents the future of frontend development.

Top 10 Micro Frontend Frameworks

Bit
Module Federation
SystemJS
Piaral
Single-Spa
Luigi
Quinkun
Open Commonets
Podium
Mosaic 9

In Conclusion, This comprehensive guide will teach you everything you need to know about micro frontends, from the basics to the advanced.