English versionEN

We Accidentally Built a Plugin SDK for Micro Frontends

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.

This talk has been presented at React Advanced 2024, check out the latest edition of this React Conference.

FAQ

The talk focuses on how Betamax accidentally built a plugin SDK for microfrontends while migrating from AngularJS to React.

Betamax aims for no or close to no coupling between applications, adaptability based on roles and permissions, and separation of concerns on the micro frontend level.

Andre is a principal engineer at Betamax, a Berlin-based education tech company.

Betamax initially used a traditional multi-page application powered by PHP.

Betamax decided to migrate from AngularJS to React after Google discontinued long-term support for AngularJS.

Betamax used a micro frontend approach to iteratively migrate from AngularJS to React.

Betamax currently runs 58 microfrontends.

No, Betamax uses a single shared version of React for all micro frontends.

Betamax employs a testing pyramid strategy, using React testing library for low-level testing, snapshot testing, integration tests for interactions, and end-to-end testing for smoke tests.

Cross-application communication is handled via services using RxJS under the hood, allowing for communication without direct coupling between apps.

micro-frontends architecture

André Bauer

27 min

25 Oct, 2024

Comments

Video Summary and Transcription

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.

Available in Español: Accidentalmente Construimos un Plugin SDK para Micro Frontends

Video transcription and chapters available for users with access.

Available in other languages:

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

Scaling Up with Remix and Micro Frontends

Remix Conf Europe 2022

23 min

Scaling Up with Remix and Micro Frontends

Top Content

Adrien Baron

Maker of clashofstats.com, Vue GWT and Tiny Frontend

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.

remix javascript micro-frontends architecture

Understanding React’s Fiber Architecture

React Advanced 2022

29 min

Understanding React’s Fiber Architecture

Top Content

Tejas Kumar

Author of the "Fluent React" bestselling book, software engineer with 23 years of experience, and host of the developer-loved ConTejas Code podcast.

This Talk explores React's internal jargon, specifically fiber, which is an internal unit of work for rendering and committing. Fibers facilitate efficient updates to elements and play a crucial role in the reconciliation process. The work loop, complete work, and commit phase are essential steps in the rendering process. Understanding React's internals can help with optimizing code and pull request reviews. React 18 introduces the work loop sync and async functions for concurrent features and prioritization. Fiber brings benefits like async rendering and the ability to discard work-in-progress trees, improving user experience.

react architecture concurrent rendering react 18 beginner friendly react fiber react reconciliation

Full Stack Components

Remix Conf Europe 2022

37 min

Full Stack Components

Top Content

Kent C. Dodds

Creator of EpicWeb.dev, EpicReact.Dev, TestingJavaScript.com

RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.

remix javascript fullstack architecture

Monolith to Micro-Frontends

React Advanced 2022

22 min

Monolith to Micro-Frontends

Top Content

Ruben Casas

Postman

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.

case study micro-frontends developer challenges micro frontends react

The Eternal Sunshine of the Zero Build Pipeline

React Finland 2021

36 min

The Eternal Sunshine of the Zero Build Pipeline

m4dz

DX Engineer at alwaysdata

For many years, we have migrated all our devtools to Node.js for the sake of simplicity: a common language (JS/TS), a large ecosystem (NPM), and a powerful engine. In the meantime, we moved a lot of computation tasks to the client-side thanks to PWA and JavaScript Hegemony.
So we made Webapps for years, developing with awesome reactive frameworks and bundling a lot of dependencies. We progressively moved from our simplicity to complex apps toolchains. We've become the new Java-like ecosystem. It sucks.
It's 2021, we've got a lot of new technologies to sustain our Users eXperience. It's time to have a break and rethink our tools rather than going faster and faster in the same direction. It's time to redesign the Developer eXperience. It's time for a bundle-free dev environment. It's time to embrace a new frontend building philosophy, still with our lovely JavaScript.
Introducing Snowpack, Vite, Astro, and other Bare Modules tools concepts!

build tools vite architecture programming concepts

Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components

React Summit 2022

17 min

Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components

Top Content

Thomas Findlay

Findlay Web Tech

Today's Talk discusses building flexible, resilient, and future-proof React components using composition and configuration approaches. The composition approach allows for flexibility without excessive conditional logic by using multiple components and passing props. The context API can be used for variant styling, allowing for appropriate styling and class specification. Adding variants and icons is made easy by consuming the variant context. The composition and configuration approaches can be combined for the best of both worlds.

react components component library architecture programming concepts react composition react fiber

Workshops on related topic

AI on Demand: Serverless AI

DevOps.js Conf 2024

163 min

AI on Demand: Serverless AI

Top Content

Featured WorkshopFree

Nathan Disidore

In this workshop, we discuss the merits of serverless architecture and how it can be applied to the AI space. We'll explore options around building serverless RAG applications for a more lambda-esque approach to AI. Next, we'll get hands on and build a sample CRUD app that allows you to store information and query it using an LLM with Workers AI, Vectorize, D1, and Cloudflare Workers.

serverless architecture artificial intelligence

Micro Frontends with Module Federation and React

JSNation Live 2021

113 min

Micro Frontends with Module Federation and React

Workshop

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.

react micro-frontends micro frontends react module federation react

High-performance Next.js

React Summit 2022

50 min

High-performance Next.js

Workshop

Michele Riva

Next.js is a compelling framework that makes many tasks effortless by providing many out-of-the-box solutions. But as soon as our app needs to scale, it is essential to maintain high performance without compromising maintenance and server costs. In this workshop, we will see how to analyze Next.js performances, resources usage, how to scale it, and how to make the right decisions while writing the application architecture.

performance next.js best practices architecture

Is Module Federation Right for You?

JSNation 2022

191 min

Is Module Federation Right for You?

WorkshopFree

Grgur Grisogono

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.

micro-frontends modules

Micro-Frontends with Module Federation and Angular

JSNation Live 2021

113 min

Micro-Frontends with Module Federation and Angular

Workshop

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.

micro-frontends angular micro frontend react and angular module federation react