Revision 480: Web Component Design mit Joy Heron

Fullstack-Entwicklerin, CSS-Feinschmeckerin und Webstandards-Liebhaberin Joy Heron (Twitter, Webseite, Case-Podcast) fand sich im virtuellen Workingdraft-Studio ein, um mit Schepp, Peter und Vanessa über Web Components zu fachsimpeln.

Schaunotizen

[00:01:36] Web Components und Web Component Design

Wir beginnen damit, die Unterschiede zwischen Web Components und Framework-Komponenten herauszuarbeiten und bequatschen dabei mit Custom Elements, Shadow DOM und dem template-Element die wesentlichen Bestandteile von Web Components. Wir besprechen Accessibility-Fragen, wägen HTML-Seiten gegen SPAs ab (relevant: Removing client-side React.js (but keeping it on the server) resulted in a 50% performance improvement on our landing page) und besprechen das Für und Wider von Polyfills für Web Components. Ergebnis: gutes Web-Component-Design braucht keine Polyfills (aber wenn, dann sollte es ein leichtgewichtiger Polyfill sein). Außerdem kommen zukünftige (Deklaratives Shadow DOM) und verflossene (HTML Imports) APIs rund um Web Components zu Sprache. Über die Frage des Einsatzspektrums und denkbarer Alternativen zu sowohl Web Components als auch fetten Frameworks (hyperHTML, µland) kommen wir zu der Frage, welche Wert das Wissen um Webstandards-Basics (mit Event.preventDefault() als Beispiel) heutzutage überhaupt hat. Gegen Ende verweisen wir noch auf die MDN-Doku zu Web Components, Joy’s Talk Web Components: Maintaining and Reusing your Frontend, Brad Frost’s Artikel zu front-of-the-front-end and back-of-the-front-end web development und Joy’s Kompendium Responsible Web Applications. Zudem stellt Peter für frühstens 2027 einen Blogpost über OOP-DOM mit Elementen in Aussicht.