Where To Apply The Micro Frontends Approach? | Hacker Noon

The idea is to split the monolithic front end into small independent pieces, which can be developed, tested, and integrated independently from other pieces of a web application. The idea was inspired by the microservices concept. The concept will fit great for marketplaces, huge e-shops, social media platforms, video streaming services, and educational platforms, for example. I believe that concept will grow its popularity and in the future, more and more companies will be switching to this type of web application architecture.

image

Maksym Mostovyi  Hacker Noon profile picture

@maksymmostovyiMaksym Mostovyi

Software developer with expertise in JavaScript, Angular, AngularJs, D3

In this article, I decided to talk about one of the trending topics in front-end development, micro front ends. I would like to share my opinion on where such a concept can fit the best. But first, I’ll briefly cover the approach itself.

What are micro frontends? 

It was inspired by the microservices concept. The idea is to split the monolithic front end into small independent pieces, which can be developed, tested, and integrated independently from other pieces of a web application. Let’s compare monolithic and micro frontends approaches:

Monolithic

image

Micro frontends 

image

Splitting web applications into autonomous pieces has its advantages and disadvantages. Let’s have a look what are the main ones.

Advantages

  • Independent development and integration.
  • Developers teams can be more flexible with a choice of technologies for their part of the project.
  • Components reusability. One of the biggest advantages, in my opinion.

Disadvantages

  • Web application becomes quite heavy and complex.
  • Can bring issues with the performance.
  • Complex testing of the whole app.  

Where does it fit the best? 

I think that micro frontends will fit great for marketplaces, huge e-shops, social media platforms, video streaming services, and educational platforms, for example. All of these usually contain complex logic and features. So it can be divided into smaller pieces and get developed and maintained independently from each other. Let’s take as an example e-shop and here is how the architecture can look like:

image

Another great way to utilize the advantages of micro frontends is to apply them to dashboard development. I believe that this concept will show off its best parts once we need to deal with lots of widgets. It’s convenient to have each widget running autonomously, cause here pops up one of the biggest advantages mentioned above – component reusability. Then it can be easier and less expensive to reintegrate those widgets into other systems. That is why the concept fits great in such a case. Let have a look at how everything can be combined.

image

Wrapping Up

Micro frontends is a popular trend nowadays. In some cases that concept can be a game-changer, and in some just not so effective. Most probably it will not be a great choice for small applications or websites. The ones which do not contain that many features and logic. Before choosing whether to go with micro frontends implementation, I will try to answer the next questions: 

  1. How big product is supposed to be? 
  2. Will I need components to be reusable? 
  3. Will I need room for scalability? 

These are the main things we need to keep in mind before choosing between the monolithic app and micro frontends.

By the way, there are a bunch of companies that successfully implemented micro frontends. That concept was chosen in Ikea, Spotify, Skyscanner, and many more. I believe that concept will grow its popularity and in the future, more and more companies will be switching to this type of web application architecture.

I hope this article was useful, thanks for reading. Looking forward to hearing your feedback and thoughts.

Tags

Join Hacker Noon