top

MICRO FRONTENDS – THE NEW FRONTEND ARCHITECTURE

writeImage
Amruta Deshpande, Software Architect
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 an ability to implement UI independent of the backend. Backend was still monolith. Monolithic architecture had its own advantages, but they were overpowered by their limitations as the applications grew more and more complex.

Microservices exploded 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.

Figure 2: With Micro-frontends parts of the same screen can be built into 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 aka front ends aka single page applications are feature-rich implementations and are quite complex and has developed a need to be split up into smaller focused implementations.

Micro frontends is a new buzzword in the world of front end. The architectural style for front end applications that 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 banckend.

Facts about Micro-Frontends

 

Benefits of Micro-Frontends

 

Figure 3: Benefits of Micro Frontends

 

The Good

We have seen the benefits of using microservices in past couple 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 per 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 startups 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 microapps should be decoupled enough to be able to build and deploy independently but each still need 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 which 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 iFrams 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 couple of frameworks available to build micro frontends. Here is a list of some such frameworks.

  • Bit
  • Module Federation
  • 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 frontend ecosystem. Micro frontends enable development of manageable small micro applications.

Even though Micro-frontends bring in lot of advantages, it is not a silver bullet. As 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.

 



Contact Us

Contact Us Address

Spring Computing Technologies Pvt. Ltd.
Vijay Commercial Complex,
D. P. Road, Kothrud, Pune,
India 411 038

Contact US Telephone Number

Office: +91 8956151270

Sales: +91 8956151271

HR: +91 8956151272