Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Micro Frontends with Modern Angular and Island ...

Avatar for Manfred Steyer Manfred Steyer PRO
April 10, 2024
Programming
390
0

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

Avatar for Manfred Steyer

Manfred Steyer PRO

April 10, 2024

More Decks by Manfred Steyer

See All by Manfred Steyer
Human in the Loop Beyond Approval: Toward True Collaboration @FrontMania 2026 in Utrecht
Avatar for Manfred Steyer manfredsteyer
PRO
0
55
Agentic UI: Where the Agent meets the User @FrontMania 2026 in Utrecht
Avatar for Manfred Steyer manfredsteyer
PRO
0
50
A2UI as an Architecture Question: Agentic UI Between AI Freedom and Control
Avatar for Manfred Steyer manfredsteyer
PRO
0
92
AI-Ready Angular Architectures Architecture as Executable Contract
Avatar for Manfred Steyer manfredsteyer
PRO
0
250
Nostalgia Meets Technology: Super Mario with TypeScript @BASTA 2026 in Mainz, Germany
Avatar for Manfred Steyer manfredsteyer
PRO
0
48
Beyond Chatbots: Agentic UI with Open Standards @AGNTcon 2026 in Amsterdam
Avatar for Manfred Steyer manfredsteyer
PRO
0
150
Next-Level Frontends: Agentic Web UIs Under the Hood
Avatar for Manfred Steyer manfredsteyer
PRO
0
110
Agentic UI with Open Standards @ngGraz Sep 2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
120
Agentic UI with Open Standards @GDG Salzburg, Bgl & Prishtina
Avatar for Manfred Steyer manfredsteyer
PRO
0
98

Other Decks in Programming

See All in Programming
IBM Bob Dojo #1 仕様駆動開発入門
Avatar for Akira Onishi (IBM) oniak3ibm
PRO
0
380
AWS CDKのカスタムリソースでContinuum（旧Security Agent）を実装した話 | Implementing Continuum (formerly Security Agent) via AWS CDK Custom Resource
Avatar for アキキー | Akihisa Ikeda akihisaikeda
2
150
複雑なUIコンポーネントとの ⻑い付き合い⽅：波及するバグからテスト戦略を経て、安全な再設計へ
Avatar for masahiko.asai mixplace
0
390
mrbgem 三角測量 開発
Avatar for ogom ogom
0
240
re:Inventに行く前に知っておきたい現地参加のノウハウ
Avatar for nokomoro3 nokomoro3
0
400
最近”作らせてる” ローカルAIアプリの話
Avatar for ITO Akihiro akit37
0
450
TechTown - Creating Composable Callables in Contemporary C++
Avatar for Björn Fahller rollbear
0
100
Vue Fes Japan の “作る側”に関わってみて
Avatar for Naoki Haba naokihaba
0
150
Augmenting AI with the Power of Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
640
GemmaをJevのように使ってみる / Use Gemma like Jev
Avatar for Naoki Kishida kishida
5
780
【加筆修正版】Laravel のアプリケーションをどこにデプロイするか #phpcon_ehime
Avatar for akase244 akase244
0
150
ChromeでローカルLLM
Avatar for ryu ryu1013
0
110

Featured

See All Featured
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
2
6.3k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
2
740
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
490
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
620
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.6k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
16k
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
1.3k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
18k
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
5.3M
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
4
530

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