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

Micro Frontends with Modern Angular and Island ...

Manfred Steyer
PRO
April 10, 2024
Programming
0
250

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

Manfred Steyer
PRO

April 10, 2024
Tweet

More Decks by Manfred Steyer

See All by Manfred Steyer
Effective Signals in Angular 19+: Rules and Helpers
manfredsteyer
PRO
0
710
Effective Signals in Angular 19+: Rules and Helpers @ngbe2024
manfredsteyer
PRO
0
400
Your Architecture as a Crime Scene: Improvements with Forensic Analysis
manfredsteyer
PRO
0
22
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
410
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
270
Your Architecture as a Crime Scene: Improvements with Forensic Analysis @ijs Munich 2024
manfredsteyer
PRO
0
330
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
170
Micro Frontends Unmasked: Opportunities, Challenges, Alternatives @w-jax 2024 München
manfredsteyer
PRO
0
170
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
1
170

Other Decks in Programming

See All in Programming
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.8k
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
【PHP】 破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
130
Introduction to kotlinx.rpc
arawn
0
650
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
510
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
220
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
250
DROBEの生成AI活用事例 with AWS
ippey
0
130
『品質』という言葉が嫌いな理由
korimu
0
160
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
740
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
1
650
“あなた” の開発を支援する AI エージェント Bedrock Engineer / introducing-bedrock-engineer
gawa
11
1.8k

Featured

See All Featured
4 Signs Your Business is Dying
shpigford
182
22k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k

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