Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Micro Frontends with Web Standards

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Manfred Steyer Manfred Steyer PRO
February 15, 2024
Programming
1
550

Micro Frontends with Web Standards

Avatar for Manfred Steyer

Manfred Steyer PRO

February 15, 2024
Tweet

More Decks by Manfred Steyer

See All by Manfred Steyer
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios @OOP 2026, Munic
Avatar for Manfred Steyer manfredsteyer
PRO
0
92
Beyond the Basics: Signal Forms
Avatar for Manfred Steyer manfredsteyer
PRO
0
63
360° Signals in Angular: Signal Forms with SignalStore & Resources @ngLondon 01/2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
140
All About Angular‘s New Signal Forms
Avatar for Manfred Steyer manfredsteyer
PRO
0
29
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
Avatar for Manfred Steyer manfredsteyer
PRO
0
260
Your Architecture as a Crime Scene? Forensic Analysis
Avatar for Manfred Steyer manfredsteyer
PRO
0
180
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
Avatar for Manfred Steyer manfredsteyer
PRO
0
280
Your Architecture as a Crime Scene: Forensic Analysis
Avatar for Manfred Steyer manfredsteyer
PRO
0
130
Reactive Thinking with Signals and the new Resource API
Avatar for Manfred Steyer manfredsteyer
PRO
0
250

Other Decks in Programming

See All in Programming
CSC307 Lecture 08
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
670
余白を設計しフロントエンド開発を 加速させる
Avatar for karacoro / からころ tsukuha
7
2.1k
MUSUBIXとは
Avatar for Hisaho nahisaho
0
140
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
620
Data-Centric Kaggle
Avatar for ねぼすけAI isax1015
2
780
「ブロックテーマでは再現できない」は本当か？
Avatar for Takashi Kitajima inc2734
0
1k
Raku Raku Notion 20260128
Avatar for hareyaka hareyakayuruyaka
0
360
今から始めるClaude Code超入門
Avatar for 448jp | OKI Yoshiya 448jp
8
9.1k
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
Avatar for izumin5210 izumin5210
7
2.3k
Fluid Templating in TYPO3 14
Avatar for Simon Praetorius s2b
0
130
AWS re:Invent 2025参加 直前 Seattle-Tacoma Airport(SEA)におけるハードウェア紛失インシデントLT
Avatar for tetutetu214 tetutetu214
2
120
コントリビューターによるDenoのすゝめ / Deno Recommendations by a Contributor
Avatar for petamoriken / 森建 petamoriken
0
210

Featured

See All Featured
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
62k
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
4.9k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
350
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
190
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
200
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
110
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
290
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
0
150
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.8k
Visualization
Avatar for Eitan Lees eitanlees
150
17k

Transcript

  1. @ManfredSteyer ManfredSteyer Micro Frontends with Web Standards

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

  3. @ManfredSteyer

  4. @ManfredSteyer

  5. @ManfredSteyer

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

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

  8. @ManfredSteyer

  9. @ManfredSteyer

  10. @ManfredSteyer Federation & Standalone & esbuild Frankenstein w/ Web Components

    Deferred Loading

  11. @ManfredSteyer Manfred Steyer

  12. @ManfredSteyer

  13. @ManfredSteyer

  14. @ManfredSteyer

  15. @ManfredSteyer

  16. @ManfredSteyer

  17. @ManfredSteyer Mindset: Module Federation EcmaScript Modules Import Maps Simple config,

    sharing libs

  18. @ManfredSteyer 1. ng add @angular-architects/native-federation […] 2. Adjust generated config

    3. Start Shell and Micro Frontends

  19. @ManfredSteyer

  20. @ManfredSteyer

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

    App (MFE)

  22. @ManfredSteyer

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

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

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

  26. @ManfredSteyer

  27. @ManfredSteyer

  28. @ManfredSteyer

  29. @ManfredSteyer Title Content Call to Action Info More Info

  30. @ManfredSteyer @defer on viewport { @main { <heavy-cmp /> }

    @placeholder { <img src="ph.png"> } […] }

  31. @ManfredSteyer

  32. @ManfredSteyer

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

    Signal Store Chapters

  34. @ManfredSteyer Module Federation: Mental Model rocks! Native Federation Deferred Loading

    SSR with HTML Fragments

  35. @ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting

    http://angulararchitects.io