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
460

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
Advanced Micro Frontends: Multi Version/ Framework Scenarios
Avatar for Manfred Steyer manfredsteyer
PRO
0
280
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
Avatar for Manfred Steyer manfredsteyer
PRO
0
600
Modern Angular with Signals and Signal Store: New Rules for Your Architecture @enterJS Advanced Angular Day 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
470
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
150
Your Architecture as a Crime Scene: Forensic Analysis
Avatar for Manfred Steyer manfredsteyer
PRO
0
220
Rethinking Data Access: The New httpResource in Angular
Avatar for Manfred Steyer manfredsteyer
PRO
0
350
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
Avatar for Manfred Steyer manfredsteyer
PRO
0
230
JavaScript as a Crime Scene Forensic Analysis
Avatar for Manfred Steyer manfredsteyer
PRO
0
130
Modern Angular with Signals and Signal Store: New Rules for Your Architecture @jax2025 in Mainz, Germany
Avatar for Manfred Steyer manfredsteyer
PRO
0
220

Other Decks in Programming

See All in Programming
『リコリス・リコイル』に学ぶ！！ 〜キャリア戦略における計画的偶発性理論と変わる勇気の重要性〜
Avatar for わんこ(Wanko_IT) wanko_it
1
610
Nuances on Kubernetes - RubyConf Taiwan 2025
Avatar for Andrey Novikov envek
0
210
Infer入門
Avatar for r1ru riru
4
1.6k
Ruby Parser progress report 2025
Avatar for yui-knk yui_knk
1
230
Google I/O recap web編 大分Web祭り2025
Avatar for kponda kponda
0
2.9k
ライブ配信サービスの インフラのジレンマ -マルチクラウドに至ったワケ-
Avatar for Mirrativ mirrativ
2
270
AI OCR API on Lambdaを Datadogで可視化してみた
Avatar for Nealle nealle
0
220
Improving my own Ruby thereafter
Avatar for monochrome sisshiki1969
1
130
FindyにおけるTakumi活用と脆弱性管理のこれから
Avatar for adachi.ryo rvirus0817
0
210
AWS発のAIエディタKiroを使ってみた
Avatar for 入井 啓太 iriikeita
1
110
AIコーディングAgentとの向き合い方
Avatar for kmuto eycjur
0
250
AIでLINEスタンプを作ってみた
Avatar for kmuto eycjur
1
210

Featured

See All Featured
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
131
19k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
59
9.5k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
The Language of Interfaces
Avatar for Des Traynor destraynor
160
25k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
110
20k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
900
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
55
6.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
284
13k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
830

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