Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Native Federation: The Future of Micro Frontend...

Manfred Steyer
PRO
April 25, 2024
Programming
0
500

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
Your Architecture as a Crime Scene: Improvements with Forensic Analysis
manfredsteyer
PRO
0
6
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
160
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
150
Your Architecture as a Crime Scene: Improvements with Forensic Analysis @ijs Munich 2024
manfredsteyer
PRO
0
72
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
110
Micro Frontends Unmasked: Opportunities, Challenges, Alternatives @w-jax 2024 München
manfredsteyer
PRO
0
100
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
1
110
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
65
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
260

Other Decks in Programming

See All in Programming
Leveling Up Developer Tooling for the Modern Rails & Hotwire Era @ Ruby Türkiye, November 2024
marcoroth
0
140
eBPF Deep Dive: Architecture and Safety Mechanisms
takehaya
12
850
MoQとか勉強会#2 発表資料
yuki_uchida
1
100
チームにとって最適なスキルアップ施策とは何か/what-is-the-best-skill-up-approach-for-team
nobuoooo
0
140
[KR] Open-Source Ecosystems
skydoves
0
100
受け取る人から提供する人になるということ
little_rubyist
0
270
Jakarta EE meets AI
ivargrimstad
0
1.1k
エンジニアとして関わる要件と仕様(公開用)
murabayashi
0
330
[FlutterKaigi2024] Effective Form 〜Flutterによる複雑なフォーム開発の実践〜
chocoyama
0
3.5k
Flutterを言い訳にしない！アプリの使い心地改善テクニック5選🔥
kno3a87
3
340
Kaigi on Rails 2024 〜運営の裏側〜
krpk1900
1
300
[Do iOS '24] Ship your app on a Friday...and enjoy your weekend!
polpielladev
0
170

Featured

See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Code Reviewing Like a Champion
maltzj
520
39k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Designing for humans not robots
tammielis
250
25k
Statistics for Hackers
jakevdp
796
220k
A better future with KSS
kneath
238
17k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
Code Review Best Practice
trishagee
64
17k
Writing Fast Ruby
sferik
627
61k

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