Micro Frontends with Web Standards

@ManfredSteyer ManfredSteyer Micro Frontends with Web Standards

@ManfredSteyer Booking App Check-in App Boarding App Luggage App

@ManfredSteyer

@ManfredSteyer const Component = await import('other-app/xyz')

@ManfredSteyer

@ManfredSteyer Federation & Standalone & esbuild Frankenstein w/ Web Components
Deferred Loading

@ManfredSteyer Manfred Steyer

@ManfredSteyer

@ManfredSteyer Mindset: Module Federation EcmaScript Modules Import Maps Simple config,
sharing libs

@ManfredSteyer 1. ng add @angular-architects/native-federation […] 2. Adjust generated config
3. Start Shell and Micro Frontends

@ManfredSteyer

@ManfredSteyer Wrap them into Web Components Angular App (MFE) React
App (MFE)

@ManfredSteyer

@ManfredSteyer await loadRemoteModule('other-app', './web-cmp');

@ManfredSteyer await loadRemoteModule('other-app', './web-cmp'); const rootElm = document.createElement('mfe2-root'); document.body.appendChild(rootElm);

@ManfredSteyer await loadRemoteModule('other-app', './web-cmp'); const rootElm = document.createElement('web-cmp') document.body.appendChild(rootElm); WrapperComponent

@ManfredSteyer

@ManfredSteyer Title Content Call to Action Info More Info

@ManfredSteyer @defer on viewport { @main { <heavy-cmp /> }
@placeholder { <img src="ph.png"> } […] }

@ManfredSteyer

@ManfredSteyer Free eBook (6th Edition) ANGULARarchitects.io/book 20 Chapters 4 new
Signal Store Chapters

@ManfredSteyer Module Federation: Mental Model rocks! Native Federation Deferred Loading
SSR with HTML Fragments

@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io

Micro Frontends with Web Standards

Micro Frontends with Web Standards

More Decks by Manfred Steyer

Other Decks in Programming

Featured

Transcript