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

Native Federation: The Future of Micro Frontend...

Avatar for Manfred Steyer Manfred Steyer PRO
April 25, 2024
Programming
0
670

Native Federation: The Future of Micro Frontends in Angular

Avatar for Manfred Steyer

Manfred Steyer PRO

April 25, 2024
Tweet

More Decks by Manfred Steyer

See All by Manfred Steyer
Rethinking Angular: The Future with Signals and the New Resource API @iJS Munich 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
37
Reactivity, Reimagined: Angular Signals at Every Layer
Avatar for Manfred Steyer manfredsteyer
PRO
0
53
Angular Architecture Workshop @AngularDays in Berlin 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
46
Migration to Signals, Resource API, and NgRx Signal Store
Avatar for Manfred Steyer manfredsteyer
PRO
0
120
Reactive Thinking with Signals and the Resource API
Avatar for Manfred Steyer manfredsteyer
PRO
0
110
All About Angular's New Signal Forms
Avatar for Manfred Steyer manfredsteyer
PRO
0
210
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
Avatar for Manfred Steyer manfredsteyer
PRO
0
220
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
Avatar for Manfred Steyer manfredsteyer
PRO
0
150
Your Architecture as a Crime Scene Forensic Analysis @BASTA! 2025 in Mainz, Germany
Avatar for Manfred Steyer manfredsteyer
PRO
0
78

Other Decks in Programming

See All in Programming
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
Avatar for Oliver Drotbohm olivergierke
3
980
Blazing Fast UI Development with Compose Hot Reload (Bangladesh KUG, October 2025)
Avatar for Márton Braun zsmb
1
210
SODA - FACT BOOK（JP）
Avatar for SODA inc. sodainc
1
8.9k
AI時代に必須！状況言語化スキル / ai-context-verbalization
Avatar for MinoDriven minodriven
2
110
Go言語はstack overflowの夢を見るか？
Avatar for Takuto Nagami logica0419
0
620
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
Avatar for shogogg shogogg
1
340
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
Avatar for N Akita nakita628
0
330
Vueのバリデーション、結局どれを選べばいい？ ― 自作バリデーションの限界と、脱却までの道のり ― / Which Vue Validation Library Should We Really Use? The Limits of Self-Made Validation and How I Finally Moved On
Avatar for ねぎなす neginasu
2
1.6k
チームの境界をブチ抜いていけ
Avatar for tokai235 tokai235
0
230
Devoxx BE - Local Development in the AI Era
Avatar for Kevin Dubois kdubois
0
140
NixOS + Kubernetesで構築する自宅サーバーのすべて
Avatar for ichi-h ichi_h3
0
1.2k
NIKKEI Tech Talk#38
Avatar for cipepser cipepser
0
270

Featured

See All Featured
Designing for Performance
Avatar for Lara Hogan lara
610
69k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
8.9k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7.2k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
24
3.7k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
233
18k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
238
140k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
15k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.5k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
280
24k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
253
22k

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