Micro-Frontends With React & Vite Module Federation

Spanish audio is available in the player settings

From my experience one of the hardest things is to share information between microfrontends, so in this talk I would like to explain various ways on how to share a design system to ensure uniformity to the application. Another difficult thing is sharing dependencies, fortunately with module federation it can be done, but how can I use different versions of the same library and how does it work behind the scenes?


I'm the creator of module-federation/vite library, with React and this library, I'd like to show you how you can achieve these results by configuring everything correctly.

This talk has been presented at React Advanced 2023, check out the latest edition of this React Conference.

Watch video on a separate page

FAQ

The speaker is Giorgio Boa, a Full-Stack Developer at Clarinet, open-source developer, and core maintainer collaborator of the QUIC framework. He has contributed significantly to the QUIC codebase since 2022.

State can be shared across microfrontends using custom events, broadcast channels, shared state managers like ZooStand, or custom PubSub implementations. It's essential to share as little information as possible to maintain decoupling.

Dependencies can be shared in microfrontends using module federation with Vite by defining a configuration that specifies the components and libraries to be shared. This configuration is similar to Webpack's and helps avoid downloading the same libraries multiple times.

Consistency in look and feel can be achieved by sharing styles across all microfrontends. This can be done using Vanilla CSS, CSS modules, or CSS-in-JS, ensuring that styles don't clash and look uniform across the application.

Module federation is a technique that allows different parts of a frontend application to be developed and deployed independently. It works well with microfrontends, enabling the sharing of dependencies and components between different microfrontends.

Yes, microfrontends can be used for small or mid-sized applications, especially to renovate legacy systems piece by piece using the Strangler pattern.

Post CSS prefix wrap for Webpack and post CSS prefixer for Vite help in avoiding CSS clashes by wrapping CSS classes with a prefix, ensuring that styles from different microfrontends do not interfere with each other.

Large companies use microfrontends to divide the frontend application and manage codebases more efficiently across multiple teams. This architecture helps in decoupling the deploy and development processes.

Microfrontends can be split either vertically or horizontally. Vertical splits involve separating different pages or sets of pages, while horizontal splits divide components across the application, like the menu, app bar, or dashboards.

Microfrontends are akin to microservices but for the frontend. They allow splitting a monolithic frontend application into smaller, manageable pieces, enabling better management and easier updates.

Giorgio Boa
Giorgio Boa
20 min
23 Oct, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Microfrontends is an architecture used by big companies to split monolithic frontend applications into manageable parts. Maintaining a consistent look and feel across different microfrontends is a challenge. Sharing styles can be done through Vanilla CSS, CSS modules, or CSS in JS. JavaScript variables can be used in styles, but readability and runtime overhead are considerations. Sharing state in microfrontends can be achieved through custom events, broadcast channels, shared state managers, or custom PubSub implementations. Module federation with Vite allows for client composition and sharing dependencies. Configuration is similar to Webpack, and future work includes working on the QUIC framework.

1. Introduction to Microfrontends

Short description:

Microfrontends is an architecture that allows us to split a monolithic frontend application into multiple microfrontends. We can have vertical splits, where each microfrontend is responsible for a specific page or multiple pages, or horizontal splits, where different teams manage different parts of the application. This architecture is used by many big companies to easily manage their frontend codebase. Even if you have a small application, you can use microfrontends to gradually replace parts of your legacy application. However, one challenge is maintaining a consistent look and feel across different microfrontends.

Hello, everybody! Welcome to this talk, Microfrontends with React and Module Federation with Vitz. I would like, with Microfrontends... I know that this is a React Advanced Conference, but I would like to share with you Microfrontends architecture for those that don't know really well into deep the architecture.

