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

Micro Frontends with Modern Angular and Island ...

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

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

Avatar for Manfred Steyer

Manfred Steyer
PRO

April 10, 2024
Tweet

More Decks by Manfred Steyer

See All by Manfred Steyer
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
Avatar for Manfred Steyer manfredsteyer
PRO
0
9
Modern Angular with Signals and Signal Store: New Rules for Your Architecture @enterJS Advanced Angular Day 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
210
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
82
Your Architecture as a Crime Scene: Forensic Analysis
Avatar for Manfred Steyer manfredsteyer
PRO
0
140
Rethinking Data Access: The New httpResource in Angular
Avatar for Manfred Steyer manfredsteyer
PRO
0
300
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
Avatar for Manfred Steyer manfredsteyer
PRO
0
190
JavaScript as a Crime Scene Forensic Analysis
Avatar for Manfred Steyer manfredsteyer
PRO
0
92
Modern Angular with Signals and Signal Store: New Rules for Your Architecture @jax2025 in Mainz, Germany
Avatar for Manfred Steyer manfredsteyer
PRO
0
170
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
Avatar for Manfred Steyer manfredsteyer
PRO
0
100

Other Decks in Programming

See All in Programming
AIプログラマーDevinは PHPerの夢を見るか？
Avatar for Shinya Saita shinyasaita
1
210
What Spring Developers Should Know About Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
440
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
Avatar for Ahmed EBEN HASSINE ahmedbhs123
0
170
システム成長を止めない！本番無停止テーブル移行の全貌
Avatar for さかうぇ sakawe_ee
1
160
Hypervel - A Coroutine Framework for Laravel Artisans
Avatar for Albert Chen albertcht
1
110
XP, Testing and ninja testing
Avatar for seki at druby.org m_seki
3
240
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
Avatar for nrs nrslib
2
650
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
Avatar for Agata Naomichi agatan
1
330
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
Avatar for lni_T lnit
3
450
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
Avatar for Márton Braun zsmb
1
290
「Cursor/Devin全社導入の理想と現実」のその後
Avatar for Ryoichi Saito saitoryc
0
790
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール？ 〜
Avatar for Yoda Keisuke yodakeisuke
0
120

Featured

See All Featured
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
94
14k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.7k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
3.1k
Building an army of robots
Avatar for Kyle Neath kneath
306
45k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
281
13k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
346
40k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
30
2.1k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
252
21k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
271
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