Tulevaisuudenkestävät design-järjestelmät progressiivisilla web-komponenteilla

Olen rakentanut isoja komponenttikirjastoja enterprise-projekteissa. Web-komponentit lupaavat paljon: ne toimivat missä tahansa frameworkissa ilman lukitusta. Silti niihin liittyy ikäviä ongelmia. Sivut pomppivat ennen kuin JavaScript latautuu. Shadow DOM sotkee saavutettavuuden. Server-side rendering vaatii kikkailua.

Ongelma ei ole itse web-komponenteissa. Olemme vain monimutkaistaneet niitä liikaa.

Web-komponenttien ansa

Tyypillinen tarina menee näin: tiimi päättää rakentaa design-järjestelmän web-komponenteilla. Tehdään Custom Elements, vedetään mukaan raskas framework ja yhtäkkiä nappiin tarvitaan kymmeniä kilotavuja koodia. HTML saapuu ensin, sitten JavaScript piirtää kaiken uudelleen. Käyttäjä näkee räpäytyksen. Näkövammaiset screen readerit hämmentyvät. SSR:stä tulee painajainen.

Tämä johtuu siitä, miten komponentteja rakennetaan.

Mitä jos lähdettäisiin perusasioista?

Parhaat ratkaisut tuntuvat jälkikäteen itsestään selkeiltä. Entä jos komponentit renderöityisivät ensin pelkällä HTML:llä ja CSS:llä? JavaScript lisäilisi vain tehosteita?

Tämä on progressiivisten web-komponenttien ydin. Se on filosofia, ei framework. Komponentit jakautuvat kahteen kerrokseen:

Peruskerros on puhdasta HTML:ää ja CSS:ää. Se näkyy heti selaimessa ilman JavaScriptiä. Sisältö on paikallaan, tyyli ok.

Tehostekerros tuo JavaScriptillä interaktiivisuutta, tapahtumia ja tilanhallintaa – vain jos tarvitaan.

Kolme tyyppiä

Kaikki komponentit eivät ole samanlaisia. Progressiiviset web-komponentit tarjoavat kolme vaihtoehtoa:

Komposiitti-komponentit käärehtivät valmiita HTML-elementtejä. Esimerkiksi pudotusvalikko käyttää <select>-tagia tai välilehdet listoja. Light DOM hoitaa rakenteen, joten saavutettavuus on kunnossa ja ne sopivat mihin tahansa frameworkiin.

Primitivikomponentit ovat itsenäisempiä. Päivämäärävalitsin, liukusäädin tai kalenteri piirtää oman HTML-rakenteensa ensin. JavaScript tuo myöhemmin toimivuuden.

Deklaratiiviset Shadow DOM -komponentit hyödyntävät natiivia Shadow DOMia ja tukevat SSR:ää. Ihanteellisia, kun tarvitaan tiukkaa tyylisuojausta ilman palvelinongelmia.

Valitse se, mikä sopii tilanteeseen. Ei jäykkää oppia, vain kerroksellinen ajattelu.

Käytännön haasteet

Filosofia on helppo ymmärtää. Sen toteuttaminen kymmenissä komponenteissa on haastavampaa. Hyvä kirjasto hoitaa nämä:

• Prop- ja attribuuttisynkronointi frameworkien välillä
• Tapahtumien delegointi ilman Shadow DOMia
• Hydration ilman turhia uudelleenpiirtoja
• CSS-rajaus kevyesti
• Saavutettavuus valmiina
• Server-side rendering ilman erikoislogiikkaa

Useimmat kirjastot jättävät nämä sinun vastuullesi. Boilerplate kasvaa, ja progressiivisuus katoaa kun JavaScriptistä tulee pakollinen.

Uusi arkkitehtuuri

Progressiivinen tapa muuttaa prioriteetteja:

Lähetä HTML ensin. Komponentin perusmuoto on semanttista HTML:ää, joka toimii heti. Tyyli CSS:llä, saavutettavuus sisäänrakennettuna. JavaScript vasta lopuksi.

JavaScript valinnainen. Lomake validoidaan ilman sitä. Valikko on käytettävissä pelkkänä HTML:nä. Tehosteet tuntuvat lisäyksiltä.

Hyödynnä selaimen ominaisuuksia. Custom Elements, Shadow DOM (tarvittaessa), Slots ja Declarative Shadow DOM ovat natiiveja. Rakenna niiden päälle.

Toimi kaikkien kanssa. HTML-pohjaiset komponentit pyörivät Reactissa, Vuessa, Angularissa, Sveltessä tai vanilja-JS:ssä ilman sovittimia.

Renderöi palvelimella. Peruskerros on HTML:ää, joten SSR onnistuu suoraan. Monimutkaisempi tila hydrateaa clientillä.

Kuinka pieniä komponentit saavat olla?

Mieti tätä: paljonko JavaScriptiä design-järjestelmä oikeasti tarvitsee?

Perinteiset kirjastot painavat 50 kB+. Progressiiviset versiot kevenevät reippaasti. HTML- ja CSS-ensimmäisyys + JS-tehosteet voi tiputtaa koko framework-ylikulun 2,6 kB:hen.

Tämä vaikuttaa suorituskykyyn. Pienempi paketti latautuu nopeammin, parsitaan nopeammin, suoritetaan ripeämmin. Mobiiliverkoissa ero on 3 sekuntia vs. 8 sekuntia interaktiivisuuteen.

SSR ilman säätöä

Normaalisti SSR vaatii erillistä logiikkaa. Progressiiviset komponentit kääntävät tämän: HTML- ja CSS-perusteet renderöityvät palvelimella heti.

Yksinkertaiset komposiitti- ja deklaratiivikomponentit hoituvat nollasäilytyksellä. Reaktiiviset piirtävät alkuHTML:n ja hydrateavat clientillä.

Tämä poistaa web-komponenteista suurimman kipupisteen SSR-sovelluksissa.

Design-järjestelmiä, jotka kestävät

Jos rakennat design-järjestelmää, progressiiviset web-komponentit antavat framework-vapauden ilman kompromisseja.

Et sido itseäsi Reactin pakettiin tai Vuen maailmaan. Komponenttisi toimivat nyt ja kolmen vuoden päästä. Se vaatii kurinalaisuutta.

Pidät JavaScriptin kurissa. Panostat semanttiseen HTML:ään. Huolehdit CSS:stä tarkasti. Vastineeksi saat uudelleenkäytettäviä, nopeita ja saavutettavia osia.

Yhteenveto

Web-komponentit eivät ole epäonnistuneet. Olemme vain kohdelleet niitä JavaScript-frameworkeina sen sijaan että ne ovat HTML-elementtejä. Progressiiviset web-komponentit palauttavat ne juurille: aloita web-alustasta, lisää kerroksia harkiten, saat jotain pientä, kannettavaa ja tehokasta.

Design-järjestelmiä rakentaville tiimeille tämä on vahva valinta.