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

Native Federation: The Future of Micro Frontend...

Avatar for Manfred Steyer Manfred Steyer PRO
July 18, 2024
Programming
0
470

Native Federation: The Future of Micro Frontends in Angular

Avatar for Manfred Steyer

Manfred Steyer PRO

July 18, 2024
Tweet

More Decks by Manfred Steyer

See All by Manfred Steyer
All About Angular‘s New Signal Forms
Avatar for Manfred Steyer manfredsteyer
PRO
0
17
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
Avatar for Manfred Steyer manfredsteyer
PRO
0
210
Your Architecture as a Crime Scene? Forensic Analysis
Avatar for Manfred Steyer manfredsteyer
PRO
0
150
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
Avatar for Manfred Steyer manfredsteyer
PRO
0
240
Your Architecture as a Crime Scene: Forensic Analysis
Avatar for Manfred Steyer manfredsteyer
PRO
0
110
Reactive Thinking with Signals and the new Resource API
Avatar for Manfred Steyer manfredsteyer
PRO
0
220
Rethinking Angular: The Future with Signal Store and the New Resource API @w-jax 2025, Munich
Avatar for Manfred Steyer manfredsteyer
PRO
0
98
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
Avatar for Manfred Steyer manfredsteyer
PRO
0
150
The Missing Link in Angular's Signal Story: Resource API and httpResource
Avatar for Manfred Steyer manfredsteyer
PRO
0
180

Other Decks in Programming

See All in Programming
実はマルチモーダルだった。ブラウザの組み込みAI🧠でWebの未来を感じてみよう #jsfes #gemini
Avatar for n0bisuke n0bisuke2
3
1.4k
疑似コードによるプロンプト記述、どのくらい正確に実行される？
Avatar for kokuyouwind kokuyouwind
0
110
GISエンジニアから見たLINKSデータ
Avatar for nokonoko1203 nokonoko1203
0
190
.NET Conf 2025 の興味のあるセッ ションを復習した / dotnet conf 2025 quick recap for backend engineer
Avatar for Tomohisa Takaoka tomohisa
0
110
【卒業研究】会話ログ分析によるユーザーごとの関心に応じた話題提案手法
Avatar for MomokoShirakawa momok47
0
160
React 19でつくる「気持ちいいUI」- 楽観的UIのすすめ
Avatar for Hiroshi Morishige himorishige
11
4.5k
AI前提で考えるiOSアプリのモダナイズ設計
Avatar for 野瀬田　裕樹 yuukiw00w
0
210
LLMで複雑な検索条件アセットから脱却する！！ 生成的検索インタフェースの設計論
Avatar for po3rin po3rin
4
1.1k
大規模Cloud Native環境におけるFalcoの運用
Avatar for Chihiro Hasegawa owlinux1000
0
240
愛される翻訳の秘訣
Avatar for Kishikawa Katsumi kishikawakatsumi
3
370
Graviton と Nitro と私
Avatar for maroon1st maroon1st
0
160
PostgreSQLで手軽にDuckDBを使う！DuckDB&pg_duckdb入門/osc25hi-duckdb
Avatar for Takahashi Ikki takahashiikki
0
230

Featured

See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
0
280
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
140
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.5k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
0
390
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
0
1.1k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon szymonslowik
1
870
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.8k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
76
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
130

Transcript

  1. @ManfredSteyer ManfredSteyer Native Federation: The Future of Micro Frontends in

    Angular WeAreDevelopers World Congress

  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

  25. @ManfredSteyer

  26. @ManfredSteyer Title Content Call to Action Info More Info

  27. @ManfredSteyer

  28. @ManfredSteyer

  29. @ManfredSteyer SPA + SSR Classic SPA Complexity Complexity Monolith MF

    Frankenstein Biz Apps B2C Team Autonomy →

  30. @ManfredSteyer Free eBook (6th Edition) ANGULARarchitects.io/book 20 Chapters

  31. @ManfredSteyer Module Federation: Mental Model rocks! Native Federation Deferred Loading

    SSR with HTML Fragments

  32. @ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting

    http://angulararchitects.io