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

Micro Frontends with Modern Angular and Island ...

Manfred Steyer
PRO
April 10, 2024
Programming
0
270

Micro Frontends with Modern Angular and Island Architectures @ijs London 2024

Manfred Steyer
PRO

April 10, 2024
Tweet

More Decks by Manfred Steyer

See All by Manfred Steyer
The Missing Link in Angular’s Signal Story: Resource API and httpResource
manfredsteyer
PRO
0
84
Strategic Design (DDD) for the Frontend @DDD Meetup Stuttgart
manfredsteyer
PRO
0
170
Module Boundaries and Architecture with Forensic Analysis @NxSummit Amsterdam 2025
manfredsteyer
PRO
0
110
Signal-Based Data Fetching With the New httpResource
manfredsteyer
PRO
0
190
Modern Angular: Renovation for Your Applications @angularDays 2025 Munich
manfredsteyer
PRO
0
200
Effective Signals in Angular 19+ Rules and Helpers
manfredsteyer
PRO
0
250
The Price of Micro Frontends … and Your Alternatives @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
530
Your Architecture as a Crime Scene: Forensic Analysis @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
190
Modern Angular with Signals and Signal Store New Rules for Your Architecture @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
250

Other Decks in Programming

See All in Programming
スモールスタートで始めるためのLambda×モノリス（Lambdalith）
akihisaikeda
2
300
20250429 - CNTUG Meetup #67 / DevOps Taiwan Meetup #69 - Deep Dive into Tetragon: Building Runtime Security and Observability with eBPF
tico88612
0
110
PHPバージョンアップから始めるOSSコントリビュート / how2oss-contribute
dmnlk
1
1.1k
Browser and UI #2 HTML/ARIA
ken7253
2
120
파급효과: From AI to Android Development
l2hyunwoo
0
130
これだけは知っておきたいクラス設計の基礎知識 version 2
masuda220
PRO
24
6.6k
API for docs
soutaro
3
1.4k
ComposeでWebアプリを作る技術
tbsten
0
120
サービスクラスのありがたみを発見したときの思い出 #phpcon_odawara
77web
4
690
Making TCPSocket.new "Happy"!
coe401_
1
2k
Contribute to Comunities | React Tokyo Meetup #4 LT
sasagar
0
560
fieldalignmentから見るGoの構造体
kuro_kurorrr
0
110

Featured

See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Producing Creativity
orderedlist
PRO
344
40k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.2k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
GraphQLの誤解/rethinking-graphql
sonatard
71
10k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Writing Fast Ruby
sferik
628
61k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.2k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
13
800

Transcript

  1. @ManfredSteyer ManfredSteyer Micro Frontends with Modern Angular and Island Architectures

  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