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.

#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.