July 6, 2021 3 mins read

What are Micro Frontends and Why Do They Matter?

 

Recently, microservices have emerged as a promising solution for the inefficiencies and limitations of working with large, monolithic backends. Doing so allows the scope for greater autonomy, testability, and scalability.

Despite a tremendous leap in progress in server-side backend development, the inability to simplify frontend codebase remains to be a significant pain point for the software industry. Even Single Page Applications (SPA), which promise better performance and conversion, are built on traditional, monolithic frontend architecture.

Consequently, their deployment, upscaling, and maintenance are difficult. Even the slightest change needs thorough testing, or worst, re-coding. Furthermore, this increases the risks of making errors and misutilization of resources.
Micro Frontends can help the software industry overcome these issues. However, there exists much prejudice and misinformation regarding this approach, stunting the implementation of this promising solution.

This blog gives an overview of micro frontends, covering pertinent questions such as what they are and how they might help. Also, we would explore some of the common ways of micro frontend development.

What is Micro Frontend?
As a microservice-oriented approach to frontend development, this is an architectural style in which independently deployable (and maintainable) frontends constitute the application. That is, the method breaks down monolithic frontends into fragments, each of which can be developed, deployed, and tested independently. The end-user, however, interacts with the application as a single entity.

With more accessible codebases, scaling such applications is easy. Moreover, a part of the application, i.e., a micro frontend can be completely re-written without affecting the remaining parts at all.

The Benefits of Micro Frontends
An exploration of their major benefits is imperative for a better understanding of this frontend architecture.

Smoother Upgrades
Often, organizations working with monolithic frontends deal with a back-dated technology stacks, inefficient and irrelevant codes, and more. They tend to encounter situations in which a total rewrite seems inevitable.
Micro frontends implementation offers a smoother way of upgrading, which rules out complete re-coding. While one part of the application upgrades, the other parts function unhindered. This facilitates decision-making as teams can now focus on the issues more precisely.

Simpler Coding
Mistakenly or unnecessarily coupled codes are a common issue with monoliths, and they pose related problems that hinder the overall functioning of apps and user experience. As individual micro frontends involve much smaller codes than the monolith, they are simpler and easier to work with.

These applications have tightly bound contexts, ruling out the interactions between parts that are supposed to work in isolation from one another. Micro frontends make it more difficult to continue undesirable coding habits while making the desirable ones imperative. For instance, this method demands extreme focus on aspects such as the system’s event flow.

Autonomy
Every micro frontend involves an autonomous system, with a dedicated production and deployment pipeline, and involves testing as well. Most importantly, this method functions completely independent of the overall system state, the nature of the existing monolith, as well as the states of peer teams.

From the organization’s perspective, this translates to more autonomous teams that are agile, flexible, and ultimately more efficient within their limited scope. With vertical teams that cover all the aspects of end-to-end frontend development (styling, form, and validation), each team is fully responsible for its section of the overall application.

Single SPA Micro Frontend
Although there are other ways to building micro frontends, the approach involving Single SPA arguably has the widest scope. This JavaScript framework enables developers to use multiple frameworks on a single page, allowing them to develop micro frontends in React.Js, micro frontends in Vue, and micro frontends in Angular, among others.

However, irrespective of the language used, the micro frontends architecture usually comprises the individual micro frontends and a container application binding them together into a single UI.

The container is responsible for the rendering of common elements (headers, footers, etc.) and navigation.

Furthermore, it also delivers the relevant micro frontend upon the users’ request.

Micro Frontends Implementation
Alongside the variety in development methods, there are several possible approaches to micro frontend implementation and integration. This section discusses some of the major ones.

Server-side Integration
This method employs multiple templates to render the HTML code on the server. Here, an index.html contains the common elements and performs a server-side integration of specific aspects contained in fragmented HTML files.
Moreover, this method emulates the micro frontend quite closely as each piece of the split-up code contains its own domain concept and can be deployed by an individual team. Similarly, updating one page doesn’t affect others.

Build-time Integration
In this approach, each micro frontend is treated as a package, while the container app enlists them as dependencies. That is, it creates a single, deployable JavaScript bundle.

However, despite enabling the de-duplication of common dependencies, this method is highly problematic. Just like monoliths, changes to any part require that every other part is re-compiled and released again.

In fact, the deployment process of such applications, i.e., re-introducing undesirable coupling at the release stage, ultimately negates the very purpose and essence of using a micro frontend architecture.

Run-time Integration
Integrating micro frontends at run-time may well be considered the best way. In itself, this method may be divided into, at least, three sub-methods.

Using iFrames – iFrames enable browsers to build composite applications using multiple sub-pages. It is the simplest micro frontend integration method. Yet, it offers much scope for isolation as styles and global variables don’t interact. The method is somewhat similar to ‘server-side integration’ (discussed above).

Using JavaScript – This is a highly flexible method in which the <script> tag is used to contain individual micro frontends. Using these tags, the container application controls the rendering of relevant micro frontends. While each bundle.js file is deployed independently, it also offers immense flexibility in terms of build interactions between them.

Using Web Components – Being a slightly modified version of the previous method, this uses an HTML custom element instead of a global function for the container. However, this method relies heavily upon the specifications of the web component and is not suitable when the developer desires greater control over the container-micro frontend interaction.

Real-life Use Case – Spotify Micro Frontend
Realizing the scope and with increasing popularity, a number of major organizations are shifting or have already shifted to micro frontend architectures.

For instance, Spotify’s desktop application uses micro frontends. Their method uses iFrames to stitch the fragmented views into a whole, while an event bus ensures optimum decoupling of distinct sections.
Apart from Spotify, IKEA is yet another organization that has implemented micro frontends. Each, however, has a distinct approach to the implementation.

Conclusion
For a long time, monolithic frontends have been a cause of many limitations and inefficiencies in software industry. They make it very difficult to upgrade an application or fix bugs as developers need to modify the entire monolith to alter any given section.

That is why microservices and micro frontends are becoming increasingly popular. As each micro frontend is independently deployable, changes to one part of the application don’t imply downtime or alterations of the other parts.

In times when agility is emerging as a keystone to business success, this approach to frontend development has immense potential to transform the organizations which use them. Indeed, the method is in its nascent stages and requires much evolution. However, it will inevitably be the go-to architecture for modern and progressive frontend developers.

 

Read More Blogs:

Understanding Software Architecture Frameworks – Microservices, Monoliths, SOA, and APIs

6 Microservices Patterns and Their Use-Cases

    March 17, 2021

    10 Fastest Growing Telemedicine Companies

    With the ongoing pandemic, digitalization has become a boon. The...

    March 17, 2021

    How Coronavirus Has Changed the Future of Banking Forever

    The outbreak of COVID-19 is having a massive impact on...

    March 17, 2021

    Why Prioritizing Digital Transformation is the Need of the Hour

    Digital transformation has redefined economies across the world by letting...