Ark 3.0.0 ute: «Enklere enn noen gang å lage kule bruker­grensesnitt»

Komponenter med typesikre as-props, Ark 3.0.0 og React 19 ute i RC i ukas ForrigeUke.

Ark er en verdig arvtaker etter Chakra, mener Kristofer Giltvedt Selbekk. 📸: kode24 / Privat
Ark er en verdig arvtaker etter Chakra, mener Kristofer Giltvedt Selbekk. 📸: kode24 / Privat Vis mer

Dette var uken for Betty White-vitser 👵 , Trump-tilfeldigheter 🤡 og en minneverdig forestilling 🎙.

Og 1 804 ting skjedde i frontend-verdenen!

Lag tilpasningsdyktige komponenter med typesikre as-props

Jeg har lenge vært i heiagjengen for å la de som skal bruke komponentene vi lager, bestemme hva slags HTML-element de skal rendre. Det gjør det enklere å lage universelt utformede løsninger, også lar det deg lage færre spesialtilpassede komponenter. Win win!

Men selv om det kan være relativt rett frem å få til med en prop (ofte kalt as), kan det være skikkelig vanskelig å få til på en typesikker måte.

For en <button />-tag har andre props enn en <a />-tag, og om du sender inn en custom komponent, vil du gjerne ha typesikkerhet der også.

Heldigvis har pseudo-navnebror Kristóf P skrevet en veldig fin artikkel som forklarer deg hvordan man gjør det, og hvilke tradeoffs man bør gjøre. Den har en litt “Draw the rest of the owl” følelse når det kommer til TypeScripten, men det får man heller bare tåle. Jeg synes den forklarte det godt i alle fall!

Ark 3.0.0 er ute!

Jeg har lenge vært godt investert i Chakra UI. Det er rett og slett et bra bibliotek for å lage gode brukergrensesnitt raskt.

Men Chakra er bygget på CSS-in-JS rammeverket Emotion, og Emotion sliter litt med å støtte effektiv serverside-rendering. Så da må man tenke litt nytt.

Ark er et “headless” UI-bibliotek, laget av de samme folka som står bak Chakra. Og på mange måter er det en verdig avtager også.

De har nå sluppet en versjon 3.0.0 av biblioteket sitt, som gjør det enklere enn noen gang å lage kule brukergrensesnitt. Kanskje det er på tide å bevege seg over fra Chakra til Ark?

Les changeloggen her.

Litt diverse React-nytt

Det var et par mindre React-nyheter som kan være nyttige å få med seg denne uken — enten for å være ekstra interessant i lunsjen, eller bare for å føle deg bedre enn andre når du overrasker dem med intrikat kunnskap det ikke er nødvendig å vite.

#1: 🎉 React

React ble open sourcet for 11 år siden forrige uke! Det er veldig, veldig lenge siden for noen, men starten av min karriere i Bekk. Jeg vil argumentere det har gjort underverker for stabiliteten til frontend-utviklingssfæren, selv om vi ikke på noe vis er i mål enda. Hurra for 11-åringen!

#2: React 19 ute i RC

Det som er fint med React, er at det tar ganske lang tid mellom hver breaking change de kommer med. Og når det kommer en breaking change, så får man som regel god tid på å forberede seg. Ulempen er jo at man blir så godt vant at man skvetter litt til hver gang det kommer en faktisk major-versjon.

Så ta dette som siste advarsel — det ser ut til at en faktisk 19.0.0 versjon er rett rundt hjørnet — for nå har React-teamet sluppet hva de selv sier er en release candidate som kommer til å være kliss lik det som slippes i den offisielle releasen.

Om du har lyst til å tyvstarte på oppgraderingsjobben (som visstnok ikke skal være altfor stor), kan du jo egentlig… oppgradere i dag, og se hvordan det går. Lykke til!

#3: Husk å holde react og react-dom i sync

På weben består React av to npm-pakker — react og react-dom . De følger samme versjoneringstall, og lanseres alltid i tospann. Men før var det liksom ikke så farlig om de var helt i sync! Så lenge man var på samme major-versjon, var React helt okei med en liten diff mellom versjonene.

Men nå blir det hardare kår for sloppy avhengigheter. Fra og med v19 vil React kaste en feilmelding om de to versjonene ikke er helt i sync. Det vil si, er man på 19.0.1 på react , må man være på nøyaktig 19.0.1 på react-dom også. Or suffer the consequences 😱

Les mer i pull requestet her: https://github.com/facebook/react/pull/29236

Det… var faktisk det jeg hadde for dere denne uken. Takk for at dere leste, og velkommen tilbake til neste ukes ForrigeUke (denne uken?). Tjohei!