Log in
React Conferences
React Advanced 2025React Advanced 2025
EN

React-First Micro Frontends in Regulated Industries

Florian Rappl
Florian Rappl
smapiot
Video thumbnail
This video will go public in 21 days
Multipass and Full ticket holders have instant access to event recordings.
Please login if you have one.
Get Multipass

Register a free account to unlock access to this video in 6 days.

Bookmark
Rate this content

Micro Frontends are one of the tools to ensure scalability in large-scale applications. To properly use micro frontends some of the key properties of a monolith need to be given up. This can result in severe drawbacks that are especially visible in regulated industries such as healthcare.

In this talk we'll look at a large-scale web application that was developed for one of the world's leading medical technology suppliers. In particular, we investigate how the project managed to use best practices of both, the centralized and distributed computing area, to be scalable yet fully compliant to regulatory aspects.

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

FAQ

Micro-frontends are important in regulated industries because they allow for scalable, distributed development while adhering to strict regulatory and compliance standards, such as FDA approval in healthcare or ISO standards in automotive.

Challenges include adhering to regulatory and compliance standards, managing documentation and audits, and ensuring shared dependencies remain compliant across independent teams.

Teams can manage shared dependencies by using centrally shared dependencies for common libraries and tools, and distributed shared dependencies that are verified centrally to ensure compliance and compatibility.

A central team sets architectural boundaries, conducts testing and approval, and manages aggregation and orchestration to ensure compliance and optimal performance of the micro-frontends.

React benefits micro-frontends by allowing flexibility with runtime versions, reducing the risk of incompatibility, and enabling seamless updates without breaking existing functionality.

A loosely coupled architecture allows for flexible integration of components without direct dependencies, reducing the risk of breaking changes and enabling easier updates and compliance checks.

Micro-frontends are deployed with a pre-approval step ensuring only compliant and approved versions are used in production, with non-production environments allowing for broader testing and validation.

Documentation is crucial for ensuring compliance with regulatory standards, providing necessary paperwork for audits, and maintaining transparency and accountability across distributed teams.

Teams can ensure compliance by following a hybrid approach with a central team managing boundaries, using self-validation tools, and ensuring documentation and pre-validation are handled by individual teams.

Micro-frontends are the technical representation of a business subdomain, allowing independent implementations with the same or different technologies, minimizing shared code, and being owned by autonomous teams.

architecture
Florian Rappl
Florian Rappl
23 min
01 Dec, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Welcome to React-first micro-frontends in regulated industries. Introduction to micro-frontends and subdomains in web applications. Challenges of developing applications in regulated industries with strict rules and compliance regulations. Challenges of managing documentation and dependencies in micro front end solutions. Challenges in transitioning to a hybrid centralized-distributed approach for micro front ends. Control and orchestration in microfront-end environments; decentralized development and deployment with centralized oversight. Teams can choose not to upgrade to the latest version immediately; orchestration involves provisioning for end users and utilizing feature flags. In production, carefully selected microfront-ends are used. Using React offers advantages like easy version updates and dependency management. Avoid tightly coupling components from different micro-frontends. Opt for a loosely based approach with a registry in the central app shell for registering necessary fragments.
Available in Español: React-First Micro Frontends en Industrias Reguladas
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 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Adrien Baron
Adrien Baron
Creator of 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.
architecturejavascriptmicro-frontendsremix
Understanding React’s Fiber Architecture
React Advanced 2022React Advanced 2022
29 min
Understanding React’s Fiber Architecture
Top Content
Tejas Kumar
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.
architecturereactconcurrent renderingreact reconciliationreact 18react fiberbeginner friendly
Thinking Like an Architect
Node Congress 2025Node Congress 2025
31 min
Thinking Like an Architect
Top Content
Luca Mezzalira
Luca Mezzalira
Author of Front-End Reactive Architectures and Building Micro-Frontends
In modern software development, architecture is more than just selecting the right tech stack; it involves decision-making, trade-offs, and considering the context of the business and organization. Understanding the problem space and focusing on users' needs are essential. Architectural flexibility is key, adapting the level of granularity and choosing between different approaches. Holistic thinking, long-term vision, and domain understanding are crucial for making better decisions. Effective communication, inclusion, and documentation are core skills for architects. Democratizing communication, prioritizing value, and embracing adaptive architectures are key to success.
architecture
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Kent C. Dodds
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.
architecturejavascriptremixfullstack
The Eternal Sunshine of the Zero Build Pipeline
React Finland 2021React Finland 2021
36 min
The Eternal Sunshine of the Zero Build Pipeline
m4dz
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!
architecturebuild toolsprogramming conceptsvite
The Dark Side of Micro-Frontends
React Advanced 2025React Advanced 2025
29 min
The Dark Side of Micro-Frontends
Luca Mezzalira
Luca Mezzalira
Author of Front-End Reactive Architectures and Building Micro-Frontends
In the Talk, various key points were discussed regarding micro-front-end architecture. These included challenges with micro-intents, common mistakes in system design, the differences between micro-intents and components, granularity in software architecture, optimizing micro-front-end architecture, efficient routing and deployment strategies, edge computing strategies, global state and data sharing optimization, managing data context, governance and fitness functions, architectural testing, adaptive growth, value of micro-frontends, repository selection, repo structures, and web component usage.
architecture

Workshops on related topic

AI on Demand: Serverless AI
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
AI on Demand: Serverless AI
Top Content
Featured WorkshopFree
Nathan Disidore
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.
architectureartificial intelligenceserverless
High-performance Next.js
React Summit 2022React Summit 2022
50 min
High-performance Next.js
Workshop
Michele Riva
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.
architectureperformancenext.jsbest practices
Model Context Protocol (MCP) Deep Dive: 2-Hour Interactive Workshop
AI Coding SummitAI Coding Summit
86 min
Model Context Protocol (MCP) Deep Dive: 2-Hour Interactive Workshop
Workshop
Stepan Suvorov
Stepan Suvorov
Join a focused 2-hour session covering MCP's purpose, architecture, hands-on server implementation, and future directions. Designed for developers and system architects aiming to integrate contextual data with ML models effectively. Agenda:- Introduction & Why MCP? Key challenges MCP solves and core benefits.- Architecture Deep Dive: components, interactions, scalability principles. - Building Your Own MCP Server: guided walkthrough with code snippets and best practices; live demo or code review.- Future of MCP Developments: potential enhancements, emerging trends, real-world scenarios.
Key Takeaways:- Clear understanding of MCP's rationale.- Insight into design patterns and scaling considerations.- Practical steps to implement a prototype server.- Awareness of upcoming trends and how to apply MCP in projects. 
architecture