Micro frontends empower your developers to build better digital products

Micro frontends are an alternative to web application design that are gaining momentum among architects and developers. They promise more efficient applications, more freedom for teams, and projects that can adapt to technological change.

Although the concept of micro frontends is relatively new, it should be on every frontend developer's radar, because large organizations and industry leaders like IKEA, SoundCloud, and Spotify are successfully managing their own web applications using micro frontend architectures.

What are micro frontends?

Conceptually, micro frontends follow a similar pattern—in the front end—to microservices, a widely adopted architecture in the world of backend development. A Microservices architecture consists of dividing the operations of an application into a series of small, independent applications called microservices that, while distributed independently, work together to orchestrate a complete application. 

The following figure is an example of one of the most common microservices architectures:

In the backend, we have specialized services that interact with the frontend using an API to send and receive information on-screen or invoke processes in a server.

Distributing services in small, independent pieces creates a resilient system capable of working even if one of the services fails.

This architecture also permits development teams to work independently and specialize in the details of a single service, while also reducing dependencies on other teams.

Despite the benefits of this model in the backend, frontend development until recently had mainly relied on a monolithic architecture.

Let's take, for example, a classic Angular SPA (single-page application) where everything is integrated into a single block; even though it has modules and independent components, if a team introduces a single error or a memory leak, the collective work and stability of the app may be compromised. 

This, however, is where micro frontends shine, because they extrapolate the beneficial concepts of microservices and bring them to the frontend. Now, instead of separating an application’s frontend into modules, we take encapsulation to its extreme and create applications that are truly independent and are now able to specialize—just like microservices—in a single business area.

Consider a fintech's web application using a combined architecture of micro frontends and microservices that has entire business segments such as customer service, wealth management, or financial services, completely separate and functioning at a team, code, or even infrastructure level. Each micro frontend could consume its own APIs and use its own code without involving the rest of the application.

This leaves behind the monolithic frontend and instead works as an application that is decoupled and focused around complete areas of an organization. The previous monolithic application from figure 1 would now look like this:

Even though conceptually micro frontends and microservices are very similar, if you've previously worked within the frontend you know that implementation can vary wildly, from the use of tools like Angular, React, Vue, “vanilla” JavaScript, webcomponents... each with different capabilities and limitations.

Variety aside, there are emergent patterns and common elements that characterize or typify a micro frontend-based application:

Technology agnostic

Every frontend developer knows that there's a near infinite list of trending libraries and frameworks that promise to change everything. They know that depending on the project, you need to choose a library and/or framework, and the different advantages and disadvantages they come with will be inherited. An application based in micro frontends, with each of its different parts operating independently, eliminates this uncertainty. This means that theoretically, we can have part of an application using Vue, and another part that uses React, without generating incompatibility. Furthermore, it future proofs the application. If the best way to handle a new business segment is migrating to another library or framework, the implementation can support the change without affecting overall operation.

Each team's code is encapsulated

Each micro frontend is a separate application, with rules and reach unique to each. What happens inside one area shouldn’t affect another part of the application, even if they coexist within the same HTML. In this same vein, each team has the autonomy to create their own independent code, reducing or eliminating dependency on one another. It’s important to mention that even though different micro frontends are independent of each other, it’s completely possible to communicate between one another through APIs, databases, and session variables.

Independent deployment

A true micro frontend allows for a level of decoupling such that developers can package and publish each part independently without recompiling the entire application.

Benefits of using microfrontends

It may seem that micro frontends add more complexity to a website, and it’s true if you’re working on a small-medium site. But, when talking about projects scaling into hundreds of people working with multiple business areas at play, microfrontends can make a truly critical difference in the overall quality and speed of development of your digital products.

Build applications with more resilience

Separating an application into smaller, fully functional parts, we eliminate the problems of monolithic applications. If a business area fails for any reason, the rest of the application can continue operating normally.

Reduce complexity and dependency

Replacing monolithic architectures and specializing each part of an application reduces the amount of unnecessary code you need to maintain. This allows each micro frontend to focus on its business area and nothing else, and so reduces the general complexity of the code. It also reduces or eliminates dependencies on external elements or other teams at work on separate challenges and building solutions at different speeds.

Organize and manage a better codebase

A micro frontend architecture lets you separate development work into polyrepos and monorepos, as necessary, creating separate areas for each team so that they work within their own specialized codebase without generating dependencies or conflicts with the rest of the application. Micro frontends also reduce the need for unnecessary libraries while allowing faster unit and integration testing.

Agility and adaptability

A product based on micro frontends is considerably more agile than a monolithic one, because it allows each team to define their objectives and deliveries independent from one other. This independence means that organizations can define a release cycle or continuous delivery system depending on the product’s requirements.

Additionally, having total independence will allow a product to adapt or work in sync with any technology.

Micro frontends in Modyo

Implementing a micro frontend in Modyo is easy. You can start using them out-of-the-box thanks to our Widgets which let you inject HTML, JavaScript, and CSS code within any application. With widgets, your developers have complete control over implementing any framework necessary while having the elements that make up a micro frontend:

Choose your preferred tech

It doesn’t matter if you chose Angular, React, Vue, or your own implementation of JavaScript. You can inject code in every part of your application, and you can even mix and match different micro frontends into a single application without generating conflicts.

Maintain access and optimization

In Modyo you can work simultaneously with different development teams and user roles, creating exclusive areas for each one of them. A widget’s code is encapsulated, and additional configuration options like access to global variables or support for synchronous and asynchronous loading to help optimize your application.

Deploy micro frontends independently

Widgets don’t require an entire application to recompile, and they don’t affect any other active feature. When a team is ready to deploy, they just need to go through the publication process and their updates are be available in the application’s runtime.

Conclusion

Micro frontends have become an important trend in frontend architecture because they allow you to create decoupled, more independent applications that are more robust and have a higher tolerance against errors.

They use different technology, and due to their independence, development teams that use micro frontend architectures can reduce dependencies on other teams and deliver code faster within shorter iterations, and simply build better digital products.

If you wish to commence utilizing microfrontends today, Modyo enables you to get started without compromising your architectures, offering you total liberty to create microfrontends made for all your business needs.

Photo by Maksim Shutov on Unsplash.