So, Microfrontends is more or less what is microservices, but for the front-end. If we have a monolith, we can split the server part in microservices to manage better the endpoints and also the features, but in this particular case, the front-end is a monolith. So we can slice the monolith, the front-end monolith into many microfrontends, and that's more or less the architecture. We can have multiple vertical domains, so we can have one frontend in React, one another in Angular, and for example, another in Vue. And theoretically, microfrontends is both, so the server part and also the frontend part. But how we can slice the monolith? So we can slice our application, frontend application, into different ways.

We have a vertical split, so one microfrontend for each page or multiple pages. The blue team is looking for the homepage, and the red team is managing the checkout. Or we can split in a horizontal way. The blue team is the owner of the menu and the app bar, and the red, the green and the red is managing the dashboards. So this is more or less how we can split the monolith in vertical and in horizontal. But do we need, do I need this type of architecture?

These are some of the companies that are using micro frontend, and as you can notice, these are big companies. So this architecture is born to divide the frontend application and manage easily the codebase into multiple teams. But if I have a mid or a small application, I can use this concept, this architecture for the Strangler partner. So if I have a legacy application, I can replace pieces of my application to renovate it. So if you have an house and you want to, for example, renovate your garden, you can rip off all the old garden and put a new one. So that's more or less the idea that we can apply to our legacy application. So there are a lot of challenges in this process. One of them is the look and feel. So here you can see it's a modern house. So if we go into this modern house, we visit a little bit the location. We can see the kitchen that is a modern kitchen. We can go to the living room. But if we go to the bathroom, and we go into the bedroom, and we see this different style, it's a little bit weird. So you can imagine this concept in our application. We go into the home page, and it's really cool. We go into the product page, and it's cool as well.

2. Managing Styles in Microfrontends

Short description:

We need to share a style through the whole application to avoid different styles in different parts. We can use Vanilla CSS and inject style sheets, but we may face clashes. To avoid clashes, we can use npm package post CSS prefix wrap or post CSS prefixer for Vite. Another approach is to use CSS modules or CSS in JS, which allows locally scoped styles and easy management.

We go to the checkout, and we can see a completely different style. So our look and feel of the application need to be the same to avoid this kind of problematic or odd situation. So we need to share a style through the whole application, but how we can share these styles?

So we can use Vanilla CSS. So we have Microfrontend A and Microfrontend B. We can simply inject the style sheet inside of the page and we can define two classes, card title. So Microfrontend A has a card title with the color black and we have Microfrontend B with the same name with a color red. At the end, if we inject in this specific order the style sheets, we have the result is card title red, because the last CSS win override the other. So how we can avoid in this kind of situation this problem?

We can use npm package. This is for webpack, is post CSS prefix wrap. Basically, what is doing, is wrapping our CSS and put a prefix for all the CSS to avoid this clashes. It's quite used, more than 19,000 of download, weekly download in npm. But if your application is in Vite, you can use post CSS prefixer. As you can see here, we are defining the selector, and the output is prefix underscore underscore selector. So, it's wrapping for us in the building process, it's wrapping the CSS and giving us a possibility to define a CSS without clash other CSS from other micro frontends.

We have an independent possibility to define our class and use them. Or we can use another way is to use CSS modules. So, we can define this kind of type of file, so card.module.css, we define our CSS, so card background color black. Then we can import this module.css into our React component. And we can use this object styles.card. So, this card is basically our CSS, we can inject into the JSX of our React component. And the build process output will be more or less like this. So, card this is the name of the module. Card is the main name of the CSS. And we have this unique ID that avoids clashes through the other CSS. And this is locally scoped. So, we don't have a problem with other cart properties, cart CSS into the other files.

