Reusable UI Components in a Framework Multiverse

on YouTube ↗14m

" summary

Shows how existing React components become native web components and run unchanged in plain HTML or Vue by wrapping them with a small bridge. Builds a video player and like button using Vite, ReactDOM createRoot, custom elements and Shadow DOM, with about 50 lines to wrap a component (plus ~20 lines for Vue). Demonstrates passing non-serializable functions as props, works in a PHP/jQuery page and in Vue, and notes modern framework support only landed in recent releases.

AI-written summary · about

" chapters (8)

1. 0:00Reusable UI components
2. 1:10Framework interoperability challenges
3. 3:16Web components as solution
4. 6:36Live demo: React to web component
5. 10:10Testing in plain HTML
6. 11:53Complex props and functions
7. 12:35Using in Vue unchanged
8. 13:19Summary

" related talks

• 36mBuilding framework agnostic UI with Web ComponentsPiotr Nalepa · 4Developers Katowice 2019
• 44mMake UI Components for the Web Framework EcosystemSergio Contreras · FrontFest 2020
• 31mNative Web Components - All Frameworks InvitedMichael Collins · UtahJS Conf 2018
• 34mWeb Components & Micro Apps: Angular, React & Vue peacefully united?Manfred Steyer · iJS 2018
• 34mComponent Documentation Made EasyBart Ledoux · Vueconf.US 2020
• 34mWeb Components & Micro Apps: Angular, React & Vue peacefully united?Manfred Steyer · iJS 2018 Spring
• 45mLet's Talk About Web ComponentsJemima Abu · NDC Porto 2022
• 36mAngular, React, Vue and co: Harmoniously united by web components and micro apps?Manfred Steyer · Voxxed Days Frontend Bucharest 2019