WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
WeAreDevelopers LIVE • Mar 22, 2024

Multiple Ships to the Island - Micro Frontends & Island Architectures

Florian Rappl

Merging micro frontends with island architectures delivers the ultimate balance between autonomous team workflows and exceptional web performance. Eliminate massive JavaScript bloat using server-side composition and partial hydration.

Pause
Mute Enter Fullscreen
#1 about 2 min

Introduction to micro frontends and platform architecture

Real-world experiences dictate building practical architectural designs for micro frontends.

#2 about 2 min

Understanding micro frontends as an organizational pattern

Distributing work across specific independent teams improves efficiency compared to single large groups.

#3 about 4 min

Server-side web integration and iframe composition frameworks

Different methods of loading user interface fragments involve reverse proxies and server-side templates.

#4 about 2 min

Implementing client-side composition and dynamic web components

Client-side composition combines independent scripts and custom elements directly in the browser.

#5 about 3 min

Independent deployment capabilities within an application shell

Application shells enable autonomous shipment of micro frontends without centralized coordination.

#6 about 4 min

Distinguishing domain components from generic functional components

Encapsulating related domain functionality defines boundaries for effective runtime component containers.

#7 about 6 min

Live configuration of custom micro frontend deployment options

Disabling individual micro frontends updates the user interface instantly via a central feed service.

#8 about 4 min

Optimizing browser performance using modern island architecture

Delivering minimal javascript payloads by identifying specific islands of interactivity significantly boosts loading times.

#9 about 5 min

Partial hydration and serialized state via resumability frameworks

Embedding serialized state within incoming HTML markup eliminates redundant client-side orchestration and execution steps.

#10 about 8 min

Combining server-side micro frontends and island architecture

Leveraging dynamic component logic over server-side environments creates fully distributed and scalable deployment systems.

#11 about 10 min

Building a distributed micro frontend application locally

A local implementation of an orchestrator dynamically extracts logic requirements before loading target micro frontends.

#12 about 4 min

Historic use cases of basic micro frontend isolation

Common third-party widgets utilize iframe encapsulation strategies to guarantee reliable and isolated styling perimeters.

#13 about 3 min

The impact of island architecture on web accessibility

Relying heavily on accurate server rendering components establishes standardized semantics required by screen readers.

#14 about 3 min

Establishing emulator pipelines for multi-repo application development

Utilizing dedicated dependency packages allows specialized engineering teams to test interface logic securely without application conflicts.

#15 about 2 min

Mixed framework loading strategies for interactive web islands

Standardizing user interface framework selections lowers required code dependencies when loading numerous components simultaneously.

#16 about 2 min

Evaluating server-side rendering factors for search engine optimization

Supplying parsed server documents securely against external network conditions avoids standard search engine indexing delays.

#17 about 2 min

Controlling framework logic constraints to improve loading performance

Enforcing strict boundaries around bundled framework bundles limits unneeded logic operations during micro frontend deployment.

Matching moments

2:30 min

Optimizing application performance using island architectures

Manfred Steyer Manfred Steyer · WWC 2024

1:40 min

Exploring islands architecture and mixed application bundling strategies

Julian Burr Julian Burr · WWC Europe 2026

2:07 min

Introduction to micro frontend architecture

Trishul Goel · JS Congress

3:55 min

Introduction to micro frontends and architectural consequences

Manfred Steyer Manfred Steyer · WWC 2021

1:31 min

Recapping frontend scaling patterns and distributed UI techniques

Josh Goldberg · WWC 2021

2:13 min

Transitioning monolithic page structures to distributed front-end architectures

Luca Mezzalira Luca Mezzalira · WWC 2024

More from WeAreDevelopers LIVE

Aliens in Quarantine, Python Deprecates Loops, and AI Buys Old Books - Zbyszek Tenerowicz thumbnail
5:43
5 days ago

Aliens in Quarantine, Python Deprecates Loops, and AI Buys Old Books - Zbyszek Tenerowicz

Chris Heilmann, Daniel Cranney

WeAreDevelopers LIVE - Node and Package Security thumbnail
1:08:30
5 days ago

WeAreDevelopers LIVE - Node and Package Security

Chris Heilmann, Daniel Cranney, Zbyszek Tenerowicz

WeAreDevelopers LIVE - Streaming HTML thumbnail
1:10:26
12 days ago

WeAreDevelopers LIVE - Streaming HTML

Chris Heilmann, Daniel Cranney, Jad Joubran

WeAreDevelopers LIVE - CODE100 at WeAreDevelopers Europe thumbnail
1:02:34
19 days ago

WeAreDevelopers LIVE - CODE100 at WeAreDevelopers Europe

Chris Heilmann, Daniel Cranney, Justin Halsall, Werner Jeschko, Nicole Jeschko, Mirco Tomić

WeAreDevelopers LIVE - Web Performance in an AI World thumbnail
1:07:59
26 days ago

WeAreDevelopers LIVE - Web Performance in an AI World

Chris Heilmann, Daniel Cranney

FIFA Hack, Midjourney Does Ultrasounds, and Trampoline Traffic Lights - Nicole Jeschko and Werner Jeschko thumbnail
5:55
about 2 months ago

FIFA Hack, Midjourney Does Ultrasounds, and Trampoline Traffic Lights - Nicole Jeschko and Werner Jeschko

Chris Heilmann, Daniel Cranney

Upcoming sessions on this topic

Open session

World Congress 2026 North America

MicroAgents: The Microservices of the Agentic Era

Ashish Shubham

Runs the show bussiness at ThoughtSpot

Ashish Shubham
Open session

World Congress 2026 North America

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

One Repo, One Strategy: Scalable Full-Stack Testing in a Monorepo World

Bartosz Leczycki, Paweł Matynia

Bartosz Leczycki
Paweł Matynia
Open session

World Congress 2026 North America

Full Stack with Flutter - are we there yet?

Nemanja Stošić

Senior Flutter Developer

Nemanja Stošić
Open session

World Congress 2026 North America

Offloading IoT State: Solving the Memory Crisis on Legacy Hardware

Pravin Nagare

Senior Software Engineer, Roku

Pravin Nagare
Open session

World Congress 2026 North America

Fast by Design: A Masterclass in High-Performance Web Engineering

Aaron Grogg

Senior web developer, committed to improving the user experience by improving web performance

Aaron Grogg

Related videos

Microfrontends at Scale thumbnail
43:20
WWC 2021 • about 5 years ago

Microfrontends at Scale

Josh Goldberg

Micro-frontends anti-patterns thumbnail
47:05
JS Congress • over 4 years ago

Micro-frontends anti-patterns

Luca Mezzalira

Destructuring Frontend monoliths with MicroFrontends thumbnail
41:49
JS Congress • over 4 years ago

Destructuring Frontend monoliths with MicroFrontends

Trishul Goel

Advanced Micro Frontends: Multi-Version and Multi-Framework Scenarios thumbnail
24:47
WWC 2025 • 12 months ago

Advanced Micro Frontends: Multi-Version and Multi-Framework Scenarios

Manfred Steyer

Micro-frontends anti-patterns thumbnail
40:17
WWC 2022 • about 4 years ago

Micro-frontends anti-patterns

Luca Mezzalira

Front-End Micro Apps thumbnail
35:17
LIVE • over 5 years ago

Front-End Micro Apps

Serg Hospodarets

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.