In our previous article, we covered the tools and technologies for building microfrontends, including a step-by-step guide to setting up a microfrontend architecture using , this microfrontend is responsible for rendering the main navigation bar across the application.
Products: Developed with , this microfrontend handles the checkout process, including the shopping cart and payment flow.
Utility Module: Created with , this microfrontend manages shared utilities and handles communication between different parts of the application.
Each of these microfrontends is an independent application that can be developed, tested, and deployed separately. Let's explore each one in more detail.
We mix all this techs to show the possibilities of what you can do, in a real project you’ll probably have 1 or 2 frameworks at most. And in my personal opinion it is not a good practice to mix them all, just because you can do it, doesn't mean you should do it.
Navigation Microfrontend (React)
The Navigation microfrontend provides a consistent navigation experience across the application. It is built using React and serves as a shared component for the entire application.
By developing the navigation as a microfrontend, it can be updated independently of the other parts of the application. For example, if there is a design change or a new menu item needs to be added, the navigation team can make those changes without affecting the rest of the application.
Key Considerations: Make sure that navigation seamlessly integrates with other microfrontends. Any changes in routes or URLs need to be carefully coordinated with other microfrontends to ensure a smooth user experience.
Products Microfrontend (Vue)
The Products microfrontend handles the product catalog and is built using Vue. This microfrontend is responsible for displaying product listings, product details, and filtering options.
Vue was chosen for its lightweight nature and its ease of integration into existing applications, making it a good choice for developing feature-focused microfrontends like the product catalog.
Key Considerations: Ensure consistent styling across the entire application. Vue components should follow a shared design system to maintain a consistent look and feel across the application.
Checkout Microfrontend (Angular)
The Checkout microfrontend is built using Angular and focuses on the checkout experience, including handling the shopping cart, customer information, and payment flow.
Angular is a good choice for this part of the application due to its strong support for building complex forms, as well as its dependency injection system, which can simplify state management within the checkout process.
Key Considerations: The checkout microfrontend must interact smoothly with the products microfrontend to ensure that products added to the cart are correctly carried over to the checkout process.
Utility Module (RxJS and Single-Spa)
The Utility Module is built with RxJS and Single-Spa to manage cross-microfrontend communication. This module serves as a shared utility that can be used to share state, trigger events, or communicate between different microfrontends.
RxJS is particularly useful for implementing the or
Conclusion
Exploring different microfrontend projects highlights the flexibility of a microfrontend architecture. By splitting a large application into smaller, independently deployable units, teams can work autonomously while ensuring that the overall user experience remains consistent.
Managing communication between microfrontends is key to providing a cohesive application, and tools like RxJS can help facilitate this communication in a loosely coupled manner.
In the next and final article of this series, we will explore best practices and lessons learned from implementing microfrontends, along with a practical example of adding a new microfrontend to the existing architecture.
SOCIAL SHARE CARD GENERATOR