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

Native Federation: The Future of Micro Frontend...

Manfred Steyer
PRO
July 18, 2024
Programming
0
390

Native Federation: The Future of Micro Frontends in Angular

Manfred Steyer
PRO

July 18, 2024
Tweet

More Decks by Manfred Steyer

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

Other Decks in Programming

See All in Programming
短期間での新規プロダクト開発における「コスパの良い」Goのテスト戦略」 / kamakura.go
n3xem
2
160
range over funcの使い道と非同期N+1リゾルバーの夢 / about a range over func
mackee
0
110
たのしいparse.y
ydah
3
120
SymfonyCon Vienna 2025: Twig, still relevant in 2025?
fabpot
3
1.2k
採用事例の少ないSvelteを選んだ理由と それを正解にするためにやっていること
oekazuma
2
1k
似たもの同士のPerlとPHP
uzulla
1
130
Security_for_introducing_eBPF
kentatada
0
110
テストケースの名前はどうつけるべきか？
orgachem
PRO
0
130
良いユニットテストを書こう
mototakatsu
4
1.6k
.NET 9アプリをCGIとして レンタルサーバーで動かす
mayuki
1
770
あれやってみてー駆動から成長を加速させる / areyattemite-driven
nashiusagi
1
200
Webエンジニア主体のモバイルチームの 生産性を高く保つためにやったこと
igreenwood
0
330

Featured

See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
How to Ace a Technical Interview
jacobian
276
23k
Building Applications with DynamoDB
mza
91
6.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
95
17k
Imperfection Machines: The Place of Print at Facebook
scottboms
266
13k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
29
2k
GitHub's CSS Performance
jonrohan
1030
460k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
Faster Mobile Websites
deanohume
305
30k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Embracing the Ebb and Flow
colly
84
4.5k

Transcript

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

    Angular WeAreDevelopers World Congress

  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

  25. @ManfredSteyer

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

  27. @ManfredSteyer

  28. @ManfredSteyer

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

    Frankenstein Biz Apps B2C Team Autonomy →

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

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

    SSR with HTML Fragments

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

    http://angulararchitects.io