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

Micro Frontends with Web Standards

Avatar for Manfred Steyer Manfred Steyer PRO
February 15, 2024
Programming
1
530

Micro Frontends with Web Standards

Avatar for Manfred Steyer

Manfred Steyer PRO

February 15, 2024
Tweet

More Decks by Manfred Steyer

See All by Manfred Steyer
Rethinking Angular: The Future with Signal Store and the New Resource API @w-jax 2025, Munich
Avatar for Manfred Steyer manfredsteyer
PRO
0
52
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
Avatar for Manfred Steyer manfredsteyer
PRO
0
64
The Missing Link in Angular's Signal Story: Resource API and httpResource
Avatar for Manfred Steyer manfredsteyer
PRO
0
93
Rethinking Angular: The Future with Signals and the New Resource API @iJS Munich 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
71
Reactivity, Reimagined: Angular Signals at Every Layer
Avatar for Manfred Steyer manfredsteyer
PRO
0
77
Angular Architecture Workshop @AngularDays in Berlin 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
85
Migration to Signals, Resource API, and NgRx Signal Store
Avatar for Manfred Steyer manfredsteyer
PRO
0
160
Reactive Thinking with Signals and the Resource API
Avatar for Manfred Steyer manfredsteyer
PRO
0
130
All About Angular's New Signal Forms
Avatar for Manfred Steyer manfredsteyer
PRO
0
240

Other Decks in Programming

See All in Programming
エンジニアに事業やプロダクトを理解してもらうためにやってること
Avatar for bayashi murabayashi
0
140
pnpm に provenance のダウングレード を検出する PR を出してみた
Avatar for mattsuu ryo_manba
1
220
ノーコードからの脱出 -地獄のデスロード- / Escape from Base44
Avatar for Keisuke69 keisuke69
0
660
Functional Calisthenics in Kotlin: Kotlinで「関数型エクササイズ」を実践しよう
Avatar for Kent OHASHI lagenorhynque
0
110
CSC509 Lecture 13
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
240
SidekiqでAIに商品説明を生成させてみた
Avatar for Aki Nakahara akinko_0915
0
120
AIのバカさ加減に怒る前にやっておくこと
Avatar for k2moons blueeventhorizon
0
160
CSC509 Lecture 08
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
280
自動テストを活かすためのテスト分析・テスト設計の進め方/JaSST25 Shikoku
Avatar for Hiroki Iseri goyoki
1
480
マイベストのシンプルなデータ基盤の話 - Googleスイートとのつき合い方 / mybest-simple-data-architecture-google-nized
Avatar for snhryt snhryt
0
140
AIを駆使して新しい技術を効率的に理解する方法
Avatar for nogu nogu66
0
500
NIKKEI Tech Talk#38
Avatar for cipepser cipepser
0
430

Featured

See All Featured
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
13k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.7k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
8
370
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
7k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
658
61k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
303
21k
Code Review Best Practice
Avatar for Trisha Gee trishagee
72
19k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
5
730

Transcript

  1. @ManfredSteyer ManfredSteyer Micro Frontends with Web Standards

  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 & Standalone & esbuild Frankenstein w/ Web Components

    Deferred Loading

  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 1. ng add @angular-architects/native-federation […] 2. Adjust generated config

    3. Start Shell and Micro Frontends

  19. @ManfredSteyer

  20. @ManfredSteyer

  21. @ManfredSteyer Wrap them into Web Components Angular App (MFE) React

    App (MFE)

  22. @ManfredSteyer

  23. @ManfredSteyer await loadRemoteModule('other-app', './web-cmp');

  24. @ManfredSteyer await loadRemoteModule('other-app', './web-cmp'); const rootElm = document.createElement('mfe2-root'); document.body.appendChild(rootElm);

  25. @ManfredSteyer await loadRemoteModule('other-app', './web-cmp'); const rootElm = document.createElement('web-cmp') document.body.appendChild(rootElm); WrapperComponent

  26. @ManfredSteyer

  27. @ManfredSteyer

  28. @ManfredSteyer

  29. @ManfredSteyer Title Content Call to Action Info More Info

  30. @ManfredSteyer @defer on viewport { @main { <heavy-cmp /> }

    @placeholder { <img src="ph.png"> } […] }

  31. @ManfredSteyer

  32. @ManfredSteyer

  33. @ManfredSteyer Free eBook (6th Edition) ANGULARarchitects.io/book 20 Chapters 4 new

    Signal Store Chapters

  34. @ManfredSteyer Module Federation: Mental Model rocks! Native Federation Deferred Loading

    SSR with HTML Fragments

  35. @ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting

    http://angulararchitects.io