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

Eliran Natan

Micro-Frontends with Module Federation and Angular

Manfred Steyer

Adopting Micro-Frontends Without Micro-Frontends

How Hopin is Moving 10x Faster: Microfrontends at Scale

Micro Frontends with Module Federation and React

Alex Lobera

Monolith to Micro-Frontends

Micro-Frontends Performance and Centralised Data Caching

The Micro-Frontend Revolution at Amex

Ruben Casas

Micro Frontends in React — a State of the Art Approach

David Leitner

React Microfrontend Applications for TVs and Game Consoles

Denis Artyuhovich

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

Observability for Microfrontends

Konstantinos Leimonis

Is Module Federation Right for You?

Grgur Grisogono

Building a Better Micro-Frontend Framework That Enables Platform Freedom

Platform Freedom with Micro-frontends

Saravana Srinivasan

Scaling Up with Remix and Micro Frontends

Adrien Baron

Micro-Frontends With React & Vite Module Federation

Giorgio Boa

Using ES Modules Based Micro-Frontends to Enable Distributed Development

Steve King

“Microfrontends” for Mobile in React Native

Mo Khazali

Federated Microfrontends at Scale

Daniel Bolivar

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

Oleksandr Tryshchenko

Remix Conf Europe

Remix Conf Europe 2022

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 Advanced

React Advanced Conference 2022

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.

React Day Berlin

React Day Berlin 2023

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.

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

React Advanced Conference 2023

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.

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?”.

React Summit

React Summit 2023

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.

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.

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.

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.

React Summit 2022

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.

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.

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.

DevOps.js

DevOps.js Conf 2022

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>

React Advanced Conference 2021

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>

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>

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>

Node Congress

Node Congress 2021

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>

JS Nation

JSNation 2022

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.

JSNation Live

JSNation Live 2021

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>

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