Webcomponenten met Stencil.js - is het de beste manier om in 2018 herbruikbare UI-elementen te maken?

Het vermogen om universele, raamwerk- en bibliotheek-agnostische UI-elementen te ontwikkelen die kunnen worden gedeeld tussen verschillende projecten en teams, lijkt het perfecte medicijn te zijn voor ten minste een deel van wat we een framework churn noemen in de moderne front-end wereld. Sinds ik begon te werken als webontwikkelaar, was ik getuige van een aantal elementen en interacties die kunnen worden geabstraheerd tot een herbruikbare code, maar verschillen tussen frameworks en hun implementatiedetails maakten het omslachtig ... Webcomponenten lijken een antwoord te zijn.

Maar wacht, wat zijn de webcomponenten?

Web Components is een pakket met verschillende technologieën waarmee u herbruikbare, aangepaste gebruikersinterfacecomponenten kunt maken - met hun functionaliteit ingekapseld weg van de rest van uw code - en deze kunt gebruiken in uw web-apps.
https://developer.mozilla.org/en-US/docs/Web/Web_Components

Miljoenen mensen over de hele wereld gebruiken deze technologie al elke dag. De op één na populairste website van vorig jaar, youtube.com, is gebaseerd op webcomponenten. Zelfs het tabblad Geschiedenis in Chrome is geschreven met behulp van Polymer, een bibliotheek met webcomponenten! Volgens Wikipedia werden Web Components voor het eerst geïntroduceerd door Alex Russell op Fronteers Conference 2011 voor het eerst.

Een paar woorden over de betrokken technologieën

Schaduw DOM

Inkapseling is waarschijnlijk de sleutel tot succes bij het overwegen van het maken van herbruikbare elementen - het is aantrekkelijk om webcomponenten te kunnen scheiden van details over opmaak, stijl en implementatie van de rest van het document. De Shadow DOM API doet het. Het is de API van de browser, waarmee u de scoped-substructuur in het DOM-element kunt maken.

U kunt de knooppunten in de schaduw-DOM op precies dezelfde manier beïnvloeden als niet-schaduwknooppunten - bijvoorbeeld het toevoegen van kinderen of het instellen van attributen, het vormgeven van afzonderlijke knooppunten met element.style.foo of het toevoegen van stijl aan de volledige schaduw-DOM-structuur in een < style> element. Het verschil is dat geen van de code in een schaduw-DOM iets daarbuiten beïnvloedt, waardoor handige inkapseling mogelijk is.
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

Shadow DOM heeft twee modi: open en gesloten. De gesloten modus van Shadow DOM biedt componentauteurs controle over hoe de Shadow Root van hun component wordt belicht via js. Je kunt hier meer lezen over schaduw-DOM.

styling

Stijlen in Shadow DOM zijn scoped en lekken niet uit. Globale CSS heeft invloed op Shadow DOM-elementen net als elk ander html-element - door overerving van eigenschappen, dus het instellen van de lettertypefamilie op de body wordt overgenomen door de aangepaste scoped-component. Stijlen instellen op * heeft ook invloed op het geroote Shadow DOM-element, omdat het alle elementen beïnvloedt. Als u uw componentgebruikers de stijl wilt laten stijlen, moet u aangepaste CSS-eigenschappen gebruiken.

Aangepaste elementen

Met aangepaste elementen kunnen we aangepaste HTML-tags maken of bestaande tags en componenten verbeteren. Dankzij deze technologie zien webcomponenten eruit als gewone html-tags, bijvoorbeeld .

Bibliotheken om met webcomponenten te werken

Webcomponenten maken met vanilla js is natuurlijk mogelijk (we moeten onthouden dat polyfilling voor browsers geen ondersteuning biedt voor vereiste technologieën), maar het schrijven van componenten met gewone js kan moeilijk zijn en vereist veel boilerplate-code. Dit is waar webcomponentenbibliotheken van pas komen. U hebt ze niet nodig, maar proberen om productieklaar te maken Web Components zal minder pijnlijk zijn met behulp van een van hen.

Polymeer

Dit is de meest populaire webcomponentenbibliotheek, gemaakt en intensief gebruikt door Google. Het biedt een eenvoudige API voor het maken van componenten. Versie 3.0, die dit jaar wordt verzonden, gebruikt lit-html, dat lijkt een leuke manier om html in js te maken.

Skate.js

Skate.js claimt een functionele abstractie te zijn van de Web Components-normen. Het interessante deel is dat het je toestaat om meerdere viewbibliotheken te gebruiken, inclusief lit-html, vooraf reageren en zelfs reageren.

Stencil.js

Stencil.js is een relatief nieuwe Web Components-compiler gemaakt door het Ionic team. Het vereist populaire moderne webontwikkelingsconcepten (zoals Virtual DOM, async rendering, reactive event flow en TSX) en maakt schone, op standaarden gebaseerde webcomponentcode.

Webcomponenten maken met Stencil.js

Ik wil je graag wat meer vertellen over het maken van webcomponenten met Stencil.js. Waarom heb ik voor deze bibliotheek gekozen? Vooral vanwege de ingebouwde typescript-ondersteuning en het gebruik van reactieve patronen die ik ken uit mijn Angular and React-ervaring, en natuurlijk stencil-is-geen-raamwerkbenadering. Stencil.js beweert alleen een Web Components-compiler te zijn, en gemaakte componenten zijn vanille js - klein en snel, bovendien kunnen ze worden geïmporteerd met de