Nettkomponenter med Stencil.js - er det den beste måten å lage gjenbrukbare UI-elementer i 2018?

Evnen til å utvikle universelle, rammeverk og biblioteksagnostiske UI-elementer som kan deles mellom forskjellige prosjekter og team ser ut til å være den perfekte medisinen for minst en del av det vi kaller en rammevern i moderne frontend-verden. Helt siden jeg begynte å jobbe som webutvikler var jeg vitne til en rekke elementer og interaksjoner som kan abstraheres bort til en gjenbrukbar kode, men forskjeller mellom rammer og implementeringsdetaljene deres gjorde det tungvint ... Webkomponenter ser ut til å være et svar.

Men vent, hva er nettkomponentene?

Web Components er en pakke med forskjellige teknologier som lar deg lage gjenbrukbare tilpassede brukergrensesnittkomponenter - med funksjonaliteten deres innkapslet fra resten av koden din - og bruke dem i webappene dine.
https://developer.mozilla.org/en-US/docs/Web/Web_Components

Millioner av mennesker rundt om i verden bruker allerede denne teknologien hver dag. Fjorårets nest mest populære nettsted, youtube.com, er basert på Web Components. Til og med Historik-fanen i Chrome er skrevet med Polymer, et Web Components-bibliotek! I henhold til Wikipedia ble nettkomponenter introdusert for første gang av Alex Russell på Fronteers Conference 2011 for første gang.

Noen få ord om teknologier som er involvert

Shadow DOM

Innkapsling er sannsynligvis nøkkelen til suksess når man tenker på å lage gjenbrukbare elementer - å kunne skille merker, styling og implementeringsdetaljer fra resten av dokumentet er det som gjør ideen til Web Components så attraktiv. The Shadow DOM API gjør susen. Det er nettleserens API, som gjør at du kan lage scoped-undertrinnet i DOM-elementet.

Du kan påvirke nodene i skyggen DOM på nøyaktig samme måte som ikke-skygge noder - for eksempel ved å legge til barn eller angi attributter, style individuelle noder ved å bruke element.style.foo, eller legge til stil til hele skyggen DOM-treet inne i et < style> element. Forskjellen er at ingen av koden i en skyggedom vil påvirke noe utenfor den, noe som gir mulighet for praktisk innkapsling.
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

Shadow DOM har to moduser: åpen og lukket. Den lukkede modusen til Shadow DOM gir komponentforfattere kontroll over hvordan Shadow Root av komponenten deres blir eksponert via js. Du kan lese mer om skygge DOM her.

styling

Stiler i Shadow DOM er scoped og lekker ikke ut. Global CSS vil påvirke Shadow DOM-elementer akkurat som ethvert annet html-element - etter arv av egenskaper, så innstilling av font-family på body blir arvet av den tilpassede scoped-komponenten. Innstilling av stiler til * vil også påvirke Shadow DOM-forankrede element, ettersom det påvirker alle elementer. Hvis du vil tillate at komponentbrukere kan style komponenten, bør du bruke tilpassede CSS-egenskaper.

Tilpassede elementer

Med tilpassede elementer kan vi lage egendefinerte HTML-koder, eller forbedre eksisterende koder og komponenter. Takket være denne teknologien vil nettkomponenter se ut som vanlige HTML-koder, for eksempel .

Biblioteker for å jobbe med webkomponenter

Å lage webkomponenter med vanilje js er selvfølgelig mulig (vi må huske på polyfylling for nettlesere uten støtte for nødvendige teknologier), men det å skrive komponenter med vanlig js kan være vanskelig og krever mye kjeleplate-kode. Det er her bibliotekene for nettkomponenter er nyttige. Du trenger ikke dem, men å prøve å lage produksjonsklare Webkomponenter vil være mindre smertefullt å bruke en av dem.

polymer

Dette er det mest populære webkomponentbiblioteket, opprettet og sterkt brukt av Google. Det gir enkel API for å lage komponenter. Versjon 3.0, som sendes i år, vil bruke lit-html, det virker som en fin måte å lage html på js på.

Skate.js

Skate.js hevder å være en funksjonell abstraksjon over Web Components standarder. Den interessante delen er at den lar deg bruke flere visningsbiblioteker, inkludert lit-html, preaktere og til og med reagere.

Stencil.js

Stencil.js er relativt ny Web Components-kompilator laget av Ionic team. Den tar populære moderne webutviklingskonsepter (for eksempel Virtual DOM, async rendering, reaktiv hendelsesflyt og TSX) og lager ren, standardbasert webkomponentkode.

Opprette webkomponenter med Stencil.js

Jeg vil gjerne fortelle deg litt mer om hvordan du lager webkomponenter med Stencil.js. Hvorfor valgte jeg dette biblioteket? Hovedsakelig på grunn av innebygd Typescript-støtte og bruk av reaktive mønstre som jeg er kjent med fra min Angular and React-erfaring, og selvfølgelig stencil-is-not-a-framework tilnærming. Stencil.js hevder å være bare en Web Components-kompilator, og skapte komponenter er vanilje js - bittesmå og raske, i tillegg kan de importeres ved å bruke