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
580
1

Micro Frontends with Web Standards

Avatar for Manfred Steyer

Manfred Steyer PRO

February 15, 2024

More Decks by Manfred Steyer

See All by Manfred Steyer
Signal Forms: Beyond the Basics @ngBelgrade 2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
32
Agentic UI in the Frontend: Architectures with Open Standards @JAX 2026 in Mainz
Avatar for Manfred Steyer manfredsteyer
PRO
0
68
Rethinking Angular: The Future with Signal Store and the New Resource API @JAX 2024 in Mainz
Avatar for Manfred Steyer manfredsteyer
PRO
0
41
Agentic UI with Angular @ngAir April 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
160
Migration to Signals, Signal Forms, Resource API, and NgRx Signal Store @Angular Days 03/2026 Munich
Avatar for Manfred Steyer manfredsteyer
PRO
0
330
AI Assistants for Your Angular Solutions @Angular Graz, March 2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
190
AI Assistants for Your Angular Solutions @ngVienna March 2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
98
AI Assistants for Your Angular Solutions
Avatar for Manfred Steyer manfredsteyer
PRO
0
210
Nostalgia Meets Technology: Super Mario with TypeScript
Avatar for Manfred Steyer manfredsteyer
PRO
0
150

Other Decks in Programming

See All in Programming
Road to RubyKaigi: Play Hard(ware)
Avatar for makicamel makicamel
1
490
Offline should be the norm: building local-first apps with CRDTs & Kotlin Multiplatform
Avatar for Renaud MATHIEU renaudmathieu
0
230
TiDBのアーキテクチャから学ぶ分散システム入門 〜MySQL互換のNewSQLは何を解決するのか〜 / tidb-architecture-study
Avatar for DPon dznbk
1
190
mruby on C#: From VM Implementation to Game Scripting (RubyKaigi 2026)
Avatar for hadashiA hadashia
2
800
PHP で mp3 プレイヤーを実装しよう
Avatar for memory m3m0r7
PRO
0
290
レガシーPHP転生 〜父がドメインエキスパートだったのでDDD+Claude Codeでチート開発します〜
Avatar for panda_program panda_program
0
1.1k
〜バイブコーディングを超えて〜 チームで実験し続けたAI駆動開発
Avatar for Toranosuke Minamikawa tigertora7571
0
170
Running Swift without an OS
Avatar for Kishikawa Katsumi kishikawakatsumi
0
860
アーキテクチャモダナイゼーションとは何か
Avatar for nwiizo nwiizo
19
5.5k
YJITとZJITにはイカなる違いがあるのか？
Avatar for yamanao nakiym
0
260
Spec Driven Development | AI Summit Vilnius
Avatar for Daniel Sogl danielsogl
PRO
1
120
セグメントとターゲットを意識するプロポーザルの書き方 〜採択の鍵は、誰に刺すかを見極めるマーケティング戦略にある〜
Avatar for memory m3m0r7
PRO
0
610

Featured

See All Featured
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
270
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
130
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
10
37k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
99
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
330
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
760
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
3
120

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