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
560

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
AI Assistants for Your Angular Solutions
Avatar for Manfred Steyer manfredsteyer
PRO
0
35
Nostalgia Meets Technology: Super Mario with TypeScript
Avatar for Manfred Steyer manfredsteyer
PRO
0
38
Full Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
Avatar for Manfred Steyer manfredsteyer
PRO
0
32
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios @OOP 2026, Munic
Avatar for Manfred Steyer manfredsteyer
PRO
0
210
Beyond the Basics: Signal Forms
Avatar for Manfred Steyer manfredsteyer
PRO
0
110
360° Signals in Angular: Signal Forms with SignalStore & Resources @ngLondon 01/2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
200
All About Angular‘s New Signal Forms
Avatar for Manfred Steyer manfredsteyer
PRO
0
37
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
Avatar for Manfred Steyer manfredsteyer
PRO
0
290
Your Architecture as a Crime Scene? Forensic Analysis
Avatar for Manfred Steyer manfredsteyer
PRO
0
200

Other Decks in Programming

See All in Programming
AI駆動開発の本音 〜Claude Code並列開発で見えたエンジニアの新しい役割〜
Avatar for hisuzuya hisuzuya
4
480
エージェント開発初心者の僕が エージェントを作った話と今後やりたいこと
Avatar for ta-hasunuma thasu0123
0
230
AI時代でも変わらない技術コミュニティの力～10年続く“ゆるい”つながりが生み出す価値
Avatar for Takehata Naoto n_takehata
2
640
今更考える「単一責任原則」 / Thinking about the Single Responsibility Principle
Avatar for philomagi tooppoo
3
1.4k
New in Go 1.26 Implementing go fix in product development
Avatar for sunecosuri sunecosuri
0
330
nuget-server - あなたが必要だったNuGetサーバー
Avatar for Kouji Matsui kekyo
PRO
0
170
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
230
守る「だけ」の優しいEMを抜けて、 事業とチームを両方見る視点を身につけた話
Avatar for Mitsui maroon8021
3
280
Swift ConcurrencyでよりSwiftyに
Avatar for 野瀬田　裕樹 yuukiw00w
0
240
Rで始めるML・LLM活用入門
Avatar for wakama1994 wakamatsu_takumu
0
160
Event Storming
Avatar for Henning Schwentner hschwentner
3
1.3k
「やめとこ」がなくなった — 1月にZennを始めて22本書いた AI共創開発のリアル
Avatar for atani atani14
0
350

Featured

See All Featured
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
1
110
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
140
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
950
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.8k
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
280
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.1k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.1k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Visualization
Avatar for Eitan Lees eitanlees
150
17k
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
5.2k
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
New Earth Scene 8
Avatar for Sydney Stone popppiees
1
1.7k

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