Another way to manage the style is CSS in JS. It's locally scoped style, like the CSS model we saw before, so we avoid clashes. It's a good approach for the co-location because we can co-locate the CSS into our JavaScript file or TypeScript file, so into our React component. The CSS is really nearby our component, so it's easy to manage the style and the other things.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Vite: Rethinking Frontend Tooling
JSNation Live 2021JSNation Live 2021
31 min
Vite: Rethinking Frontend Tooling
Top Content
Vite is a next-generation build tool that leverages native ES modules for improved performance. It eliminates the need for bundling and improves hot module replacement. Vite provides an opinionated default configuration while still allowing advanced customization through plugins. It is framework agnostic and can be used for React and other applications. Vite is being adopted by Next.js and Create React App, and integration with Nuxt 3 offers significant speed improvements.
Scaling Up with Remix and Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
React Compiler - Understanding Idiomatic React (React Forget)
React Advanced 2023React Advanced 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
Watch video: React Compiler - Understanding Idiomatic React (React Forget)
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Welcome to Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Welcome to Nuxt 3
Top Content
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
Monolith to Micro-Frontends
React Advanced 2022React Advanced 2022
22 min
Monolith to Micro-Frontends
Top Content
Microfrontends are considered as a solution to the problems of exponential growth, code duplication, and unclear ownership in older applications. Transitioning from a monolith to microfrontends involves decoupling the system and exploring options like a modular monolith. Microfrontends enable independent deployments and runtime composition, but there is a discussion about the alternative of keeping an integrated application composed at runtime. Choosing a composition model and a router are crucial decisions in the technical plan. The Strangler pattern and the reverse Strangler pattern are used to gradually replace parts of the monolith with the new application.
Turbopack. Why? How? When? and the Vision...
React Day Berlin 2022React Day Berlin 2022
32 min
Turbopack. Why? How? When? and the Vision...
The Talk discusses TurboPack, a successor to Webpack, aiming to create a framework-independent, flexible, and extensible tool for the open-source community. It addresses performance challenges by integrating SWC into Next.js. The challenges with Next.js and Webpack include orchestration issues, backward compatibility constraints, and cache invalidation problems. TurboEngine and TurboPack provide constant performance in incremental builds, leveraging Rust's predictable performance and parallelism. The Talk also covers topics like dependency tracking, task graphs, cache invalidation, lazy asset graphs, and the integration of TurboPack with Next.js. The future plans involve reconfiguring Webpack and TurboEngine, moving computations to the cloud, providing insights into builds, and facilitating migration and integration with JavaScript projects.

Workshops on related topic

Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
React Day Berlin 2022React Day Berlin 2022
86 min
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
Top Content
WorkshopFree
Hussien Khayoon
Kahvi Patel
2 authors
Using a library might seem easy at first glance, but how do you choose the right library? How do you upgrade an existing one? And how do you wade through the documentation to find what you want?
In this workshop, we’ll discuss all these finer points while going through a general example of building a code editor using CodeMirror in React. All while sharing some of the nuances our team learned about using this library and some problems we encountered.
Micro Frontends with Module Federation and React
JSNation Live 2021JSNation Live 2021
113 min
Micro Frontends with Module Federation and React
Workshop
Alex Lobera
Alex Lobera
Did you ever work in a monolithic Next.js app? I did and scaling a large React app so that many teams can work simultaneously is not easy. With micro frontends you can break up a frontend monolith into smaller pieces so that each team can build and deploy independently. In this workshop you'll learn how to build large React apps that scale using micro frontends.
Micro-Frontends with Module Federation and Angular
JSNation Live 2021JSNation Live 2021
113 min
Micro-Frontends with Module Federation and Angular
Workshop
Manfred Steyer
Manfred Steyer
Ever more companies are choosing Micro-Frontends. However, they are anything but easy to implement. Fortunately, Module Federation introduced with webpack 5 has initiated a crucial change of direction.
In this interactive workshop, you will learn from Manfred Steyer -- Angular GDE and Trusted Collaborator in the Angular team -- how to plan and implement Micro-Frontend architectures with Angular and the brand new webpack Module Federation. We talk about sharing libraries and advanced concepts like dealing with version mismatches, dynamic Module Federation, and integration into monorepos.
After the individual exercises, you will have a case study you can use as a template for your projects. This workshop helps you evaluate the individual options for your projects.
Prerequisites:You should have some experience with Angular.