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
440

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
Your Architecture as a Crime Scene: Forensic Analysis
Avatar for Manfred Steyer manfredsteyer
PRO
0
94
Rethinking Data Access: The New httpResource in Angular
Avatar for Manfred Steyer manfredsteyer
PRO
0
260
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
Avatar for Manfred Steyer manfredsteyer
PRO
0
160
JavaScript as a Crime Scene Forensic Analysis
Avatar for Manfred Steyer manfredsteyer
PRO
0
75
Modern Angular with Signals and Signal Store: New Rules for Your Architecture @jax2025 in Mainz, Germany
Avatar for Manfred Steyer manfredsteyer
PRO
0
160
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
Avatar for Manfred Steyer manfredsteyer
PRO
0
91
Your Architecture as a Crime Scene Forensic Analysis
Avatar for Manfred Steyer manfredsteyer
PRO
0
63
Live Coding: Migrating an Application to Signals
Avatar for Manfred Steyer manfredsteyer
PRO
0
170
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
Javaのルールをねじ曲げろ！禁断の操作とその代償から学ぶメタプログラミング入門 / A Guide to Metaprogramming: Lessons from Forbidden Techniques and Their Price
Avatar for nrs nrslib
3
1.9k
型付きアクターモデルがもたらす分散シミュレーションの未来
Avatar for Takatomo Torigoe piyo7
0
710
Spring gRPC で始める gRPC 入門 / Introduction to gRPC with Spring gRPC
Avatar for mackey0225 mackey0225
2
450
Effect の双対、Coeffect
Avatar for ゆきくらげ yukikurage
4
1.2k
〜可視化からアクセス制御まで〜 BigQuery×Looker Studioで コスト管理とデータソース認証制御する方法
Avatar for CUEBiC Inc. cuebic9bic
3
320
Webからモバイルへ Vue.js × Capacitor 活用事例
Avatar for Naoki Haba naokihaba
0
450
"使いづらい" をリバースエンジニアリングする UI の読み解き方
Avatar for 株式会社Rebase_エンジニアリング rebase_engineering
0
130
Julia という言語について （FP in Julia « SIDE: F »） for 関数型まつり2025
Avatar for GOTOH Shunsuke antimon2
3
850
Practical Tips and Tricks
for Working with 
Compose Multiplatform Previews (mDevCamp 2025)
Avatar for István Juhos stewemetal
0
120
Perlで痩せる
Avatar for Yuuki Shimizu yuukis
1
680
カクヨムAndroidアプリのリブート
Avatar for Nabe numeroanddev
0
380
Agent Rules as Domain Parser
Avatar for Yoda Keisuke yodakeisuke
1
480

Featured

See All Featured
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
63
7.8k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
6
680
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
161
15k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
337
57k
Visualization
Avatar for Eitan Lees eitanlees
146
16k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
228
22k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
50
8.3k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
329
24k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
106
19k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.3k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
48
5.4k

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