Intro til web komponenter i React komponenter: Korleis og kvifor?

Web komponenter er ein løynd diamant som er innebygd i alle moderne nettleserar.

I min jobb som utvikler bruker eg mykje React for å lage gjenbrukbare, interaktive komponenter for web. Med og utan Typescript. Det funker bra. Men eg er likevel nyssgjerrig på det som røyrer seg av nye teknologier eller nye måter å bruke eksisterande teknologi.

Når ReactJS Bergen spurde meg om eg kunne tenkje meg å halde eit innlegg, så foreslo eg at me kunne ta ein kikk på web komponenter i relasjon til React komponenter.

I skrivande stund er det ei lita side i React dokumentasjonen som beskriv korleis desse teknologiene kan brukast saman. Så, difor var det ekstra interessant å forske på mogelegheitene i å kombinere desse teknologiane.

Her fyljer eit opptak i frå presentasjonen min. Mange takk til alle som fann tid til å tune inn til videomøtet ein mørk tirsdagskveld i november!

Refleksjoner #

Eg skal vere den fyrste til å innrømme at det ikkje er like lett å skrive web komponenter som det å skrive gjenbrukbare komponenter i rammeverk som React, Vue og Angular. Likevel, så har web komponenter fordelen at dei ikkje treng noko rammeverk-kode for å køyre i nettlesaren.

Rammeverk som React, Vue, Angular krev at du inkluderar ein mengde javascript for at komponentene deiras skal fungere. Og denne kostnaden kjem enda meir fram om du finn ut at du må inkludere komponenter frå forskjellige rammeverk i samme web-løysing. Ikkje berre må du vente på at all koden skal lastast inn i nettlesaren din, men du må også vente på at nettlesaren skal køyre all rammeverk koden før komponentene blir aktive.

Så, viss eg skulle støte på eit web-problem som eg trur eg kan løyse på ein måte som kan vere nyttig for andre så vil eg vurdere å byggje det med web komponenter slik at den løsningen ikkje vil vere låst til kun eit rammeverk.

Det vil ikkje gå like raskt å byggje web komponenter utan eit rammeverk i botn, men desto større sjanse vil det vere for at denne gjenbrukbare koden vil vere nyttig også etter at dei gjeldande rammeverka er erstatta av nye rammeverk. Og viss me som industri skulle finne ut at me ikkje treng rammeverk lengjer så vil slike web komponenter framleis vere nyttige.

Vidare lesnad #

• Her finn du kodebasen som presentasjonen er basert på..
• Og her finn du presentasjonen køyrande “live”.
• The failed promise of Web Components - Lea Verou. Kritiske refleksjoner på web komponent teknologien, kor spora den av og kva kan me gjere for å få den tilbake på skinner?
• Web Components: It’s about Time | Erin Zimmer . Ein presentasjon med livecoding av web komponenter. Denne var med på å motivere meg til å sjå nærare på denne teknologien.
• webcomponents.org. Eit (digert) bibliotek over gjenbrukbare web komponenter.
• open-ui.org. Forsøk på å standardisere navngivning på tvers av rammeverk.
• Deklarativ skygge-dom. Som nevnt i presentasjonen så mangler me framleis ein måte å server-side-rendre web komponenter effektivt. I fylje artikkelen så er det ikkje lengje til dette vil vere mogeleg i Chrome, og då kan det fort hende at dei andre nettlesarane fyljer etter.