Micro frontends are totally the talk of the town now. More and more organizations are opting for micro frontends as a solution for many use cases. However, which idea is right for your needs depends on a few factors, which if ignored can make the whole process tiring and complicated for you.
In this blog, we will cover what micro frontends are and what things you must take into consideration before you choose them.
What are Micro Frontends?
Micro frontends refers to the distinct vertical slices of any web application. They contain the frontend, backend service as well as the database. It is with the help of Micro Frontends that you can break down monolithic web applications into various microservices.
When it comes to the frontend part, one can use Angular elements, polymer, or nutmeg in order to create a custom element, i.e. the HTML element that loads your particular component. While on the backend, the component communicated with its own HTTP API service and the database that has been created only for it.
Developers have been actively using this frontend concept to piece different technology stacks as a single unit. Say for example, on one component you could use Angular and on another you can use React at the same route.
While it might sound very convenient and useful, you must take into consideration a few factors which could make the process cumbersome for you.
What are those factors? We will see below.
Factors to consider before choosing micro frontends
Size of the team
With the help of Micro frontends teams can develop and deploy features from user interface to database on larger web applications at a much faster speed. When a team is working solely on their own, they won’t have to worry about any release process or deadlines or sharing technology with other teams. However, when they are working with other teams and using their components, they will have to know the custom HTML element and its attributes. Things get more complex when there are multiple teams that use different frontend frameworks. The best thing to do here is to create a unified component library. The teams should use a namespace convention to avoid getting in each others’ way when it comes to using shared code like CSS or local storage etc.
It is important to note that quite a few benefits of the micro frontends are lost when you have a small team working on any web app. The overhead that the micro frontends create make it difficult for the team to manage components. This is because the developer will have to switch to a different coding and deployment technique for each component. This will make the overall process slower.
Communication of components with various frameworks
In Micro frontends, all the frontend code w.r.t a component needs to be contained within the custom element. In such a case, passing of information depends on the DOM as compared to the publish or subscribe system in a shared library. Whenever a parent component wants to communicate with its child component, one should use element attributes to pass the data. Such kind of declarative approach is always used by React. But, this approach can create issues while dealing with more complex data such as objects and arrays.
When a child components wants to communicate with its parent component or sibling component, one should dispatch custom browser events. But, such DOM events ask for more work when using React as it uses its own even system and doesn’t listen for native DOM events from a custom element. To fix this, one can reference the element using the ref attribute and attach event listeners to it.
Multiple ways to divide web components
Micro frontends isolate the codes of each component. This makes way for the different teams to convert or update components by an increment without any substantial upfront investment. Also, in a different way, not everything has to be a web component. One can remove the thin parent component and give the entire responsibility of the app to a particular team.
Thus, we see that the micro frontends approach works great in dividing the workload for multiple teams. It helps to isolate codes for separate Custom Elements. Above we have discussed a few factors that you will have to consider before opting for these so that you don’t end up getting into the complexity unnecessarily.
If you are looking for help in building any product or app, you can reach out to EOV today! We provide comprehensive MVP development services and app design and development services that will give you the best of results without getting into any technical complexities!