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 Signal Store and the New Resource API @w-jax 2025, Munich
Avatar for Manfred Steyer manfredsteyer
PRO
0
18
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
Avatar for Manfred Steyer manfredsteyer
PRO
0
8
Rethinking Angular: The Future with Signals and the New Resource API @iJS Munich 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
64
Reactivity, Reimagined: Angular Signals at Every Layer
Avatar for Manfred Steyer manfredsteyer
PRO
0
68
Angular Architecture Workshop @AngularDays in Berlin 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
68
Migration to Signals, Resource API, and NgRx Signal Store
Avatar for Manfred Steyer manfredsteyer
PRO
0
140
Reactive Thinking with Signals and the Resource API
Avatar for Manfred Steyer manfredsteyer
PRO
0
120
All About Angular's New Signal Forms
Avatar for Manfred Steyer manfredsteyer
PRO
0
230
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
Avatar for Manfred Steyer manfredsteyer
PRO
0
240

Other Decks in Programming

See All in Programming
Vueのバリデーション、結局どれを選べばいい？ ― 自作バリデーションの限界と、脱却までの道のり ― / Which Vue Validation Library Should We Really Use? The Limits of Self-Made Validation and How I Finally Moved On
Avatar for ねぎなす neginasu
3
1.8k
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
170
Introduce Hono CLI
Avatar for Yusuke Wada yusukebe
6
3.3k
alien-signals と自作 OSS で実現する フレームワーク非依存な ロジック共通化の探求 / Exploring Framework-Agnostic Logic Sharing with alien-signals and Custom OSS
Avatar for aose aoseyuu
3
5.4k
AsyncSequenceとAsyncStreamのプロポーザルを全部読む！！
Avatar for Shigure Shimotori s_shimotori
1
220
CSC509 Lecture 07
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
250
Temporal Knowledge Graphで作る！ 時間変化するナレッジを扱うAI Agentの世界
Avatar for po3rin po3rin
5
1.2k
SidekiqでAIに商品説明を生成させてみた
Avatar for Aki Nakahara akinko_0915
0
110
CSC305 Lecture 13
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
340
Swift Concurrency 年表クイズ
Avatar for omochimetaru omochi
3
220
Register is more than clipboard
Avatar for Satoru Kitaguchi satorunooshie
1
340
CSC509 Lecture 11
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
280

Featured

See All Featured
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
57
6k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.6k
Visualization
Avatar for Eitan Lees eitanlees
150
16k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
272
21k
Done Done
Avatar for chrislema chrislema
186
16k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
658
61k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7.2k
Navigating Team Friction
Avatar for Lara Hogan lara
190
15k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.7k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
127
17k

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