Micro Frontend – An introduction with Web Components

In this post, you will learn about the much-hyped Micro Frontend concept, approach, and architecture, and also what problem it will solve. You will also learn how this can be implemented using the modern browser natively available web standard APIs with Web Components.

What is Micro Frontend?

A good software design at a high level offers scalability, reusability, easy to test, easy to maintain, and easy to deploy. Kudos to the revolution of Microservices in today’s software design that now we can easily create loosely coupled and independent services that are highly modular, scalable, and reusable. And, lately, this paradigm has started drawing the attention of the frontend community and thus led to the new Micro Frontend. Think of it as the extension of microservices to the frontend. The traditional, monolithic application will be decomposed into smaller featured apps that are independent, reusable, testable, and isolated.

Why Micro Frontend?

Frontend development has exploded from server-side page rendering to Ajax, Single Page Application (SPA), and now to Progressive Web Application (PWA) and Universal rendering. Today’s modern `enterprise web application has become big-and-large and complicated with many features, libraries, and frameworks At times, multiple teams working together on the same development may run into code conflicts and integration issues. Maintenance of this large monolithic application is a nightmare. Adding a new feature is not easy. Migration to a new version, or other frameworks and libraries, or rewriting the application is a big challenge, time-consuming and costly.

The above problems are something that will be facing commonly in all the monolith applications. And, this can be addressed with the Micro Frontend paradigm by decomposing this large complicated monolithic web application into smaller featured apps that are independent and loosely coupled. Each smaller featured app can now be developed by each team independently and deploy it autonomously. New features can be added easily without any impact on other features by adding a new featured app and deploying only those. Different frameworks also can now be made coexist together as separate featured apps.

Micro Frontend isolation, interoperability, and autonomous deployment make migration or rewrite in an easy incremental way, by the progressive and transitioning way. The new migrated or rewrote feature can still co-exist with the old monolith code during the entire progressive transitioning without creating any impact and deployment challenges.

In short, Micro Frontend offers faster development, easy to update, easy to test, easy to deploy autonomously, and easy to maintenance.

Micro Frontend with Web Component

Micro Frontend with Web Component Architecture

There are certain approaches to achieve Micro frontend design. Here we will be focusing only on the modern browser natively available web components.

Web components are defined as sets of web standards that enable the developer to create custom elements. It also natively provides encapsulation and isolation which will avoid conflict between different frameworks, libraries, or versions. Below are the APIs which make Web Component the best fit to be the smaller featured app for the Micro Frontend approach.

Custom Element

This is a user-defined element extended from HTMLElement which provides flexibility to create the semantic element that is reusable or sharable across frameworks and browsers. Its lifecycle hooks allows the developer to easily define the behavior specific to the component.

Shadow DOM

This provides encapsulation and isolation by scoping styles, javascript, and HTML structure to the component. This also allows abstraction of the component internal from its user. So the user of the component doesn’t care or need to know how it is implemented internally and can focus on the interface.

Content Template

This provides an easy way to use on-demand repeating HTML structures and data semantically. This allows HTML fragment to be reusable inside the component.

Communication and Data Sharing in Micro Frontend

As our Micro Frontend application is a composite of certain smaller decoupled featured apps made up of web components, enabling communication and data sharing between these decoupled components is essential. Below are the ways how communication and data sharing can be enabled with the natively available APIs.

Attribute

The custom element attribute enables us to pass only a string data type. Complex data like Object or Array can also be passed by stringifying as a JSON string and parsing it back into its original type. This can be done either declaratively in the HTML side or programmatically on the script side.

And, the best thing about Attribute is that it offers an easy way to detect its value changes with the Custom Element lifecycle API, attributeChangedCallback. This method passes three parameters which provide the name of the attribute whose value has changed, the old value, and the new value.

Property

The property of the custom element can be used to pass any data including complex data type like Object, Array, or Function. This feature is only available on the script side, and not on the HTML itself like attribute. The custom element class should expose the property through its getter and setter which will be available in the DOM object.

Event

As the custom element is extended from the HTML element, it inherits all the properties and methods including the event that an HTML element has. Simple DOM events such as ‘click’, ‘focus’ etc are available on the custom element for others to subscribe by default. But, Custom Event API is required to pass our data and to create our own custom event. This also provides the freedom to trigger the custom event how and when it is required.

Another way of communication between loosely coupled components is via messaging using event bus or PubSub pattern. But this requires to use a library that provides the PubSub model, or to write the code for the middleman or agent which will bridge the Publisher and Subscriber. This approach can handle a large number of subscribers.

Choosing between each approach over another depends on the requirement and what it is trying to be achieved. There is no bulletproof way that works for all.

Wrapping Up

Technologies, frameworks, and libraries are to continue to grow and evolve. As the web application grows, it is going to add more complexity without proper planning and design. Adding new features, deployment and maintenance will be a real challenge. Micro frontend implementation with the right approach will enable a complex monolithic web application like enterprise application faster development, easy to update, test, deploy, and maintenance. But the Micro frontend is still not bulletproof, so choosing the design and architecture that best fit your requirement, that can be easily scalable in the future, and that is technology-agnostic will be a wise choice.

Mapu

I am a technology freak with passion for UI technology.

Leave a Reply