Micro-frontend Architecture: A Microservice Approach to Developing Web Apps
Front-end development is crucial in deciding a web app’s interactiveness. There are various elements attached to the front-end development. Micro-frontend architecture is a prominent and new-age approach to front-end development. It becomes significant when a web app is split into self-contained components. Though these components are structured separately, their assembly looks like a single complete product to the end user.
The concept behind micro-frontend logic is somewhat similar to microservice. While the microservice is oriented to the server, the micro-frontend is associated with the client side. This approach is most reliant on creating a complex web-based product. Since it allows multiple developer teams to work on different software, it automatically enhances the productivity of the entire development team. Using micro frontend architecture style, programmers can efficiently develop web apps that too while achieving superior scalability.
“How interactive is the web app?”. The answer to this question lies in the development process of web app development. The development phase is always dynamic and a fusion of the latest tech. Micro-frontend is one of the latest patterns in the development of web apps. This approach is focused on the benefits of microservices to the client side.
The collective approach behind Micro-frontend is to structure the web app as a composition of features owned by independent teams. While being responsive to distinct missions, each team works as a cross-functional and develops its end-to-end features. The idea behind the micro front end is not new. It has a lot in common with the self-contained system concept.
Microservice Architecture is a type of architecture where an application is developed as a collection of services. It provides the framework for developing, deploying & maintaining microservice architecture diagrams and services independently. Unlike Monolithic architecture, the microservices structure is composed of several independent modules. These are organized around different business domains. In this type of architecture, the modules are connected very loosely interconnected usually through APIs. Hence, they possess minimum interdependencies.
Monolithic vs Microservices Architecture
While structuring a web app, you can use two different architectural approaches– Monolithic & Microservices. The microservices can be classified into various components which can be collectively called Micro-frontends.
Monolithic Architecture
A monolith is referred to as a huge block of stone. In the early days of web development, the entire program was built in the form of one indivisible unit and hence this architecture got its name. All the components of monolithic systems rely on one another for the proper functionality of the Web UI. Hence, a slight change in the architecture or the addition of a new feature requires changing the whole architecture and hence can end up with the whole system failure.
With technological advancement — software products started getting more complex. Hence handling them in a single unit was not a smart decision. To ease the entire development process, the codebase is divided into two distinct divisions– front and backend.
Despite the division, this approach is still referred to as the monolithic approach. The only major difference that is clear-cut visible is we are getting two large heaps of frontend and backend codes instead of one massive programming code. This approach is very much useful in development of small applications—since it is designed with a single source codebase.
Microservice Architecture
In contrast to the previous approach, the microservice architecture is the combination of loosely coupled components developed by different teams. With this pattern, composing web application UI becomes fast and effective. The components of the web app UI are semi-independent fragments. Each service runs its own process and has its own codebase & DevOps practices.
Communication between the services is facilitated with defined channels called APIs. Microservice gel with Frontend via API Gateway over the network or through the backend for the frontend service. API getaways provide a single point of entry for a set of microservices while the backend-to-frontend offers targeted API for individual clients.
For an instance: For an eCommerce web app, payment gateway and product management needs the involvement of two independent teams is needed for end-to-end development
Working of Micro Frontend Works: Core Ideas and Integration Patterns
As per earlier discussion, we have already understood that teams are vertically arranged in a micro frontend architecture. This means that they are furcated into the domain expertise and have end-to-end responsibility for certain features. It can encompass up to two microservice on the backend and its view as a micro frontend.
A micro frontend can be a complete page or individual fragments of the page. For a heavy website, it’s easy to split up the page components and assign each component to an individual team. Few elements like headers, footers, and recommendations often appear on multiple pages. Hence, teams can develop fragments that other teams can also add to their pages. The micro front end can be deployed independently as individual projects. This can be achieved by assembling both pages and fragments into a single interface. The assembly is done through many techniques – routing, composition, and communication.
Routing
Routing works for page-level integration. It is used when you need a service from a page owned by one team to the page owned by another team. Each micro frontend is considered a single-page web app. This can be approached by using HTML Links. When you click a hyperlink, the browser fetches the target markup from the designated server and replaces the page with the requested one.
For rendering a page without reloading, opting for a shared application shell or meta-framework gets the job done.
Application Shell is the minimal HTML, CSS & Javascript that structures and powers the web app UI. You can get the static rendered page even if the content data request from the server is still pending.
Meta Frameworks: It combines different pages, no matter what library or framework is used, into one whole frame. It also supports APIS to communicate between individual applications.
Composition
Getting the fragments into the right slot within the page is referred to as Composition. The team that usually ships the page doesn’t fetch the content of the fragment directly. Instead, it inserts a placeholder in the markup spot– leading to the place for the fragment. Final assembly is a result of two separate composition techniques– Client side & Server-side.
Client-side composition
In client-side composition, HTML markup is created and updated directly in the browser.(eg: Chromium). Each micro frontend can display and update the markups independently. This composition can be performed through the Web Components.
Server-side composition
In this pattern, the Web UI fragments are structured on the server. It illustrates that the client side receives a fully assembled page resulting in a faster loading speed. Therefore, assembly is performed as a separate service. This is located between the web browsers and web servers.
What method should be used to implement micro-frontend architecture?
Before even beginning to write the micro frontend, you must first decide how you want to separate the application frontend. There are two main methods: horizontally and vertically split.
An interface can be divided into many parts using the horizontal split, each of which can be assigned to a different team. However, you must give it a unified and consistent appearance.
The vertical split is the process of prioritizing business domains and allocating each domain to a separate team. Since a single team will be in charge of the interface as a whole, it will gain expertise in that particular business field over time.
A variety of methodologies can be used to account for a micro-frontend architecture approach based on how and where the various micro-frontend pieces are constructed. On the other hand, there is a lot of debate surrounding whether one approach is superior to another.
Are Micro Frontends Worthy?
As we have mentioned earlier, micro frontends are a mere extension of microservices to the client side of web app solutions. We are going to dive deep into the usage of Micro Frontends.
Unlike the Monolith approach, Micro Frontends approach allows the developer to bypass the limitation that was incurred by using the previous one.
- Faster Development
Since micro frontend approach, every component of a web app is developed by autonomous independent teams. This includes allowing the creation of the entire cycle of component creation, from ideation to release as well as post-production. This approach gives a significant edge over the monolithic as multiple teams can work on the same projects parallelly. Hence, the release cycles are efficient and faster with the Micro frontend approach.
- Greater App Stability
Though the components are coupled loosely, Micro frontends do communicate with each other. The coupling is vital and meaningful to ensure the stability of the web app. This ensures that the failure of one component has a minimal impact or almost no impact on the operations of other components.
- Clean and Clutter-Free Code: Smaller Codebase of Micro Frontends
In contrast to the monolithic approach which has unstructured cumbersome codebases, micro frontends provide a clean, small, simpler, and manageable. This has resulted in a cleaner coding experience throughout developing the web solution.
- Quick Feature Rollouts
As we have discussed, each micro frontend is deployed separately from other components of a web solution. This helps programmers to get features they are working on all the way to production. Hence, each feature has a distinct delivery pipeline. This helps in faster rollouts of updates.
- Easy Testing provides flexibility.
Micro Frontend architecture provides a modular structure to the development process while keeping them independent of each other. This facilitates the development team to test their development and modify without needing the other module. This makes the entire process seamless and faster in comparison to the monolith architecture.
- Easy App Scaling
Micro Frontend allows each module to be scaled independently. This makes the entire process cost-effective and time-effective. This is completely different from the case of monolith architecture where the entire app needs to be scaled up.
- Autonomous Teams
Multiple teams can work on different modules and hence each product team can operate with minimal dependency on other teams. It is helpful in a situation where other components are down.
- Lower Entry Barrier for New Developers
Micro frontends are easier to understand and manage in comparison to monolithic architecture. This helps new developers in developing the Web app UI as it is split into simpler modules. This is because new developers don’t need to go through the entire code before they start working on the project.
Communication Between Micro Frontends: Patterns
By keeping the interaction less between various components of the micro frontend architecture, you can design an efficient Web App UI. However, in a few cases, micro frontends are needed to communicate with each other in order to exchange data. Here are a few patterns that components of micro frontends can use while exchanging data.
Web Workers
Web workers facilitate a way for the web content to run JavaScript in the background which remains independent of other scripts, and without altering the page performance. Each micro frontend has a different worker API. Using web workers helps in segregating the workload and laborious processes can be performed on separate threads, allowing the UI thread to run without any lag.
Props and Callbacks
The developers need to define the parent component and child component. The communication channel works in the form of a tree– information flows from the parent component to the child component through the props. The child component can return the information to the parent component through the callback. This mode is used in React.
Event Emitter
Different components communicate with each other by listening and responding to any change in their state. When a micro frontend relays an event, other components react accordingly. This is a response that is generated by an emitter injected into the micro-frontend.
Using Micro Frontends Effectively
Micro Frontends have their own perks and downsides when it comes to deploying the architecture. For example, Vertically sliced teams enhanced overall productivity. However, it comes with additional costs & maintenance challenges. You need to consider this
Medium & Large Projects
The micro frontend architecture is ideal for web app development that needs to be scaled up. This is a good fit for larger development projects which includes multiple teams. This is mostly beneficial for large user base eCommerce web apps.
Web Projects
The micro frontend isn’t leveraged to a specific platform. However, the best possible usage is reflected in web apps or websites.
Conclusion
Micro Frontend architecture has its own perks and cons. Before you kick off with this framework, you should be aware of the compromises you might need to make. As micro frontends grow, various teams working on distinct micro frontends employ various tech. This is harder and costlier to manage. Also, it might offer an adverse and inconsistent user experience.
Also, Independent working teams working on different micro frontends can result in increased payload which can adversely affect the performance of the Web App. Hence, it is important to keep the final product i.e. web app as a single entity to provide a smooth experience to the end-user.
While micro frontends are the default choice when it comes to developing web apps. However, it is not useful for all types of development. Micro frontends are complex and hard to implement and maintain. Use micro frontends when your project has a larger size. If the site consists of many pages, the micro front end loses purpose.
