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

Native Federation: The Future of Micro Frontend...

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

Native Federation: The Future of Micro Frontends in Angular

Avatar for Manfred Steyer

Manfred Steyer PRO

April 25, 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
57
Agentic UI: Where the Agent meets the User @FrontMania 2026 in Utrecht
Avatar for Manfred Steyer manfredsteyer
PRO
0
57
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
49
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
99

Other Decks in Programming

See All in Programming
The Rails Doctrine Decade
Avatar for Koichi ITO koic
2
570
mrbgem 三角測量 開発
Avatar for ogom ogom
0
240
UPDATE をやめる — EF Core でマスタをバージョン管理する
Avatar for HideyukiKitao panda728
PRO
0
1.2k
Augmenting AI with the Power of Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
660
速習iPhone Duo対応
Avatar for 野瀬田　裕樹 yuukiw00w
2
980
すこし踏み込む CancellationToken
Avatar for tkym htkym
2
1.7k
AWS CDKのカスタムリソースでContinuum（旧Security Agent）を実装した話 | Implementing Continuum (formerly Security Agent) via AWS CDK Custom Resource
Avatar for アキキー | Akihisa Ikeda akihisaikeda
2
150
半永久的に提供し続けられるプライベートクラウドを目指して ― 利用者の認知負荷を抑えるAPI抽象化とハードウェア世代交代の基盤設計
Avatar for Tomofumi Kondo tomokon
0
480
Findy - エンジニア向け会社紹介/Findy Company Deck
Avatar for Findy findyinc
6
400k
When benchmarks go bad - what I learned from measuring performance wrong
Avatar for Holly Cummins hollycummins
0
210
Compiling a real-world CLI tool to native with Static Hermes
Avatar for Tzvetan Mikov tmikov2023
0
110
TechTown - Creating Composable Callables in Contemporary C++
Avatar for Björn Fahller rollbear
0
110

Featured

See All Featured
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
464
34k
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
1.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.6k
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
68
59k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
6.1k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
3k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
2
470
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.7k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
600
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
2
940

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