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.

Micro Frontends in Action - Michael Geers

Chapter 2: My First Micro Frontends Project

Chapter 3: Composition with AJAX & Server-side Routing

Server-side Routing

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

Chapter 4: Server-side Composition

Chapter 5: Client-side Composition

Client-side Composition

Client-side Compositiontry outview code
Topics:composition,client-side,Web Components

Style Isolation & ShadowDOM

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

Chapter 6: Communication Patterns

Child-Parent Communication

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

Fragment-Fragment Communication

Fragment-Fragment Communicationtry outview code
Topics:communication,Web Components,Custom Events

Chapter 7: Client-side Routing

Client-side Routing (Flat)

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

Client-side Routing (Two-Tiered)

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

Single SPA

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

Chapter 8: Composition & Universal Rendering

Universal Rendering

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

Chapter 10: Asset Loading

Asset Client-side Redirect

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

Asset Registration Include

Asset Registration Includetry outview 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 DLLPlugintry outview 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 Importstry outview code
Topics:assets,performance,ES Modules,Rollup

Chapter 14: Migration, Testing & Local Development