Micro-Frontends With React & Vite Module Federation

Rate this content
Bookmark

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.

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.

Available in Español

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 new build tool that intends to provide a leaner, faster, and more friction-less workflow for building modern web apps. This talk will dive into the project's background, rationale, technical details and design decisions: what problem does it solve, what makes it fast, and how does it fit into the JS tooling landscape.
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
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
React Compiler - Understanding Idiomatic React (React Forget)
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
Welcome to Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Welcome to Nuxt 3
Top Content
Explain about NuxtJS codebase refactor and challenges facing to implement Vue 3, Vite and other packages.
Monolith to Micro-Frontends
React Advanced Conference 2022React Advanced Conference 2022
22 min
Monolith to Micro-Frontends
Top Content
Many companies worldwide are considering adopting Micro-Frontends to improve business agility and scale, however, there are many unknowns when it comes to what the migration path looks like in practice. In this talk, I will discuss the steps required to successfully migrate a monolithic React Application into a more modular decoupled frontend architecture.
How Bun Makes Building React Apps Simpler & Faster
React Day Berlin 2022React Day Berlin 2022
9 min
How Bun Makes Building React Apps Simpler & Faster
Bun’s builtin JSX transpiler, hot reloads on the server, JSX prop punning, macro api, automatic package installs, console.log JSX support, 4x faster serverside rendering and more make Bun the best runtime for building React apps

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.