JSNation 2022191 min
Is Module Federation Right for You?
#micro-frontends
SubscribeMicro-frontends is a modern architectural approach that divides the user interface of an application into smaller, self-contained units, each with its own distinct technology stack and development team. Each micro-frontend is responsible for rendering a specific part of the UI and can be independently deployed, updated, and scaled. This allows for greater flexibility and scalability, as well as faster development cycles. It also enables teams to use different frameworks and libraries for different parts of the application, allowing them to focus on the best tools for the job.
Scaling Up with Remix and Micro Frontends
Remix Conf Europe 2022
Remix Conf Europe 202223 min
Scaling Up with Remix and Micro Frontends
Top ContentThis 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.
Monolith to Micro-Frontends
React Advanced Conference 2022
React Advanced Conference 202222 min
Monolith to Micro-Frontends
Top ContentMicrofrontends 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.
Microfrontends in Safety Critical Aviation SystemsJSNation 2024
JSNation 20249 min
Microfrontends in Safety Critical Aviation Systems
AWS SafeKit is a market leader in airport control software, managing the entire operation of an airport. Microfrontends extend microservice architecture to the frontend, allowing components to be combined at runtime. Module federation from Webpack is a popular approach for loading remote modules. Microfrontends offer benefits such as incremental upgrades and deployment independence, but also come with downsides like poor performance and complexity. Microfrontends are recommended for large-scale enterprise applications with distinct requirements and the need for experimentation.
Building a Better Micro-Frontend Framework That Enables Platform Freedom
React Day Berlin 2023Watch video: Building a Better Micro-Frontend Framework That Enables Platform Freedom
React Day Berlin 202328 min
Building a Better Micro-Frontend Framework That Enables Platform Freedom
This talk discusses the challenges of scaling and maintaining applications and how architecture decisions can impact them. It introduces the concept of Microfrontend and its advantages of easier scaling, issue identification, and diversification of technology stacks. The implementation of Microfrontend at Red Hat is explained, including the use of a new framework, communication strategies, and the need for scalability and maintenance in large applications. The talk also covers the multiplying architecture framework of micro frontend and its core components. The implementation of Microfrontend in VS Code and examples of combining different frameworks into a single application are showcased. The issue of duplication of library loading is addressed using federated modules in webpack.
Challenges of Decomposing a Massive Front-End Using Micro-FrontendsReact Day Berlin 2023Watch video: Challenges of Decomposing a Massive Front-End Using Micro-Frontends
React Day Berlin 202328 min
Challenges of Decomposing a Massive Front-End Using Micro-Frontends
Microfrontends offer a potential solution to frontend engineering problems, improving testing efficiency and allowing for faster development. There are misconceptions about microfrontends, with different approaches such as horizontal and vertical splits. Monorepos are recommended for managing microfrontends. Data management and side effects can be handled through various approaches. Building microfrontends without a monorepo can be challenging, but it depends on the scale of the application. Trust in people and implementing a registry of components help avoid duplication. Tools like Module Federation and NX are useful for managing microfrontends.
Micro-Frontends With React & Vite Module FederationReact Advanced Conference 2023Watch video: Micro-Frontends With React & Vite Module Federation
React Advanced Conference 202320 min
Micro-Frontends With React & Vite Module Federation
Top ContentMicrofrontends 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.
“Microfrontends” for Mobile in React NativeReact Advanced Conference 2023Watch video: “Microfrontends” for Mobile in React Native
React Advanced Conference 202324 min
“Microfrontends” for Mobile in React Native
Top ContentMicro frontends are an architectural style where independent deliverable frontend applications compose a greater application. They allow for independent development and deployment, breaking down teams into feature verticals. React Native's architecture enables updating the JavaScript layer without going through the app store. Code Push can be used to deploy separate JavaScript bundles for each micro frontend. However, there are challenges with managing native code and dependencies in a micro frontend ecosystem for mobile apps.
Federated Microfrontends at Scale
React Summit 2023Watch video: Federated Microfrontends at Scale
React Summit 202331 min
Federated Microfrontends at Scale
Top ContentThis Talk discusses the transition from a PHP monolith to a federated micro-frontend setup at Personio. They implemented orchestration and federation using Next.js as a module host and router. The use of federated modules and the integration library allowed for a single runtime while building and deploying independently. The Talk also highlights the importance of early adopters and the challenges of building an internal open source system.
Platform Freedom with Micro-frontendsReact Advanced Conference 2022
React Advanced Conference 202231 min
Platform Freedom with Micro-frontends
This talk explores Microfrontend strategies and the benefits of using the multiplying architecture to deploy applications on multiple platforms. It discusses the concepts of platform freedom, microfrontend implementation, and Backend for Frontend (BFF). The talk also highlights the challenges of debugging and styling in larger microfrontend applications and introduces the multiplying architecture as a solution. It explains the core elements of the multiplying architecture and how it enables communication between different tech stacks. The talk concludes by showcasing the use of embedded lists, federated modules, and Webpack configuration to achieve efficient code sharing and deployment across multiple distributions.
Using ES Modules Based Micro-Frontends to Enable Distributed DevelopmentReact Advanced Conference 2022
React Advanced Conference 202228 min
Using ES Modules Based Micro-Frontends to Enable Distributed Development
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.
Adopting Micro-Frontends Without Micro-FrontendsReact Advanced Conference 2022
React Advanced Conference 202230 min
Adopting Micro-Frontends Without Micro-Frontends
Today's Talk explores the adoption of micro frontends without actually implementing them. The main benefits of micro frontends are business scalability and the ability to independently deploy and compose frontend applications. The process of breaking up a monolith into smaller parts can be done using LEAN principles and composable apps. State management and data sharing in micro frontends are complex topics that require careful consideration to avoid coupling and maintain loose coupling.
JSNation 2022
Sharing is Caring: (How) Should Micro Frontends Share State?React Summit 2022
React Summit 202223 min
Sharing is Caring: (How) Should Micro Frontends Share State?
Top ContentMicro-frontends allow development teams to work autonomously and with less friction and limitations. Organizing teams around business concerns, in alignment with subdomains, rather than technical concerns, can lead to software that is split nicely and user stories falling under the responsibility of a single team. Having a logical backup or reference point is important for implementing microfrontends without breaking their isolation. Microfrontends can communicate with each other using the window object and custom events. Microfrontends should be kept isolated while maintaining communication through various approaches.
React Microfrontend Applications for TVs and Game ConsolesReact Summit 2022
React Summit 202225 min
React Microfrontend Applications for TVs and Game Consoles
This Talk discusses the architecture journey of a sports engagement platform, transitioning from a monolith to a microfrontend architecture. The ALEP microfrontend architecture is introduced to manage the complexity of a complex catalog and enable efficient deployment and version management. The deployment and release process involves using AliB and updating metadata in the deployment dashboard. The integration to React and TV development process involves using the AliB package and having independent lifecycles for packages. Shared code is used across different targets, and testing is done in a remote virtual lab. Focus management and key moments detection in sports are also addressed.
Keeping Sane with React Micro-Frontends in Production by Applying ObservabilityReact Summit 2022
React Summit 20227 min
Keeping Sane with React Micro-Frontends in Production by Applying Observability
Observability for microfrontends involves defining clear separation of concerns between teams and tracking errors in production with structured events. By using React boundaries, failures can be isolated and high observability can be achieved. Logging errors with metadata allows for querying specific error types and receiving notifications. Automating the process with Terraform simplifies observability for microfrontends.
Observability for Microfrontends
DevOps.js Conf 2022
DevOps.js Conf 202224 min
Observability for Microfrontends
Microfrontends follow the microservices paradigm and observability is crucial for debugging runtime production issues. Error boundaries and tracking errors help identify and resolve issues. Automation of alerts improves incident response. Observability can help minimize the time it takes to understand and resolve production issues. Catching errors from the client and implementing boundaries can be done with tools like OpenTelemetry.
How Hopin is Moving 10x Faster: Microfrontends at ScaleReact Advanced Conference 2021
React Advanced Conference 202125 min
How Hopin is Moving 10x Faster: Microfrontends at Scale
This Talk discusses how Hoping uses micro frontends to improve development speed and create boundaries between applications. They break up apps into smaller, independently deployable apps owned by small teams. They use webpack and module federation to integrate dependencies at runtime and have a lightweight store for sharing state. The Talk also addresses performance concerns and the importance of explicit contracts and namespace styles to avoid conflicts between micro frontends.
Micro-Frontends Performance and Centralised Data CachingReact Advanced Conference 2021
React Advanced Conference 202127 min
Micro-Frontends Performance and Centralised Data Caching
Micro front-end architecture, like microphone tents, can help scale applications by applying microservices principles to the front-end. Microphone tents can be beneficial for performance, depending on the implementation. They can reduce bundle sizes, avoid duplicated dependencies, and ensure independent deployments. The shared API and module federation are powerful features that allow for dependency management. Micro front-ends can improve developer experience and user experience while addressing organizational and scaling issues.
Micro Frontends in React — a State of the Art Approach
React Finland 2021
React Finland 202130 min
Micro Frontends in React — a State of the Art Approach
David will explain the different possibilities to implement MicroFrontends in the past, the present, and the future. More importantly, he will leave you to know which of the available approaches is best suited for your specific task at hand.
The Micro-Frontend Revolution at Amex
Node Congress 2021
Node Congress 202128 min
The Micro-Frontend Revolution at Amex
This Talk discusses the micro front-end revolution at American Express, highlighting the challenges of independent delivery and the solution of micro frontends. The architecture involves a Node.js server for server-side rendering and module composition, with Holocron modules deployed to a CDN. The development workflow includes local development environments and CI pipelines. Microfrontends are a pattern, not a set of tools, and should be implemented based on the specific use case. The adoption challenges include reworking the architecture and implementing features like Webpack and Module Federation. Communication between modules should be kept independent, and migration to micro frontends is simplified with existing microservices and Kubernetes. Server-side rendering is optional, and bundle size is limited to 250K.
JSNation Live 2021113 min
Micro Frontends with Module Federation and React
Workshop
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.
JSNation Live 2021113 min
Micro-Frontends with Module Federation and Angular
Workshop
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.
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.