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
520

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
37
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
Avatar for Manfred Steyer manfredsteyer
PRO
0
34
The Missing Link in Angular's Signal Story: Resource API and httpResource
Avatar for Manfred Steyer manfredsteyer
PRO
0
39
Rethinking Angular: The Future with Signals and the New Resource API @iJS Munich 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
67
Reactivity, Reimagined: Angular Signals at Every Layer
Avatar for Manfred Steyer manfredsteyer
PRO
0
73
Angular Architecture Workshop @AngularDays in Berlin 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
75
Migration to Signals, Resource API, and NgRx Signal Store
Avatar for Manfred Steyer manfredsteyer
PRO
0
140
Reactive Thinking with Signals and the Resource API
Avatar for Manfred Steyer manfredsteyer
PRO
0
120
All About Angular's New Signal Forms
Avatar for Manfred Steyer manfredsteyer
PRO
0
230

Other Decks in Programming

See All in Programming
HTTPじゃ遅すぎる！ SwitchBotを自作ハブで動かして学ぶBLE通信
Avatar for Shoichi Ochi occhi
0
200
One Enishi After Another
Avatar for Koji SHIMADA snoozer05
PRO
0
180
When Dependencies Fail: Building Antifragile Applications in a Fragile World
Avatar for Selçuk Usta selcukusta
0
120
自動テストのアーキテクチャとその理由ー大規模ゲーム開発の場合ー
Avatar for SEGADevTech segadevtech
0
520
なんでRustの環境構築してないのにRust製のツールが動くの？ / Why Do Rust-Based Tools Run Without a Rust Environment?
Avatar for TOMIKAWA Sotaro ssssota
14
47k
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
Avatar for kasacchiful kasacchiful
0
380
AsyncSequenceとAsyncStreamのプロポーザルを全部読む！！
Avatar for Shigure Shimotori s_shimotori
1
240
組織もソフトウェアも難しく考えない、もっとシンプルな考え方で設計する #phpconfuk
Avatar for hideki kinjyo o0h
PRO
6
1.5k
AI駆動開発カンファレンスAutumn2025 _AI駆動開発にはAI駆動品質保証
Avatar for Autify autifyhq
0
120
data-viz-talk-cz-2025
Avatar for Leonardo Collado-Torres lcolladotor
0
110
CSC305 Lecture 11
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
320
Register is more than clipboard
Avatar for Satoru Kitaguchi satorunooshie
1
400

Featured

See All Featured
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
9
960
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
412
23k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.7k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
51k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
15k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
13k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k

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