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

Micro Frontends with Web Standards

Avatar for Manfred Steyer Manfred Steyer PRO
February 15, 2024
Programming
590
1

Micro Frontends with Web Standards

Avatar for Manfred Steyer

Manfred Steyer PRO

February 15, 2024

More Decks by Manfred Steyer

See All by Manfred Steyer
Signal Forms: Details & Live Coding @enterJS 2026 in Mannheim
Avatar for Manfred Steyer manfredsteyer
PRO
0
25
Strategic Design in the Frontend: Moduliths & Micro Frontends @DDDEurope
Avatar for Manfred Steyer manfredsteyer
PRO
0
83
Agentic UI
Avatar for Manfred Steyer manfredsteyer
PRO
0
120
Signal Forms: Beyond the Basics @ngBaguette 2026 in Paris
Avatar for Manfred Steyer manfredsteyer
PRO
0
230
Agentic UI beyond Chats Architecture Patterns & Open Standards @ngMunich 05/2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
220
Agentic AI in the Frontend: Architectures with Open Standards @iJS London 2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
140
Agentic AI & UI: Arcitecture, HITL, Emerging Standards
Avatar for Manfred Steyer manfredsteyer
PRO
0
170
Agentic UI Requires Standards: AG-UI, A2UI, and MCP Apps Work Together @Angular London
Avatar for Manfred Steyer manfredsteyer
PRO
1
96
Signal Forms: Beyond the Basics @ngBelgrade 2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
210

Other Decks in Programming

See All in Programming
Vite+ Unified Toolchain for the Web
Avatar for Naoki Haba naokihaba
0
200
AI時代のUIはどこへ行く？その2！
Avatar for Yusuke Wada yusukebe
19
7k
3Dシーンの圧縮
Avatar for Fadis fadis
1
680
ADKを使って簡単にAIエージェントを作ってみよう
Avatar for K1mu21 k1mu21
0
250
ユニットテストの先へ：テスト技法で要求・仕様を整理するJava開発実践 / Beyond_Unit_Testing_Practical_Java_Development_Techniques_for_Organizing_Requirements_and_Specifications
Avatar for SHIMANE, Yoshikazu shimashima35
0
380
並列実装の現場、2ヶ月間実務でAIを使い倒したAIもPCも私も限界が近い
Avatar for ming ming_ayami
0
110
代数的データ型って何が嬉しいの？ #frontend_phpcon_do
Avatar for Takuma Kajikawa kajitack
8
3.3k
The Arts and Crafts of Work in the AI Era — Toward Mastery in Software Development
Avatar for Yoshihito Kuranuki / 倉貫義人 kuranuki
1
740
Lemonade + Foundry Toolkit でお手軽アプリ開発
Avatar for 瀬尾佳隆 seosoft
1
320
RTSPクライアントを自作してみた話
Avatar for simotin13 simotin13
0
520
TypeScript+Orvalで実現する型安全かつ堅牢でスケーラブルなマルチチャネル通知基盤 / TSKaigi Night talks ~after conference~
Avatar for doriven d0riven
0
320
Java × distroless で 軽量なコンテナイメージを / Java on Distroless
Avatar for Daisuke Garaike contour_gara
0
510

Featured

See All Featured
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.4k
It's Worth the Effort
Avatar for 3n 3n
188
29k
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
200
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
720
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.7k
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
170
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
430
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
15k
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
830
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
360

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