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

Native Federation: The Future of Micro Frontend...

Manfred Steyer
PRO
April 25, 2024
Programming
0
440

Native Federation: The Future of Micro Frontends in Angular

Manfred Steyer
PRO

April 25, 2024
Tweet

More Decks by Manfred Steyer

See All by Manfred Steyer
Modern Angular with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
50
Successful with Signals: 3 Rules for Your Architecture
manfredsteyer
PRO
0
68
Successful with Signals: 3 Rules for Your Architecture @.NET UserGroup Bern
manfredsteyer
PRO
0
28
Improving Your Architecture with Forensic Analysis
manfredsteyer
PRO
0
70
Micro Frontends Unmasked: Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
270
Modern Angular with the NGRX Signal Store New Rules for Your Architecture @BASTA 2024 in Mainz
manfredsteyer
PRO
0
24
Modern Angular with the NGRX Signal Store New Rules for Your Architecture @BASTA! 2024 in Mainz
manfredsteyer
PRO
0
340
Successful with Signals: 3 Patterns for Your Architecture
manfredsteyer
PRO
0
94
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
350

Other Decks in Programming

See All in Programming
CSC509 Lecture 01
javiergs
PRO
1
210
CSC509 Lecture 02
javiergs
PRO
0
160
Cohesion in Modeling and Design
mploed
3
200
Iteratorでページネーションを実現する
sonatard
3
710
WEBアプリケーションにおけるAWS Lambdaを用いた大規模な非同期処理の実践
delhi09
PRO
7
4.1k
PHPを書く理由、PHPを書いていて良い理由 / Reasons to write PHP and why it is good to write PHP
seike460
PRO
5
460
dbt-ga4パッケージを実業務に導入してみた話
t_tokumaru_feedcorp
0
130
Subclassing, Composition, Python, and You
hynek
3
160
GitHub Copilot Workspace で我々のアプリ開発がどう変わるのか？
shuyakinjo
0
930
Introduce dRuby
ledsun
0
110
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
430
クラウドサービスの
利用コストを削減する技術 - 円安の真南風を感じて -
pyama86
3
390

Featured

See All Featured
Creatively Recalculating Your Daily Design Routine
revolveconf
217
12k
What's in a price? How to price your products and services
michaelherold
243
11k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Docker and Python
trallard
40
3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
23k
Producing Creativity
orderedlist
PRO
341
39k
Happy Clients
brianwarren
97
6.7k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Build The Right Thing And Hit Your Dates
maggiecrowley
31
2.3k
What the flash - Photography Introduction
edds
67
11k
Building Your Own Lightsaber
phodgson
102
6k

Transcript

  1. @ManfredSteyer ManfredSteyer Native Federation: The Future of Micro Frontends in

    Angular

  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