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
97
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
170
JavaScript as a Crime Scene Forensic Analysis
Avatar for Manfred Steyer manfredsteyer
PRO
0
76
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
Perplexity Slack Botを作ってAI活用を進めた話 / AI Engineering Summit プレイベント
Avatar for yukyan n3xem
0
610
Using AI Tools Around Software Development
Avatar for inouehi inouehi
0
1.1k
関数型まつり2025登壇資料「関数プログラミングと再帰」
Avatar for Taison Tsukada taisontsukada
2
730
機械学習って何？ 5分で解説頑張ってみる
Avatar for Kazuki Ishikawa kuroneko2828
0
190
「兵法」から見る質とスピード
Avatar for ICKX ickx
0
250
SODA - FACT BOOK
Avatar for SODA inc. sodainc
1
670
インターフェース設計のコツとツボ
Avatar for おぎ togishima
2
690
REST API設計の実践 – ベストプラクティスとその落とし穴
Avatar for 武田 憲太郎 kentaroutakeda
2
360
ドメインモデリングにおける抽象の役割、tagless-finalによるDSL構築、そして型安全な最適化
Avatar for Kenichi SUZUKI knih
10
1.7k
Zennの運営完全に理解した #完全に理解したTalk
Avatar for Yusuke Wada wadayusuke
1
180
Cloudflare Realtime と Workers でつくるサーバーレス WebRTC
Avatar for Taiyu Yoshizawa nekoya3
0
370
衛星の軌道をWeb地図上に表示する
Avatar for Takahiro Miyoshi sankichi92
0
260

Featured

See All Featured
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
299
21k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
2.8k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.8k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
524
40k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
276
23k
Building Applications with DynamoDB
Avatar for Matt Wood mza
95
6.4k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
138
7k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
42
7.5k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
52
7.6k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.3k

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