Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Micro Frontends with Modern Angular and Island ...

Avatar for Manfred Steyer Manfred Steyer PRO
April 10, 2024
Programming
380
0

Micro Frontends with Modern Angular and Island Architectures @ijs London 2024

Avatar for Manfred Steyer

Manfred Steyer PRO

April 10, 2024

More Decks by Manfred Steyer

See All by Manfred Steyer
Agentic UI with Open Standards @ngGraz Sep 2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
50
Agentic UI with Open Standards @GDG Salzburg, Bgl & Prishtina
Avatar for Manfred Steyer manfredsteyer
PRO
0
59
Generative UI & AI-Assistants for Your Angular Solutions
Avatar for Manfred Steyer manfredsteyer
PRO
1
490
Generative UI & AI-Assistants for Your Angular Solutions
Avatar for Manfred Steyer manfredsteyer
PRO
0
210
Nostalgia Meets Technology: Super Mario with TypeScript
Avatar for Manfred Steyer manfredsteyer
PRO
0
300
Signal Forms: Details & Live Coding @enterJS 2026 in Mannheim
Avatar for Manfred Steyer manfredsteyer
PRO
0
300
Strategic Design in the Frontend: Moduliths & Micro Frontends @DDDEurope
Avatar for Manfred Steyer manfredsteyer
PRO
0
210
Agentic UI
Avatar for Manfred Steyer manfredsteyer
PRO
0
320
Signal Forms: Beyond the Basics @ngBaguette 2026 in Paris
Avatar for Manfred Steyer manfredsteyer
PRO
0
350

Other Decks in Programming

See All in Programming
kubernetes コンポーネント開発入門 / 新卒N年目の勉強会&交流会！〜〇〇への誘い〜 #n_study
Avatar for mazrean mazrean
0
220
iOSDC2026登壇資料.pdf
Avatar for RioFujimon riofujimon
0
120
Go × SIMDで高速化するベクトル検索 ~ルーフラインモデルでSIMDが効く境界を探れ！ ~
Avatar for po3rin po3rin
1
240
20260914 AIエージェント時代のPlatform Engineering　LLM基盤とプロダクトの責務境界線
Avatar for Taiki Kanzaki kanfab1
6
1.6k
数年滞っていたダークモード対応をおよそ2週間で完了させる
Avatar for Kazuki Chigita chigichan24
0
700
ALB ログから Trace を気合で繋げる技術
Avatar for Hayato Kawai fohte
7
890
20260828_品質と開発生産性を両立させる、AI時代のE2Eテストの考え方
Avatar for MagicPod magicpod
0
200
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
270
How I Stole PSI from Android Studio - DroidKaigi2026
Avatar for JunRong Tan worker8
0
110
自分的「カンファレンスの楽しみ方」
Avatar for syumai syumai
0
200
The Good Stuff, Not the Slop: Engineering High-Quality Android Apps with Modern AI Tooling
Avatar for danybony danybony
1
240
RSSとCodexを使ってX投稿自動化してみた
Avatar for Ochtum ochtum
0
110

Featured

See All Featured
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.4k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
830
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
2.2k
Claude Code のすすめ
Avatar for schroneko schroneko
67
230k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
56k
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
510
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
540
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.6k
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
1
530
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k

Transcript

  1. @ManfredSteyer ManfredSteyer Micro Frontends with Modern Angular and Island Architectures

  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 & esbuild Frankenstein w/ Web Components Island Architectures

  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

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

    3. Start Shell and Micro Frontends

  20. @ManfredSteyer

  21. @ManfredSteyer

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

    App (MFE)

  23. @ManfredSteyer

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

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

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

  27. @ManfredSteyer

  28. @ManfredSteyer

  29. @ManfredSteyer

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

  31. @ManfredSteyer

  32. @ManfredSteyer

  33. @ManfredSteyer

  34. @ManfredSteyer Host Remote Remote HTML HTML

  35. @ManfredSteyer 1. Server: Load HTML Fragments from MF 2. Client:

    Load MF via Federation (Hydration)

  36. @ManfredSteyer Easy No Version Conflicts Lot of Experience

  37. @ManfredSteyer

  38. @ManfredSteyer

  39. @ManfredSteyer SPA + SSR Classic SPA Complexity Complexity Monolith MF

    Frankenstein Biz Apps B2C Team Autonomy →

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

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

    SSR with HTML Fragments

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

    http://angulararchitects.io