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

Native Federation: The Future of Micro Frontend...

Manfred Steyer
PRO
July 18, 2024
Programming
0
310

Native Federation: The Future of Micro Frontends in Angular

Manfred Steyer
PRO

July 18, 2024
Tweet

More Decks by Manfred Steyer

See All by Manfred Steyer
Successful with Signals: 3 Patterns for Your Architecture
manfredsteyer
PRO
0
65
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
240
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
1
250
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
200
Where do we go from here? Strategies for Signals
manfredsteyer
PRO
0
200
Successful with Signals: 3 Effective Rules
manfredsteyer
PRO
0
110
Vertical Architectures for Scalable Angular Applications
manfredsteyer
PRO
0
350
Successful with Signals: 3 Effective Rules
manfredsteyer
PRO
0
120
Modern Angular Architectures With Nx and Lightweight Stores @ngBelgrade 2024
manfredsteyer
PRO
0
240

Other Decks in Programming

See All in Programming
【TID2024】模擬講義：プログラマと一緒にゲームをデザインしてみよう！
akatsukigames_tech
0
570
令和トラベルにおけるLLM活用事例：社内ツール開発から得た学びと実践
ippo012
0
120
Desafios e Lições Aprendidas na Migração de Monólitos para Microsserviços em Java
jessilyneh
2
140
Kotlin 2.0 and Beyond
antonarhipov
2
150
ドメイン駆動設計を実践するために必要なもの
bikisuke
3
330
Why Prism?
kddnewton
4
1.7k
Scala アプリケーションのビルドを改善してデプロイ時間を 1/4 にした話 | How I improved the build of my Scala application and reduced deployment time by 4x
nomadblacky
1
160
REXML改善のその後
naitoh
0
190
LangGraphでのHuman-in-the-Loopの実装
os1ma
3
990
XStateでReactに秩序を与えたい
gizm000
0
710
ブラウザ互換の重要性 - あらゆるユーザーに価値を届けるために必要なこと
yamanoku
0
110
状態管理ライブラリZustandの導入から運用まで
k1tikurisu
3
440

Featured

See All Featured
Code Reviewing Like a Champion
maltzj
518
39k
Designing with Data
zakiwarfel
98
5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
27
8.9k
Optimizing for Happiness
mojombo
375
69k
Visualization
eitanlees
142
15k
Design by the Numbers
sachag
277
19k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
363
22k
Raft: Consensus for Rubyists
vanstee
135
6.5k
The Invisible Customer
myddelton
119
13k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
157
15k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
The Illustrated Children's Guide to Kubernetes
chrisshort
47
48k

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