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
340
Effective Signals in Angular 19+: Rules and Helpers @ngbe2024
manfredsteyer
PRO
0
230
Your Architecture as a Crime Scene: Improvements with Forensic Analysis
manfredsteyer
PRO
0
17
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
320
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
210
Your Architecture as a Crime Scene: Improvements with Forensic Analysis @ijs Munich 2024
manfredsteyer
PRO
0
220
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
140
Micro Frontends Unmasked: Opportunities, Challenges, Alternatives @w-jax 2024 München
manfredsteyer
PRO
0
140
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
1
150

Other Decks in Programming

See All in Programming
CloudflareStack でRAGに入門
asahiiwm
0
140
range over funcの使い道と非同期N+1リゾルバーの夢 / about a range over func
mackee
0
200
htmxって知っていますか？次世代のHTML
hiro_ghap1
0
390
GitHubで育つ コラボレーション文化 : ニフティでのインナーソース挑戦事例 - 2024-12-16 GitHub Universe 2024 Recap in ZOZO
niftycorp
PRO
0
1.1k
月刊 競技プログラミングをお仕事に役立てるには
terryu16
1
1.1k
数十万行のプロジェクトを Scala 2から3に完全移行した
xuwei_k
0
510
PHPで学ぶプログラミングの教訓 / Lessons in Programming Learned through PHP
nrslib
4
1k
PSR-15 はあなたのための ものではない？ - phpcon2024
myamagishi
0
360
Package Traits
ikesyo
1
130
Cloudflare MCP ServerでClaude Desktop からWeb APIを構築
kutakutat
1
630
歴史と現在から考えるスケーラブルなソフトウェア開発のプラクティス
i10416
0
250
Jaspr Dart Web Framework 박제창 @Devfest 2024
itsmedreamwalker
0
140

Featured

See All Featured
GitHub's CSS Performance
jonrohan
1030
460k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
4 Signs Your Business is Dying
shpigford
182
21k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3.1k
We Have a Design System, Now What?
morganepeng
51
7.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
38
7k
Docker and Python
trallard
43
3.2k
Building an army of robots
kneath
302
44k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k

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