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
All About Angular's New Signal Forms
Avatar for Manfred Steyer manfredsteyer
PRO
0
120
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
Avatar for Manfred Steyer manfredsteyer
PRO
0
170
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
Avatar for Manfred Steyer manfredsteyer
PRO
0
120
Your Architecture as a Crime Scene Forensic Analysis @BASTA! 2025 in Mainz, Germany
Avatar for Manfred Steyer manfredsteyer
PRO
0
67
Your Architecture as a Crime Scene Forensic Analysis @EntwicklerSummit Berlin 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
40
Advanced Micro Frontends: Multi Version/ Framework Scenarios
Avatar for Manfred Steyer manfredsteyer
PRO
0
400
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
Avatar for Manfred Steyer manfredsteyer
PRO
0
660
Modern Angular with Signals and Signal Store: New Rules for Your Architecture @enterJS Advanced Angular Day 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
530
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
170

Other Decks in Programming

See All in Programming
Foundation Modelsを実装日本語学習アプリを作ってみた！
Avatar for 蛋白（たんぱく・TANPACT） hypebeans
0
110
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
Avatar for RIZAPテクノロジーズ rizap_tech
0
120
CSC509 Lecture 03
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
330
なぜGoのジェネリクスはこの形なのか？ Featherweight Goが明かす設計の核心
Avatar for Ryotaro ryotaros
7
1.1k
CSC509 Lecture 06
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
260
uniqueパッケージの内部実装を支えるweak pointerの話
Avatar for magavel magavel
0
990
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
Avatar for Naofumi Kagami naofumi
4
4k
dynamic!
Avatar for MOROHASHI Kyosuke moro
10
7.5k
明日から始めるリファクタリング
Avatar for ryounasso ryounasso
0
140
複雑化したリポジトリをなんとかした話　pipenvからuvによるモノレポ構成への移行
Avatar for Satoshi Kaneyasu satoshi256kbyte
1
1.1k
アメ車でサンノゼを走ってきたよ！
Avatar for Shigure Shimotori s_shimotori
0
220
SpecKitでどこまでできる？ コストはどれくらい？
Avatar for Tech Leverages leveragestech
0
730

Featured

See All Featured
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
11k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.1k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
127
17k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
79
6k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
252
21k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
37
2.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
30
2.9k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Visualization
Avatar for Eitan Lees eitanlees
149
16k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
14k

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