Remix Conf Europe

Remix Conf Europe 2022

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.

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.

Scaling Up with Remix and Micro Frontends

Adrien Baron

React Advanced

React Advanced 2022

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.

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.

Monolith to Micro-Frontends

Ruben Casas

React Advanced 2024

Welcome to the talk on Microfrontends and Betamax. The speaker shares their experience of accidentally building a plugin SDK for microfrontends. They discuss the goals and bootstrapping process, emphasizing the importance of adaptability and separation of concerns. The use of behavior subjects and portal rendering is explained, along with the composition and resilience of microfrontends. The speaker demonstrates rendering REC.js within AngularJS and highlights the challenges of handling communication and deployment. They also discuss managing breaking changes, local development, testing, and shared dependencies. The talk concludes with a humorous anecdote and contact information for further engagement.

React portals + RxJs = micro frontends on steroids.At bettermarks, we are migrating an AngularJS app to React using micro frontends. Picture a dashboard with widgets from different frontends depending on permissions and settings without coupling.We implemented a reliable solution for our micro frontends - and yes, we can embed React components within AngularJs!I'll showcase our solution and demonstrate how this can help you build more robust applications by trying to break our.

We Accidentally Built a Plugin SDK for Micro Frontends

André Bauer

JS Nation

JSNation 2024

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.

Are you being asked to create more frequent release with higher quality, but the team in the other office is constantly breaking your features? Microfrontends might be the answer for you! During this flight, we will fly over the pros and cons of microservices and frontend architectures, navigate the turbulent airs of migrating products to new architecture, and finally land at our destination of scalable software.

Microfrontends in Safety Critical Aviation Systems

Jarred Utt

React Day Berlin

React Day Berlin 2023

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.

A modern tooling experience usually involves a user journey on multiple mediums, including Web, VS Code, GitHub, etc. Writing custom code and components for each platform is not the most efficient approach, leading to code duplication and, most importantly, the risk of a lack of a cohesive experience. Multiplying Architecture is a set of patterns, techniques, and libraries that, using micro frontends and some innovative backend services, allow for the re-use of the tooling component in different distribution mediums Come to this talk to learn how we are able to enable multiple tooling teams across Red Hat to deliver the best native experience of UI components (s and Views) on VS Code, Web, and Desktop, and directly integrate them on GitHub(Chrome Extension) with minimal changes on their code base.

Building a Better Micro-Frontend Framework That Enables Platform Freedom

Saravana Srinivasan

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.

Our web UI application is pretty big - hundreds of people have been actively building it during the past eight years. We started facing scalability issues and technological limitations. We evaluated plenty of options and settled on micro-frontends. This evening we will discuss:- Differences between various micro-frontend architectures- Why we made this choice and if it's helpful for you- What we gained- What we sacrificed (yes, there are downsides)- What challenges are still ahead of us

Challenges of Decomposing a Massive Front-End Using Micro-Frontends

Oleksandr Tryshchenko

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

Micro 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.

Scaling has always been an issue in software development. Architects have been grappling to solve this problem on many layers. In the early 2000s, a concept of “micro-services” started popping up - a system could be split up by business domain into a number of smaller loosely-coupled services.  More recently, this concept has started being adopted by the frontend community. An app could be split into multiple sub-apps, each with their own teams, technologies, and codebases. Companies like Spotify, Amazon, and Microsoft have adopted this approach and it has helped them scale even faster. In the world of mobile development, the question arises: “Can we create Microfrontends for mobile apps?”.

“Microfrontends” for Mobile in React Native

Mo Khazali

React Summit

React Summit 2023

This 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.

The talk will be a story of how Personio went from rendering through a Monolithical PHP architecture, to a microfrontend oriented Next JS app, powered by Module Federation and the NX monorepo toolchain.

Federated Microfrontends at Scale

Daniel Bolivar

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.

Can React and TypeScript applications run on different platforms (app shells) with minimal source code changes ? Yes !!! with the Micro-frontend strategy in Multiplying architecture. I’ll be presenting a new dimension of Micro-frontend, that paved a way to decouple the components of a larger monolithic React application using a new framework called Multiplying architecture. The framework is highly flexible and scalable for code development, also aiding the business and community.

Platform Freedom with Micro-frontends

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

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.

