Florian Rappl

Multiple Ships to the Island - Micro Frontends & Island Architectures

Stop choosing between micro frontends and islands architecture. This talk shows how to combine them for independent shipping and superior web performance.

Multiple Ships to the Island - Micro Frontends & Island Architectures
#1about 2 minutes

Micro frontends are an organizational pattern for scaling teams

Micro frontends enable development scaling by structuring work around small, autonomous "two-pizza teams" that require minimal alignment.

#2about 5 minutes

Exploring technical patterns for micro frontend composition

Several technical approaches can be used for composition, including the web approach with iframes, server-side composition, and client-side composition with web components.

#3about 3 minutes

Achieving independent deployment cycles for each team

The architecture allows teams to develop and deploy their micro frontends on their own schedules without needing to align with other teams.

#4about 3 minutes

Defining a micro frontend as a container for domain components

A micro frontend is best understood as a container for domain-specific components, which are enriched with business logic, rather than just a library of generic UI elements.

#5about 7 minutes

Demo of a client-side composed micro frontend application

A Netflix clone demonstrates how features managed by different micro frontends can be dynamically enabled or disabled using a discovery service.

#6about 6 minutes

Introducing islands architecture to reduce javascript payload

Islands architecture improves performance by server-rendering static HTML and only shipping JavaScript for interactive "islands," using either partial hydration or resumability.

#7about 8 minutes

Combining micro frontends with an islands architecture

By composing micro frontends on the server and using resumability, you can achieve both scalable development and high-performance, zero-JavaScript-by-default user experiences.

#8about 10 minutes

Demo of a server-rendered micro frontend application

A revised Netflix clone shows how the combined architecture enables a fast, server-rendered experience that works without JavaScript while retaining development autonomy.

#9about 14 minutes

Q&A on practical implementation and impact

The Q&A covers common examples like iframes for ads, the positive impact on SEO, local development strategies, and the performance trade-offs of using multiple frameworks.

Related jobs
Jobs that call for the skills explored in this talk.

Matching moments

Introducing the micro-frontend architectural pattern
02:03 MIN

Introducing the micro-frontend architectural pattern

Destructuring Frontend monoliths with MicroFrontends

Tracing the architectural evolution to microfrontends
06:11 MIN

Tracing the architectural evolution to microfrontends

Microfrontends with Blazor: Welcome to the Party!

Audience Q&A on practical micro-frontend challenges
13:10 MIN

Audience Q&A on practical micro-frontend challenges

Micro-frontends anti-patterns

Understanding the micro frontend architectural style
01:25 MIN

Understanding the micro frontend architectural style

Micro Frontends with Module Federation: Why and How?

Understanding the purpose and benefits of micro-frontends
06:13 MIN

Understanding the purpose and benefits of micro-frontends

Stairway to Heaven - Scaling Frontends the Right Way

A brief history of the micro-frontend architectural pattern
03:17 MIN

A brief history of the micro-frontend architectural pattern

Micro-frontends anti-patterns

The role of micro-frontends in scaling development teams
05:24 MIN

The role of micro-frontends in scaling development teams

Micro-Frontends with Module Federation: Beyond the Basics

Integrating applications using a micro-frontend architecture
03:01 MIN

Integrating applications using a micro-frontend architecture

Building the Right Product and Building It Right: A Glimpse into Extreme Programming, Atomic Design

Featured Partners

Related Videos

See all videos
Interface Contracts in Microfrontend Architectures
54:39

Interface Contracts in Microfrontend Architectures

Alexander Günsche

Microfrontends at Scale
43:20

Microfrontends at Scale

Josh Goldberg

Micro-frontends anti-patterns
40:17

Micro-frontends anti-patterns

Luca Mezzalira

Micro Frontends with Module Federation: Why and How?
45:40

Micro Frontends with Module Federation: Why and How?

Manfred Steyer

Micro-frontends anti-patterns
47:05

Micro-frontends anti-patterns

Luca Mezzalira

Qwik: Making sure that easy is same as performant
30:59

Qwik: Making sure that easy is same as performant

Miško Hevery

Microfrontends with Blazor: Welcome to the Party!
58:32

Microfrontends with Blazor: Welcome to the Party!

Florian Rappl

Stairway to Heaven - Scaling Frontends the Right Way
40:05

Stairway to Heaven - Scaling Frontends the Right Way

Florian Rappl

Related Articles

View all articles
Chris Heilmann
WeAreDevelopers LIVE days are changing - get ready to take part
Starting with this week's Web Dev Day edition of WeAreDevelopers LIVE Days, we changed the the way we run these online conferences. The main differences are:Shorter talks (half an hour tops)More interaction in Q&AA tips and tricks "Did you know" sect...
WeAreDevelopers LIVE days are changing - get ready to take part
Benedikt Bischof
Why You Shouldn’t Build a Microservice Architecture
Welcome to this issue of the WeAreDevelopers Live Talk series. This article recaps an interesting talk by Michael Eisenbart who talks about the pros and cons of microservice architecture.‍About the speaker:‍Michael has been working for Bosch as a sof...
Why You Shouldn’t Build a Microservice Architecture

From learning to earning

Jobs that call for the skills explored in this talk.

Frontend Developer

Frontend Developer

JO Media Software Solutions GmBh
Brunn am Gebirge, Austria

Senior
CSS
Angular
JavaScript
TypeScript
Frontend-Entwickler

Frontend-Entwickler

infomax websolutions GmbH
Grassau, Germany

Intermediate
Senior
CSS
HTML
JavaScript
TypeScript