Cloud Native
Micro Frontend Guide: Overview
How can you get the most out of your web applications? Explore why Micro Frontend is ideal for evolving organizations.
Related articles in the Micro Frontend series:
- Micro Frontend Framework Guide: Adaptability for Teams
- Micro Frontend Guide: Technical Integrations
Let’s say your organization started a new multimillion-dollar project and invited you to be the system architects, or integration lead, to help architect the end-to-end solution. You’re very excited but equally curious about the challenges you will encounter along the way. Let’s investigate.
What works best? Frontend with Microservices Backend + DevOps?
The first thing you notice is there are several new service teams staffed with Java/Go/Python developers with decent backend knowledge. They like to use a microservices architecture for some new cloud-based software systems, where each separate service is independently owned and has a managed data store without a shared database. You feel confident you have a good start because they’re leveraging the cloud as the infrastructure and not rebuilding and maintain everything from the ground up. Now services can be built independently without creating a giant monolith.
It is vital to help reduce the cognitive load and burden of teams that aim to produce a steady flow of feature delivery. You have advised the organization to continue invest and adopting DevOps’ best practices that enables infrastructure as code (IaC) to streamline the CI/CD pipelines and are able to operate the runtime by monitoring software and infrastructure with appropriate metric and automatic alarms. At this point, you can envision the boost on the speed of delivery and mean time to detect/recover (MTTD/MTTR) if incident occurs.
You must keep oversight of the system as a whole and ensure every system is integrated and interacted according to the desired user experience, performance, and reliability. You may wonder how you can ensure all the valuable data from the backend microservices can be presented and interact with the end user.
The software system’s last mile solution is the integrated website with myriad of service offerings (see figure 1 below). This is an area where organization can be the most innovative—thinking of ways to improve the customer experience and positively influence their decision to continue using the service.
Figure 1 - One website with multiple service offerings
At this point, it is tempting to staff a frontend team and ask them to get on with building a new website from a new GitHub repository and call it a day. Seems simple…but is it?
Why you need a Micro Frontend architecture
Creating scalable architecture is crucial as organizations want websites that will grow to meet evolving business needs. You must also consider that the content will be owned by different service teams.
If your plan is to build everything on the same code repository, that will lead to creating a monolith on the frontend. While this may make the start easier, there are trade-offs down the road. Legacy monoliths cannot accommodate the evolving organization and its team structure because to make any alterations, the developer must rebuild and redeploy an updated version of the entire web application.
Since there are multiple service teams involved in this project, you want to use an architecture that can accommodate the different frontend technology stacks and separate code repositories used by teams in different regions or countries. This reduces the need to rewrite or break the existing frontend, allowing teams to build efficiently with the tools of their choice.
Okay, so you know you need a frontend that can scale and accommodate multiple engineering teams. The best solution is a Micro Frontend architecture. This allows you to recombine the multiple single page web applications (SPA) with data coming from backend microservices into a cohesive user experience while enabling the development teams with the autonomy they need for velocity.
Figure 2 - Evolution of Monolithic Architecture
What is Micro Frontend?
Micro Frontend architecture enables multiple frontend teams to collaborate and create cohesive modern web applications by fostering end-to-end ownership of independently developed, tested, and deployed Micro Frontend apps. The web application becomes a composition of SPAs, pages, components which are owned by independent teams.
Micro Frontend architecture aims to accomplish:
- Enable development of isolated and independent web apps and release workflow with high velocity
- Offers user a cohesive UX with a unified, consistent UI
- Protect existing frontend investments by not breaking the available legacy server rendered web app (JSP, ASP, PHP, etc.) or building with client-side frameworks (React, AngularJS, Vue, etc.)
- Polyglot development with freedom of tech stack choice
Next steps
Now that we’ve covered the basics of Micro Frontends, we’re ready to dive into how the architecture can fit your evolving organization.
