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
A2UI as an Architecture Question: Agentic UI Between AI Freedom and Control
Avatar for Manfred Steyer manfredsteyer
PRO
0
66
AI-Ready Angular Architectures Architecture as Executable Contract
Avatar for Manfred Steyer manfredsteyer
PRO
0
160
Nostalgia Meets Technology: Super Mario with TypeScript @BASTA 2026 in Mainz, Germany
Avatar for Manfred Steyer manfredsteyer
PRO
0
34
Beyond Chatbots: Agentic UI with Open Standards @AGNTcon 2026 in Amsterdam
Avatar for Manfred Steyer manfredsteyer
PRO
0
140
Next-Level Frontends: Agentic Web UIs Under the Hood
Avatar for Manfred Steyer manfredsteyer
PRO
0
97
Agentic UI with Open Standards @ngGraz Sep 2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
100
Agentic UI with Open Standards @GDG Salzburg, Bgl & Prishtina
Avatar for Manfred Steyer manfredsteyer
PRO
0
90
Generative UI & AI-Assistants for Your Angular Solutions
Avatar for Manfred Steyer manfredsteyer
PRO
1
530
Generative UI & AI-Assistants for Your Angular Solutions
Avatar for Manfred Steyer manfredsteyer
PRO
0
230

Other Decks in Programming

See All in Programming
[2026-09-26]空論ジェネリックプロセス～テスト資産とAIで紡ぐ、再現可能なパフォーマンスチューニングの話～
Avatar for tosite tosite
0
250
Vue Fes Japan 2026 タイムテーブル徹底解説
Avatar for 448jp | OKI Yoshiya 448jp
1
580
速習iPhone Duo対応
Avatar for 野瀬田　裕樹 yuukiw00w
2
920
スマートフォンでモールス信号を送受信する 〜スマートフォンのLEDとカメラで作る光通信の設計と実装〜
Avatar for Atsuki Seo atsuki_seo
0
220
Omarchy Tokyo やると聞いて UMPC 買ってセットアップしてきた
Avatar for Fumiaki MATSUSHIMA mtsmfm
0
200
巨大モノリシックアプリ モダン化大作戦
Avatar for Ryomm ktcryomm
1
1.2k
Starting & Sustaining Code-Based E2E Testing for Non-Coding QA Teams( #jasstniigata )
Avatar for teyamagu teyamagu
PRO
1
810
大喜利で理解するLLM as a Judge / Understanding LLM-as-a-Judge through Ogiri
Avatar for rockname rockname
0
180
[ハンズオン]AIへの指示だけで「五目並べ」を作ってみよう
Avatar for Satoshi Kaneyasu satoshi256kbyte
1
320
Are APIs Still Relevant in the AI Era?
Avatar for Antoine Bluchet soyuka
0
390
Simple Storage Service(S3) is not simple
Avatar for Yura Iwatsuka iwatsukayura
0
120
Ghostty + Neovimで作る 透明でカッコ良い開発環境
Avatar for Kanade Nonomura j341nono
0
150

Featured

See All Featured
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
63
46k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
52k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
340
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
1
540
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.8k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
890
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.9k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
32k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.3k
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
440
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
150k

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