Articles

Part 2: Diving Deep into the Technicalities of Micro Frontends

This article explores the technical details of Autodoc's move to micro frontends, focusing on state management, server-side rendering, SEO, authentication, translations, routing, and performance improvements.
View all posts

The Technical Side of Micro Frontends at Autodoc

 

In Part 1, we introduced the journey from a monolithic architecture to micro frontends at Autodoc. Now, let’s explore the technical aspects of this transformation. We’ll discuss how we manage states, handle server-side rendering (SSR), ensure SEO, deal with authentication, translations, routing, hydration, and optimize performance.

State Management with Event Emitters

 

Managing state in a monolithic application was straightforward, but with micro frontends, we needed a new approach. We use event emitters to handle state across different micro frontends during SSR. Event emitters allow various components to communicate efficiently, ensuring a seamless user experience.

Server-Side Rendering (SSR) and SEO

 

SSR is crucial for performance and SEO. By rendering content on the server before sending it to the client, we ensure faster load times and better search engine visibility. Our SHELL application, built with Astro.js, handles SSR, ensuring all micro frontends are rendered correctly and efficiently.

 

For SEO, we ensure that each micro frontend includes all necessary meta tags, titles, and descriptions. This ensures that search engines can index our content effectively, improving our visibility and ranking.

Authentication and Cookies

 

Managing authentication across a monolithic and micro frontend system can be complex. We use cookies to handle authentication seamlessly. The authentication data stored in cookies is accessible to both the monolith and the micro frontends, ensuring a consistent and secure user experience.

Translations

 

Autodoc operates in multiple languages, so handling translations efficiently is essential. Each micro frontend is responsible for its translations, which allows us to update and deploy translations independently. We use a shared library for common translations to ensure consistency across the application.

Routing: Static and Dynamic

Routing in a monolithic application is straightforward, but with micro frontends, it becomes more complex. We use a combination of static and dynamic routing to handle different paths. The SHELL application manages the main routing logic and delegates route handling to the respective micro frontends.

 

  • Static Routing: Predefined routes that do not change frequently.

  • Dynamic Routing: Routes generated based on user interactions or data fetched from APIs.

Hydration for Better Performance

 

Hydration is the process of converting static HTML generated during SSR into a fully interactive app on the client side. It ensures that the user sees content quickly, while JavaScript takes over to make the page interactive. Our approach to hydration ensures a smooth and fast user experience, even with multiple micro frontends.

Performance Optimization

Performance is a top priority for us. We employ several strategies to ensure our micro frontends load quickly and run smoothly:

 

  1. Code Splitting: We split our code into smaller chunks, allowing the browser to load only the necessary parts.

  2. Lazy Loading: We load components only when they are needed, reducing initial load times.

  3. Caching: We use caching strategies to store frequently accessed data, reducing server load and improving response times.

  4. CDNs: Content Delivery Networks (CDNs) distribute our static assets globally, ensuring fast delivery to users regardless of their location.

Conclusion

Transitioning from a monolithic architecture to micro frontends has been a transformative journey for Autodoc. While it brings challenges, the benefits in terms of scalability, agility, and performance are immense. By leveraging modern technologies and best practices, we’re building a robust, flexible, and future-proof system that will serve our customers and business needs for years to come.

Stay tuned as we continue to innovate and share our learnings from this exciting journey!

 

Author: Matteo Baratella, Principal Front-End Software Engineer

, Articles

Related stories