Micro-frontends help break up monolithic front-end applications into independently deployable loosely-coupled apps. This architecture helps us scale projects as an organisation scales, however it's also an increase in complexity. How can we leverage this architecture without having to face its upfront cost? In this talk, I'll show some of the risks associated with micro-frontends, and what patterns and libraries we can use to benefit from this architectural style without going full-on micro-frontends.

Adopting Micro-Frontends Without Micro-Frontends

Alex Lobera

JSNation 2022

This workshop on micro-frontends covers topics like dependencies, communication between federated modules, team organizations, and code sharing. It emphasizes the benefits of module federation and micro-frontends in enabling continuous operation and collaboration. The workshop provides practical examples and discusses the challenges of managing breaking changes and handling conflicts. It also explores the use of React as a view rendering library and the importance of sharing data and controlling communication between feature apps.

Discover Micro Frontends with Module Federation. Learn about the benefits and pitfalls so you can decide whether Micro Frontends are a good fit for your organization.

Is Module Federation Right for You?

Grgur Grisogono

React Summit 2022

Micro-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.

Micro frontends architecture is extremely powerful when it comes to splitting large frontend monoliths into smaller, individually deployable blocks, each is owned by an autonomous team and is focused on a business domain. But what about State? We are often told that micro frontends shouldn't share state, as this would make them coupled to each other. However, when it comes to complex UIs, it is not rare to encounter scenarios where state management between micro frontends is necessary. This talk is about finding the sweet spot — In which scenarios it is reasonable for micro frontends to share State? and how should micro frontends share State while remaining decoupled of each other? We discuss &amp; compare different solutions in React.

Sharing is Caring: (How) Should Micro Frontends Share State?

Eliran Natan

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.

DAZN is the fastest-growing sports streaming service and during this talk, we will consider our experience building tv applications (for ps5, xbox, LG, Samsung and other targets) with micro frontend architecture. You may expect time travel to see how it started and what we have at the moment, what makes tv development different compared to the web, same as techniques that allow us to share code between targets. You will learn how we test our application with an in-house remote testing lab as well as our deployment and release process.

React Microfrontend Applications for TVs and Game Consoles

Denis Artyuhovich

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.

Teams are getting bigger by applying micro-frontends using React, but complexity tracking production issues can become extremely confusing when no clear responsibilities are met. That’s when observability for teams and applications on a scale becomes even more important, in order to be able to identify potential issues in production, separate the concerns and the responsibilities among them. In this presentation we’ll learn how we can achieve this.

Keeping Sane with React Micro-Frontends in Production by Applying Observability

Konstantinos Leimonis

DevOps.js

DevOps.js Conf 2022

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.

Teams are getting bigger and bigger following the micro-frontends architecture. Observability for teams on a scale becomes even more important in order not only to be able to identify potential issues in the runtime, but also separating the responsibilities. In this presentation we’ll learn how this can achieved. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Observability for Microfrontends

React Advanced 2021

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.

Hopin is the fastest-growing startup in the world. Many engineers join every month. Companies with different technologies are acquired every other month. It brings many challenges to our front-end architecture. In this talk I'll explain how we're breaking up our React monoliths and enabling interoperability using multiple React trees and reactive variables. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How Hopin is Moving 10x Faster: Microfrontends at Scale

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.

Common myths about Micro-Frontends hold that they are bad for performance or that developers implementing this architectural style don’t care about the performance implications because they are focusing on fixing the developer experience and organizational issues rather than focusing on the user experience, however, the reality is altogether different. Micro-Frontends are not inheritably bad for performance and, as is often the case in software development, making best use of the technology depends on correct implementation. This talk will demonstrate how Micro-Frontends can make your applications faster and more resilient while keeping the benefits of independent deployments. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Micro-Frontends Performance and Centralised Data Caching

React Finland

React Finland 2021

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

Micro Frontends in React — a State of the Art Approach

David Leitner

Node Congress

Node Congress 2021

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.

How do you scale a web application to be developed thousands of engineers and upgrade it to use the latest Javascript technologies (Nodejs + React)? The answer is, using Micro-Frontends!American Express is a pioneer in the usage of this architecture using it in production since 2016 and transforming the face of a website used millions of users worldwide. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The Micro-Frontend Revolution at Amex

JSNation Live

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

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>

#micro-frontends