A micro frontend is an extended concept of microservices. It is an architectural style for frontend web development using a microservices approach, and it follows the same principle as that of microservices at the back end.
Frontend services are split into independent modules, which are then independently developed, tested, and deployed by different teams across various business domains using different technologies. All these independent modules, which are also reusable components, can be modified individually for a better user experience. Organizations can add new features without affecting the other parts of the code.
For example, let’s take an e-commerce web application. It has pages like products to choose from, cart (add/delete/modify), checkout, and payment processing. Each of these pages can act as an independent module. These modules are then assigned to separate teams with the required expertise to develop, test, and deploy them.
Why micro frontends?
The micro frontend approach allows businesses to simplify their complex frontend needs into smaller actionable and often singular functionalities, which can be assembled into the final frontend. This approach lets the business streamline its UI engineering and development process with minimum or no cross-team dependency.
Many big companies, including Ikea, Upwork, Spotify, Dazn, Soundcloud, Skyscanner, Zalando, and Hellofresh, have already incorporated micro frontends.
How does a micro frontend work?
The micro frontend approach is based on the following core principles:
- Independent teams: Multiple teams should be able to develop, test, and deploy their codebases using their continuous development/integration pipeline and without relying on other teams.
- Isolated team code: The key to building an independent component is to keep it self-contained. Teams should not share a runtime, even if all teams use the same framework.
- Flexibility in choosing technology: This architecture gives each team the freedom to choose or upgrade their technology stack without consulting other teams. By using custom-built elements, teams can hide the implementation details of their microservice while sharing a neutral interface with others.
- Native browser features over custom APIs: This principle of simplicity rests on using browser events for communicating with other frontends instead of APIs. In case APIs are required, they must be kept simple.
Segments of micro frontend
We have discussed how micro frontend is all about slicing the massive web application into multiple segments. Therefore, it is very important to understand how and what these segments are. This architecture has three main components:
- Host or a container that hosts multiple micro frontends
- Micro frontends
- Micro frontend framework
There are primarily two ways to integrate micro frontends with the host/container:
- Build time integration: Micro frontends get published as a package, and the container application will install them as libraries.
- Run time integration: The container has access to the micro frontends while running in the browser. This integration is further categorized into 3 types:
- Server-side composition: In this approach, various micro frontends are called at the server level before being relayed to the browser. The microservices at the backend decide which micro frontend to load. Frameworks like Ara Framework, Piral, Open Components, and Tailor.js, are used to develop different components.
- Edge-side composition: It leverages CDN (ex: AWS CloudFront) and Lambda@Edge capabilities to implement the micro frontend approach.
- Client-side composition: The container is built and deployed separately from the other micro frontends that it is hosting. The host/container decides which version of the micro frontends to deploy. Techniques such as Appshell and client-side scripting are used.
Micro frontend best practices
There are certain best practices that one should keep in mind while creating a micro frontend ecosystem:
single page application (SPA) rule: Each micro frontend component should be an SPA in itself for a seamless UX. Such SPA could be easily created using ReactJS or Angular.
The code structure approach: What approach do you use to structure the code? Should it be the distributed repo – where micro frontends are separated into multiple repositories with independent lifecycle management, or the monorepo – where a single repository exists? This depends entirely on the requirement. For instance, Bit.dev uses the distributed repo approach.
Dependency management: There are two dependencies to be managed – third-party dependencies and shared codes like utility methods and state of applications. The best practice is to use a private artifact repository.
Popular micro frontend frameworks
Here are some of the popular micro frontend frameworks:
Bit: It is considered the most popular and production-ready solution. One can utilize the independent components available to create a single product/solution.
Piral: It is considered the best option when one needs to create entry applications or portal applications.
Module Federation: It is most commonly used to negate code dependency issues. The JavaScript architecture allows the dynamic import of code from different applications at runtime.
Single SPA: The JavaScript framework applies a lifecycle to each application. It works best when one tries to integrate different frontend parts into one DOM at the runtime.
Challenges with using micro frontend architecture
Every approach has disadvantages, and micro frontends are no different. Organizations need to consider a few challenges that come with this approach:
- With the surge in the number of micro frontends, there will be an increase in the number of teams, tools, and codebases, increasing the operational complexity.
- The micro frontend architecture supports a decoupled system. There needs to be efficient communication between the independent components for the application to run as a whole. The assembly, deployment, and configuration processes require additional effort to make this possible.
- Different teams use different technologies and standards to deliver the micro frontends. These teams may not be on the same page. Following established guidelines can be challenging and may impact the overall user experience.
As frontend codebases continue to get complex, there is a need for a scalable architecture. Micro frontends empower one to divide a massive task into manageable chunks independent of each other. This makes the modules efficient and easily organizable. It is no wonder that businesses are following micro frontends architecture, and it is becoming a trend for building web-based applications.
Conclusion:
Micro Frontends are a great component model for transforming frontend web development. Understanding how micro frontends work, best practices of building micro frontend architecture, and the challenges involved can help you decide how you can best implement micro frontends for your business.
Nous infosystems offers deep expertise in digital experience design and UI engineering and development. Learn how our design experts can help you adopt a micro frontend approach and leverage the latest technologies to develop scalable frontends.
