Revision 480: Web Component Design mit Joy Heron

Published: June 8, 2021, 10:31 a.m.

Fullstack-Entwicklerin, CSS-Feinschmeckerin und Webstandards-Liebhaberin Joy\nHeron (Twitter, Webseite, Case-Podcast) fand sich im virtuellen\nWorkingdraft-Studio ein, um mit Schepp, Peter und Vanessa \xfcber Web Components zu\nfachsimpeln.\n\n\nUNSER SPONSOR\n\n\n\nnetidee ist die gro\xdfe Internet F\xf6rderaktion in \xd6sterreich. Bis zu 1. Million\nEuro liegen im F\xf6rdertopf. Gef\xf6rdert werden innovative Projekte oder\nHochschularbeiten, die das Internet weiterentwickeln und einen\ngesellschaftlichen Mehrwert liefern. Hier kannst du mehr \xfcber netidee erfahren.\n\n\nSCHAUNOTIZEN\n\n[00:01:36] WEB COMPONENTS UND WEB COMPONENT DESIGN\n\nWir beginnen damit, die Unterschiede zwischen Web Components und\nFramework-Komponenten herauszuarbeiten und bequatschen dabei mit Custom\nElements, Shadow DOM und dem template-Element die wesentlichen Bestandteile von\nWeb Components. Wir besprechen Accessibility-Fragen, w\xe4gen HTML-Seiten gegen\nSPAs ab (relevant: Removing client-side React.js (but keeping it on the server)\nresulted in a 50% performance improvement on our landing page) und besprechen\ndas F\xfcr und Wider von Polyfills f\xfcr Web Components. Ergebnis: gutes\nWeb-Component-Design braucht keine Polyfills (aber wenn, dann sollte es ein\nleichtgewichtiger Polyfill sein). Au\xdferdem kommen zuk\xfcnftige (Deklaratives\nShadow DOM) und verflossene (HTML Imports) APIs rund um Web Components zu\nSprache. \xdcber die Frage des Einsatzspektrums und denkbarer Alternativen zu\nsowohl Web Components als auch fetten Frameworks (hyperHTML, \xb5land) kommen wir\nzu der Frage, welche Wert das Wissen um Webstandards-Basics (mit\nEvent.preventDefault() als Beispiel) heutzutage \xfcberhaupt hat. Gegen Ende\nverweisen wir noch auf die MDN-Doku zu Web Components, Joy\u2019s Talk Web\nComponents: Maintaining and Reusing your Frontend, Brad Frost\u2019s Artikel zu\nfront-of-the-front-end and back-of-the-front-end web development und Joy\u2019s\nKompendium Responsible Web Applications. Zudem stellt Peter f\xfcr fr\xfchstens 2027\neinen Blogpost \xfcber OOP-DOM mit Elementen in Aussicht.