Frameworks and webcomponents

on YouTube ↗35m

" summary

Compares @Angular/elements, @vue/web-component-wrapper, React wrappers and pure players like LitElement by building a simple custom button with slot and event and measuring behavior and size. Finds React fails advanced interop (0 out of 14 advanced tests), Preact fixes many gaps, Vue works but cannot host shadow DOM styles cleanly, and Angular elements run but produce a large runtime (~50 KB bundle without Ivy) while events, properties and slots otherwise work end to end.

AI-written summary · about

" chapters (12)

1. 0:00Start
2. 4:09SPECS
3. 6:46ATTRIBUTES VS PROPERTIES
4. 7:50CONTENT PROJECTION WITH SLOT
5. 8:18NAMED SLOTS
6. 8:35STYLING
7. 18:21WRAPPING
8. 18:44THE COMPARISON
9. 20:11WHAT ARE WE BUILDING
10. 24:58IVY ELEMENTS
11. 29:11WEB-REACT-COMPONENTS
12. 33:48CONCLUSION

" related talks

• 41mWeb Components Are Your Framework's Best Friend ｜Filip Bruun Bech-Larsen · Øredev 2019
• 28mAngular and WebcomponentsAna Cidre, Sherry List · Frontend Developer Love 2019
• 34mWeb Components & Micro Apps: Angular, React & Vue peacefully united?Manfred Steyer · iJS 2018
• 38mCustom Elements EverywhereRob Dodson · Polymer Summit 2017
• 43mDiversity in the World of Web ComponentsHoracio Gonzalez, Cyril Balit · DevFest Toulouse 2017
• 34mWeb Components & Micro Apps: Angular, React & Vue peacefully united?Manfred Steyer · iJS 2018 Spring
• 40mAngular, React, Vue and Co. – peacefully united thanks to Web Components and Micro AppsManfred Steyer · Voxxed Days Ticino 2019
• 25mI'm with Web Components and Web Components Are with MeGil Fink · AngularUP 2019