Micro Frontends – The New Frontend Architecture

amruta deshpande
Amruta Deshpande, Software Architect
 More Articles  
Evolution of Architectures
Figure 1: Evolution of Architectures

There were times when the entire application was built as a single monolith. A single application was responsible for backend as well as server side rendering of UI.

We saw an evolution when number of JavaScript frameworks like React JS, Angular, Vue JS gave the ability to implement UI independent of the backend. Backend was still monolith. Monolithic architecture had its own advantages, but they were outstripped by their limitations as the applications grew more and more complex.

Microservices emerged as a popular architectural pattern for developing large, complex, and growing applications. This pattern splits the backend into number of small services that are more focused, manageable, scalable and technology agnostic.

different web frameworks
Figure 2: With Micro-frontends parts of the same screen can be built using different web frameworks.

We saw great advantages of using microservices at the backend, but many large applications still implement UI layer as a monolith. Now a days, UI also known as front ends or single page applications are feature-rich implementations and are quite complex. They also need to be split up into smaller focused implementations.

Micro frontends is a new buzzword in the world of front end development. This architectural style for front end applications enables them to be developed as a composition of independently deliverable loosely coupled small applications. Micro frontends are intended to bring the same advantages to front end applications that microservices brought to the backend.

Facts about Micro-Frontends

 

Benefits of Micro-Frontends

 

Benefits of Micro Frontends
Figure 3: Benefits of Micro Frontends

 

The Good

We have seen the benefits of using microservices in past few years and the same can be extended to front ends using micro-frontends.
1
Micro-frontends enable small, focused and more manageable frontend applications.

 

2
The teams for every micro-application can also be small, agile, and focused on a specific goal.

 

3
Every micro frontend can be deployed independent of the other pieces.

 

4
The frontend technology pick for each frontend can be independent of others. Even parts of single webpage can be built using different frameworks!

 

5
As the applications are split into small micro applications the upgrades and refactoring needs can be achieved more easily than ever before.

 

6
Small applications become easy to maintain.

 

7
Micro frontends can be lazy loaded enabling quick start-ups of the application.

 

The Bad

1
Multiple micro applications bring complexity of deployment.

 

2
You need to be careful about the interfaces throughout the development.

 

3
The different micro-apps should be decoupled enough to be able to build and deploy independently but each still needs to reflect as a part of coherent application which brings more complexity.

 

4
Inter micro-app communication can become complex.

 

5
Maintaining the same look and feel across the micro applications needs shared components. Maintaining these can be challenging.

 

 

 

Different ways of building Micro Frontends

There can be different ways of implementing micro frontends as listed below.

1

HTTP server routing to redirect to multiple micro-apps.

2

Integrate different micro-apps at build time.

3

Integrate different micro-apps at run time.

4

Use iFrames for loading different micro-apps.

5

Use different frameworks available for building micro-frontends.

Available frameworks that can be used to build micro frontends

 

There already are a few frameworks available to build micro frontends. Here is a list of some such frameworks.

  • Bit
  • Module Federation
  • System JS
  • Piral
  • Open components
  • Luigi
  • Qiankun
  • Podium

Conclusion

Frontend applications are becoming complex day by day. Large and complex frontend applications need an architecture which will give the same advantages of microservices. Micro-frontends are taking root into the frontend ecosystem. Micro frontends enable development of small and manageable micro applications.

Even though Micro-frontends offer a lot of advantages, it is not a silver bullet. Like every other architecture, there is a trade-off between monolithic architecture vs Micro-frontends architecture. Applications can take advantage of this architectural style if chosen wisely considering specific requirements and aspects of development and maintenance.

 

Author: Amruta Deshpande. Posted on August, 2021
 More Articles