The Book

Curious about micro frontends? Grab a copy of my book Micro Frontends in Action to learn about the concepts, its benefits, integration techniques and common pitfalls.

Buy the Book
Amazon | micro-frontends.org
Micro Frontends in Action - Michael Geers

Chapter 2: My First Micro Frontends Project

Pages & Links

Pages & Linksview code
Topics:page transition,links

Chapter 3: Composition with AJAX & Server-side Routing

Server-side Routing

Server-side Routingview code
Topics:routing,page transition,web-server,Nginx

Chapter 4: Server-side Composition

Server-side Integration

Server-side Integrationview code
Topics:composition,server-side,SSI,Nginx

Timeouts & Fallbacks

Timeouts & Fallbacksview code
Topics:fallbacks,composition,server-side,SSI,Nginx

Podium

Podiumview code
Topics:composition,server-side,Podium

Chapter 5: Client-side Composition

Client-side Composition

Client-side Compositionview code
Topics:composition,client-side,Web Components

Style Isolation & ShadowDOM

Style Isolation & ShadowDOMview code
Topics:styling,namespacing,Web Components,ShadowDOM

Chapter 6: Communication Patterns

Parent-Child Communication

Parent-Child Communicationview code
Topics:communication,Web Components

Child-Parent Communication

Child-Parent Communicationview code
Topics:communication,Web Components,Custom Events

Fragment-Fragment Communication

Fragment-Fragment Communicationview code
Topics:communication,Web Components,Custom Events

Chapter 7: Client-side Routing

Client-side Routing (Flat)

Client-side Routing (Flat)view code
Topics:app-shell,routing,client-side,Web Components

Client-side Routing (Two-Tiered)

Client-side Routing (Two-Tiered)view code
Topics:app-shell,routing,client-side,Web Components

Single SPA

Single SPAview code
Topics:app-shell,routing,client-side,single-spa,Svelte,React,Vue.js,Rollup

Chapter 8: Composition & Universal Rendering

Universal Rendering

Universal Renderingview code
Topics:composition,server-side,client-side,Nginx,SSI,Web Components

Chapter 10: Asset Loading

Asset Client-side Redirect

Asset Client-side Redirectview code
Topics:assets,performance,client-side,caching

Asset Registration Include

Asset Registration Includeview code
Topics:assets,performance,server-side,caching,Nginx,SSI

Chapter 11: Performance is Key

Shared Vendor Libraries via Webpack DLLPlugin

Shared Vendor Libraries via Webpack DLLPluginview code
Topics:assets,performance,Webpack

Shared Vendor Libraries via Rollup.js and Absolute ES Module Imports

Shared Vendor Libraries via Rollup.js and Absolute ES Module Importsview code
Topics:assets,performance,ES Modules,Rollup

Chapter 14: Migration, Testing & Local Development

Local Development

Local Developmentview code
Topics:development,isolation,testing