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
490

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
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
Avatar for Manfred Steyer manfredsteyer
PRO
0
45
JavaScript as a Crime Scene Forensic Analysis
Avatar for Manfred Steyer manfredsteyer
PRO
0
31
Modern Angular with Signals and Signal Store: New Rules for Your Architecture @jax2025 in Mainz, Germany
Avatar for Manfred Steyer manfredsteyer
PRO
0
65
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
Avatar for Manfred Steyer manfredsteyer
PRO
0
39
Your Architecture as a Crime Scene Forensic Analysis
Avatar for Manfred Steyer manfredsteyer
PRO
0
40
Live Coding: Migrating an Application to Signals
Avatar for Manfred Steyer manfredsteyer
PRO
0
110
The Missing Link in Angular’s Signal Story: Resource API and httpResource
Avatar for Manfred Steyer manfredsteyer
PRO
0
160
Strategic Design (DDD) for the Frontend @DDD Meetup Stuttgart
Avatar for Manfred Steyer manfredsteyer
PRO
0
200
Module Boundaries and Architecture with Forensic Analysis @NxSummit Amsterdam 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
120

Other Decks in Programming

See All in Programming
20250426 GDGoC 合同新歓 - GDGoC のススメ
Avatar for Yoshimura Naoya getty708
0
120
Ruby で作る RISC-V CPU エミュレーター / RISC-V CPU emulator made with Ruby
Avatar for hachi (Hayao Kimura) hayaokimura
5
1.2k
Embracing Ruby magic
Avatar for Vinicius Stock vinistock
2
280
eBPF超入門「o11yに使える」とは (20250424_eBPF_o11y)
Avatar for Koki Senda thousanda
1
120
一緒に働きたくなるプログラマの思想 #QiitaConference
Avatar for mu_zaru mu_zaru
84
21k
flutter_kaigi_mini_4.pdf
Avatar for Hiroki Nobuta nobu74658
0
160
Duke on CRaC with Jakarta EE
Avatar for ivargrimstad ivargrimstad
1
270
Boost Your Performance and Developer Productivity with Jakarta EE 11
Avatar for ivargrimstad ivargrimstad
0
1k
Носок на сок
Avatar for Bo0oM bo0om
0
1.4k
Global Azure 2025 @ Kansai / Hyperlight
Avatar for kosmosebi kosmosebi
0
160
オープンソースコントリビュート入門
Avatar for katsuma _katsuma
0
150
UMAPをざっくりと理解 / Overview of UMAP
Avatar for kaityo256 kaityo256
PRO
3
1.6k

Featured

See All Featured
Building an army of robots
Avatar for Kyle Neath kneath
305
45k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
35
2.7k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.3k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
336
57k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
233
140k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
656
60k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
63
7.7k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
42
7.5k

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