Neretko na javascript konferencijama, barem jedan termin dnevno zauzimaju teme kao što su PWA, web3 i, tema ovog teksta Web Components. Iako, po nekom mom subjektivnom osećaju, interesovanje prema njima nije još dovoljno konstantno, neki eksperti u polju su optimistični, a caniuse.com odiše prijatnim zelenilom. 
Ohrabren sa nekilko zanimljivih youtube videa odlučio sam da napravim svoj Web Component i proverim kakav je osećaj pod prstima.
Prvo i prvo - šta su tačno Web Components
Web Components su zapravo jedan “apstraktni” okvir koji je nastao pod okriljem 3 tehnologije koje su “nativno” dostupne APIjima svih modernih internet pretraživača. Te 3 tehnologije su poimence Custom Elements, Shadow DOM i HTML templates.
Custom Elements je javascript API interfejs koji nam dozvoljava da “registrujemo”, odnosno definišemo nove HTML elemente i njihovo ponašanje i koristimo ih u našem interfejsu kao što trenutno koristimo (div, article, section ili span, ili samo div i span jer zašto bismo imali semantički layout).
Shadow DOM nam dozvoljava da imamo potpuno enkapsuliran DOM tree unutar našeg elementa, bez da njegovi stilovi i elementi dotiču naš glavni DOM stranice. Možemo gledati ovo kao na komponente, ali sa većim stepenom izolacije od kontejnerskih elemenata.
HTML templates nam dozvoljavaju da, koristeći <template> i <slot> pišemo markup koji će biti integrisan u Shadow DOM i samim tim, neće biti prikazan u DOM-u stranice.
Kombinacijom ova 3 koncepta (u pomalo nezgrapan boilerplate javascript es6 klasa) dobijamo potpuno izolovane komponente koje nisu vezane ni za jedan konkretan framework, ne utiču na ostatak stranice, i manje više se ponašaju, kao proširenje HTML5 standardnih elemenata sa tačno onim komponentama koje nama trebaju.
Zašto bi se zdravorazuman programer, godine 2022.-e, upuštao u Web Components?
Ono što dobijamo sa implementacijom Web Components-a je zapravo mogućnost da imamo potpuno zasebnu UI biblioteku elemenata koje možemo baš takve kakvi su, identičnog izgleda i ponašanja, da koristimo u našem React frontendu, u našem PHP blade template-u, u novom delu sajta gde isprobavamo Vue.js ili da ih stavimo u HTML “landing page”-a koji radi pripravnik (ovo garantuje samo da će komponenti vizuelno ostati verni brendu, ne da on neće loše odraditi posao).
Pa, da počnemo
Kao primer sam pokušao da napravim jedan accordion element koji bi primao “title” atribut za naslov, i koji bi mogao poput običnog kontejnerskog HTML elements da se puni sadržajem. Rezultat možete videti na https://snsa-web-components.neocities.org/
Web komponenta se piše kao ES6 klasa koja proširuje standardan HTMLElement. Uz malo boilerplate koda dobijamo nešto ovako:
Koristimo template elemenat da definišemo HTML i specifične stilove za našu komponentu. Ovi stilovi imenima klasa ne moraju da prate BEM ili neku drugu konvenciju jer, kao deo Shadow DOM-a ne figuriraju u “široj slici”. Stilove možemo kačiti čak i direktno na HTML elemente koji uzimaju samo default stilove od pretraživača, a opet, nema opasnosti da naša h4 pravila izmene svaki h4 u dokumentu.
Naša klasa mora da ima constructor i super poziv, zatim se Shadow DOM-u našeg Web Component-a dodaje kloniran HTML iz template-a. Zahvaljujući “mode”, “open” mi ipak možemo da inspekcijom u čitaču vidimo ovaj HTML uz nekoliko dodatnih klikova, ali - shodno definiciji pri kraju komponente, dovoljno će biti da u “pravi” HTML naše stranice napišemo samo <custom-accordion></custom-accordion>. Za sada dobijamo “hello world” u div-u, pa ušteda nije impresivna, ali u suštini, u Shadow DOM možemo da spakujemo (skoro) beskrajno kompleksan markup.
Problemi koji su mi odmah pali na pamet su bili, na primer - kako da ipak povučemo neke globalne stilove, vezane za temu naše stranice. Pa, za početak CSS varijable mogu biti dobar način da probijemo veo tajnovitosti Web Componente. Dodavanjem nečeg poput:
Možemo da dosegnemo stil spolja, primenimo ga na svaki h4 unutar naše komponente, a ostavimo spoljašnje h4 u ostatku dokumenta netaknute.
Dodavanje atributa je prilično jednostavno, i izgleda manje više ovako:
Funkcija connectedCallback je funkcija koja se poziva kada je Web Component “učitan” tako da tamo smeštamo kod koji je potreban za inicijalizaciju.
Još jedan čest problem bi bio kako Web Component može da komunicira sa ostatkom stranice. U slučaju mog accordion elementa, ja sam hteo mogućnost da otvaranjem jednog određenog elementa, zatvorim ostale na stranici ukoliko su otvoreni. Za to sam morao da koristim CustomEvent.
Da bi sve funkcionisalo kako treba kako treba, i da bi event zapravo prešao granicu tog mog elementa obavezno je napraviti CustomEvent koji ima bubbles i composed osobine podešene na vrednost “true”. Takođe, bilo šta što stavimo u detail property customEvent objekta, biće prosleđeno uz event. To može biti identifikacija odašiljača ili baš bilo koja (nama) korisna informacija.
Čitav fajl možete pogledati na https://snsa-web-components.neocities.org/web-components/custom-accordion.js
Zaključak
Web Componente ne pretenduju da zamene popularna rešenja poput React-a ili Angular-a, već da postanu ustaljen “framework agnostic” način pisanja UI biblioteka. Iako možemo koristiti pomoć poput Stencil i Lit okvira specifičnih za njih, prednost Web Component-i je što se oslanjaju na nativne API-je dostupne u samim internet pretraživačima.
Dobijamo izuzetno dobro enkapsulirane elemente koje možemo primenjivati u nizu rešenja - što je vrlo korisno kada govorimo o velikim, dugoročnim projektima koji imaju mnoštvo “pod-projekata” unutar istog brenda. Ovo nam dozvoljava da imamo uniformisan izgled i ponašanje korisničkog interfejsa, a da svaSinii zadatak rešavamo najboljim alatom za baš taj zadatak.
Takođe, oslobađamo se svojevrsnog “vendor lock-in”-a gde, kada za određen broj godina, tehnologije zastare, moramo da počnemo od nule ako želimo da prepišemo zamršeni kod “legacy” projekta.
Vredno pomena je i da Vue.js i Svelte već nude opcije da se njihovi komponenti exportuju kao Web Components što bi učinilo potencijalnu selidbu na drugi .js okvir potencijalno bezbolnijom. Ako želite da se upustite razdvajanje komponenata od generalnog koda svoje postojeće aplikacije, na https://custom-elements-everywhere.com/ možete da viditi koliko su zapravo ustaljeni .js okviri kompatibilni sa onime što Web Components nude i izdvajanje interfejsa u svoj “layer” može da počne.
Sve u svemu, uz određen boilerplate kod i žongliranje referencom na “this” imamo vrlo zanimljiv alat koji se oslanja na “čvrsto tlo” stabilnih, i dobro standardizovanih tehnologija. Web Components bi u budućnosti pomogli da pišemo aplikacije koje nisu “ružan legacy kod” čim neke “prolazne” tehnologije zastare već imaju poseban sloj korisničkog interfejsa koji bi potencijalno preživeo čak i tektonske promene u implementaciji.
0 komentara