React Advanced

React Advanced 2023

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.

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.

Micro-Frontends With React & Vite Module Federation

Giorgio Boa

React Advanced 2022

JP Morgan is using modern web technologies like the UITK and Modular to address challenges in their large-scale development environment. They employ micro front-ends with ES modules for dynamic loading and sharing theming using CSS variables. The applications are built using modular, which allows for scaffolding and creating new applications from templates. They rely on an opinionated approach to app creation and use a CDN for efficient deployment and caching. The host application handles user authentication and communication between micro front-ends, while platform services like authorization and authentication are provided by the digital platform.

A look at the open source tooling created by the UI Engineering group at JP Morgan to streamline the developer workflow of building and deploying apps in isolation while still delivering a single unifying micro-frontend based portal to the end user, leveraging the use of native support for ES module imports in the browser.

Using ES Modules Based Micro-Frontends to Enable Distributed Development

Steve King

JSNation Live

JSNation Live 2020

This Talk discusses module federation in Webpack 5 as a scalable solution for shared dependencies in large applications. Module federation allows separate builds for different parts of an application, reducing build time and deploy delay. It features exposed and shared modules, asynchronous loading, and container creation. Module federation supports container orchestration techniques and aims to integrate with ECMAScript modules. However, optimization and sharing in module federation may impact code size, and careful evaluation is necessary. Updating containers can be managed through active testing for stability.

Microfrontends as Monolith? Shared component library or styleguide? This technique allows to consume modules from separate builds, which can be developed and deployed independently. An introduction, and further ideas. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Module Federation in Webpack 5

Tobias Koppers

JSNation Live 2021

Today's Microfrontend Workshop with Module Federation covers configuring module federation, creating boundaries between micro frontends, routing, soft navigation, and communication between micro frontends. The workshop focuses on building and refactoring micro frontends using React and Lerna. It explores module exposition, webpack configuration, dynamic imports, and shared libraries. Participants learn about versioning, mounting components in React, and implementing communication between micro frontends. The workshop also covers Next.js and Expo micro frontends, dynamic script loading, and the importance of creating explicit APIs for communication.

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. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Micro Frontends with Module Federation and React

Alex Lobera

Microfrontends with module federation allow teams to develop and deploy separate parts of a system, simplifying integration into a common shell. Webpack 5 Module Federation solves the issue of loading separately compiled source code for microfrontends. Version mismatches in module federation can be handled using strategies and semantic versioning. Angular can be combined with module federation using a custom builder. Microfrontends can share data and libraries, and web components can be used to wrap and render components from different versions or frameworks. Module federation allows for version negotiation and runtime loading of microfrontends. React.js can be integrated with module federation, and web components can be used to share libraries across different applications. The bootstrap method and web components wrapper simplify the process of bootstrapping Angular applications and loading web components on demand.

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. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#module federation react