> Markdown version of [/videos/872-multiple-ships-to-the-island-micro-frontends-island-architectures](https://www.wearedevelopers.com/videos/872-multiple-ships-to-the-island-micro-frontends-island-architectures). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Multiple Ships to the Island - Micro Frontends & Island Architectures

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.

- **Speakers:** Florian Rappl
- **Event:** WeAreDevelopers LIVE
- **Published:** March 22, 2024
- **Duration:** 59:03
- **URL:** https://www.wearedevelopers.com/videos/872-multiple-ships-to-the-island-micro-frontends-island-architectures

## Summary

Micro frontends solve organizational scaling challenges by allowing autonomous teams to build and deploy distinct domain components independently. However, client-side composition in classic single-page applications often leads to massive JavaScript bloat, negatively impacting performance and user experience. To resolve this, teams can intersect micro frontends with island architectures—a pattern popularized by tools like Deno Fresh and Qwik. Island architectures minimize payload by using server-side composition and partial hydration to distribute lightweight HTML, limiting JavaScript exclusively to necessary "islands of interactivity."

Combining these approaches delivers the ultimate balance between distributed team workflows and exceptional web performance. By shifting the initial composition to the server, applications can serialize state directly into the HTML to enable "resumability" on the client side. This allows the browser to bypass expensive full-hydration cycles and immediately pick up where the server left off. Consequently, complex distributed user interfaces—like a heavily interactive streaming portal—can render fully formed without JavaScript enabled, progressively loading interactive fragments only as they become visible or necessary.

Maximizing the benefits of this hybrid structure requires disciplined engineering choices. While micro frontends theoretically permit mixing frameworks like React, Vue, or Angular within a single view, doing so forces the browser to download multiple heavy runtimes, defeating the underlying performance goals. Sticking to a unified tech stack drastically reduces runtime overhead and avoids redundant library execution. Ultimately, merging micro frontend organization with island architecture execution yields highly performant, SEO-friendly platforms that smoothly support independent local development via multi-repo integrations.

**Keywords:** micro frontends, island architecture, server-side composition, client-side composition, partial hydration, progressive enhancement, resumability in frontend, javascript payload optimization, autonomous frontend teams, frontend domain components, micro frontend orchestration, application shell integration, frontend seo optimization, iframe web integration, multi-repo development

## Chapters

1. **Introduction to micro frontends and platform architecture** (00:02) — Real-world experiences dictate building practical architectural designs for micro frontends.
1. **Understanding micro frontends as an organizational pattern** (01:29) — Distributing work across specific independent teams improves efficiency compared to single large groups.
1. **Server-side web integration and iframe composition frameworks** (03:12) — Different methods of loading user interface fragments involve reverse proxies and server-side templates.
1. **Implementing client-side composition and dynamic web components** (06:46) — Client-side composition combines independent scripts and custom elements directly in the browser.
1. **Independent deployment capabilities within an application shell** (08:28) — Application shells enable autonomous shipment of micro frontends without centralized coordination.
1. **Distinguishing domain components from generic functional components** (11:28) — Encapsulating related domain functionality defines boundaries for effective runtime component containers.
1. **Live configuration of custom micro frontend deployment options** (14:42) — Disabling individual micro frontends updates the user interface instantly via a central feed service.
1. **Optimizing browser performance using modern island architecture** (20:07) — Delivering minimal javascript payloads by identifying specific islands of interactivity significantly boosts loading times.
1. **Partial hydration and serialized state via resumability frameworks** (23:59) — Embedding serialized state within incoming HTML markup eliminates redundant client-side orchestration and execution steps.
1. **Combining server-side micro frontends and island architecture** (28:06) — Leveraging dynamic component logic over server-side environments creates fully distributed and scalable deployment systems.
1. **Building a distributed micro frontend application locally** (35:48) — A local implementation of an orchestrator dynamically extracts logic requirements before loading target micro frontends.
1. **Historic use cases of basic micro frontend isolation** (45:44) — Common third-party widgets utilize iframe encapsulation strategies to guarantee reliable and isolated styling perimeters.
1. **The impact of island architecture on web accessibility** (49:09) — Relying heavily on accurate server rendering components establishes standardized semantics required by screen readers.
1. **Establishing emulator pipelines for multi-repo application development** (51:13) — Utilizing dedicated dependency packages allows specialized engineering teams to test interface logic securely without application conflicts.
1. **Mixed framework loading strategies for interactive web islands** (53:25) — Standardizing user interface framework selections lowers required code dependencies when loading numerous components simultaneously.
1. **Evaluating server-side rendering factors for search engine optimization** (55:24) — Supplying parsed server documents securely against external network conditions avoids standard search engine indexing delays.
1. **Controlling framework logic constraints to improve loading performance** (57:21) — Enforcing strict boundaries around bundled framework bundles limits unneeded logic operations during micro frontend deployment.

## Related Moments

- [Optimizing application performance using island architectures](https://www.wearedevelopers.com/videos/1018-native-federation-the-future-of-micro-frontends-and-plugin-systems-in-angular) (from "Native Federation: The Future of Micro Frontends and Plugin-Systems in Angular")
- [Exploring islands architecture and mixed application bundling strategies](https://www.wearedevelopers.com/videos/100217-out-of-order-streaming-the-future-of-web-development) (from "Out-of-Order Streaming — The Future of Web Development")
- [Introduction to micro frontend architecture](https://www.wearedevelopers.com/videos/318-destructuring-frontend-monoliths-with-microfrontends) (from "Destructuring Frontend monoliths with MicroFrontends")
- [Introduction to micro frontends and architectural consequences](https://www.wearedevelopers.com/videos/165-micro-frontends-with-module-federation-why-and-how) (from "Micro Frontends with Module Federation: Why and How?")
- [Recapping frontend scaling patterns and distributed UI techniques](https://www.wearedevelopers.com/videos/236-microfrontends-at-scale) (from "Microfrontends at Scale")
- [Transitioning monolithic page structures to distributed front-end architectures](https://www.wearedevelopers.com/videos/1012-micro-frontends-discovery) (from "Micro-Frontends Discovery")

## Related Articles

- [Web Development Best Practices: What The Data Tells us](https://www.wearedevelopers.com/magazine/84-web-development-best-practices-what-the-data-tells-us)
- [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front)
- [The HTML Elements That You’re Probably Over-Engineering](https://www.wearedevelopers.com/magazine/646-the-html-elements-that-you-re-probably-over-engineering)
- [Dev Digest 139 - Soft and hard queries](https://www.wearedevelopers.com/magazine/487-dev-digest-139-soft-and-hard-queries)

## Related Jobs

- [Staff Frontend Engineer (Expert+/Lead equivalent) - Hybrid working model, 100%, Ho Chi Minh City](https://www.wearedevelopers.com/jobs/48314-staff-frontend-engineer-expert-lead-equivalent-hybrid-working-model-100-ho-chi-minh-city) at **SMG Swiss Marketplace Group**
- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**
- [Mid/Senior Full-Stack Engineer (Web-first)](https://www.wearedevelopers.com/jobs/ext/1210833-mid-senior-full-stack-engineer-web-first) at **SMG Swiss Marketplace Group**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/639235-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Senior Full Stack Engineer](https://www.wearedevelopers.com/jobs/48289-senior-full-stack-engineer) at **Sensory-Minds GmbH**