React 19.3 er ute: – Gleder meg mest til View­Transitions

Dette var uken for hodepine 🤕 og kommentarer 📨 - og 418 ting som skjedde i frontendverdenen.

React 19.3 er ute 🎉

Denne uka kom React 19.3!

Versjonen inneholder en hel drøss med ny funksjonalitet som endelig er stabilt, hvor mye allerede har blitt nevnt i tidligere utgaver av ForrigeUke. En av de nye funksjonalitetene jeg gleder meg til mest er nok ViewTransitions 🪩

Årsaken er at ViewTransitions, som har vært tilgjengelig i Next.js, nå gjør det mye lettere å animere nettsiden når det skjer endringer i DOMen. Ved å wrappe komponenten som endrer seg med ViewTransition får du en cross-fade-animasjon ut av boksen. Uten animasjoner hadde komponenten under bare dukket opp, og dette gjør det lettere å få til applikasjoner som føles mer sammenhengende:

import { ViewTransitions } from 'react';

export default function App() {
	const [open, setOpen] = useState(false)
	
	return (
		<>
            <button onClick={() => {
              startTransition(() => {
                setOpen((value) => !value)
              })
            }}>
                Min komponent
            </button>
            
            {open && (
                <ViewTransition>
                    <MyComponent />
                </ViewTransition>
            )}
		</>
	)
}

Og om du skulle trenge å spesifisere hvilken type transition som ønskes kan du det med addTransitionType. Det kan være nyttig om brukeren skal kunne se hvor endringen kommer fra. Et eksempel på dette er om de kan bla frem og tilbake mellom komponenter på nettsiden, enten høyre-venstre eller opp-ned. Da kan du sette retning på entry og exit-animasjonene i ViewTransition.

Enda en ting som nå er stabilt er React Fragment Refs. React Fragments lar deg gruppere elementer uten at du trenger å få med en unødvendig div i markupen, slik at det ikke endrer på stylingen til elementene eller layouten.

Skal du kontrollere nodene på noen måte, eksempelvis for å flytte fokus eller legge til en event listener, så kunne du ikke bruke Fragments. I 19.3 derimot, kan Fragments ta inn referanser som tillater dette. Da blir det lettere å gjenbruke komponenter og opprette grupperinger av elementer!

Derfor snakker alle om Metas StyleX

Et nytt KI-vennlig alternativ til CSS, et nytt browser-API i React og TanStack + Vercel = sant, i ukas ForrigeUke.

Hvor mye koster et rammeverk? 🧮

670$, skal vi tro Max Leiter.

Han har testet å bytte ut rammeverket til nettsiden sin fra Next til et skreddersydd rammeverk lagd av AI. Han har gitt Fable 5 en instruks om å lage et rammeverk som er raskere enn Next, spesifikt for hans nettside, som fremdeles kan deployes til Vercel. Tre timer og 670$ senere hadde agenten lagd noe han kunne teste.

Noen tekniske ytelsesendringer han opplevde inkluderte at tiden det tok å bygge hele prosjektet ble redusert med 79%, og Lighthouse rapporterte en halvering i tiden det tok å hente largest contentful paint på tvers av nettsiden.

Ved å lage sitt eget rammeverk kan vi redusere antall avhengigheter, og med de mange supply chain angrepene som sirkulerer kan det være nyttig for mange. Fordi man skreddersyr rammeverket til akkurat hva man trenger slipper man overflødig linjer med kode, og Max Leiter fikk redusert sitt rammeverk fra hundretusenvis av linjer til bare 5000. Da får man et rammeverk man faktisk har mulighet til å lese gjennom.

Så, er rammeverk som Next.js døde? Snarere tvert imot, skal du tro arbeidet teamet bak Next.js har utført med AI. De har lukket 1500 GitHub issues på en måned ved å lage en agent som bruker sandboxmiljøer for å teste hvorvidt et issue kan lukkes eller om mer må gjøres.

Advarer utviklere av hybrid-apper mot iPhone Duo

– Om man har Flutter-, React Native- eller "pixel perfect"-apper, tror jeg det blir vanskelig å lage noe som fungerer skikkelig godt på iPhone Duo, sier Petter Klingen Wright.

30 ganger raskere sammenslåing av Tailwindklasser 🏇💨

Med Tailwind får vi ofte lange klassenavn for å definere stilen på en enkel knapp. Disse kan by på overhead for oss utviklere, men også applikasjonen.

Man lagrer gjerne stiler for å slippe å skrive disse lange klassenavnene mange ganger, men skal man kombinere disse senere har man tidligere brukt tailwind-merge for å unngå konflikter og passe på at rekkefølgen blir riktig.

I tillegg har man måttet brukt clsx for å håndtere conditional styling, se eksempel under:

<Button className={twMerge(clsx("px-4 py-2 text-blue", isDisabled && "opacity-50", className))} />

cn håndterer både sammenslåing av klassenavn og conditional styling, og kan erstatte både tailwind-merge og clsx. Har du brukt det før har du kanskje tenkt at det bare gjør syntaksen enklere og reduserer antall pakker du trenger. Men, om du bytter ut tailwind-merge og clsx med cn så skriver de at det skal gjøre den samme jobben 30 ganger raskere! I tillegg til å være mye raskere bruker de de samme APIene, så om du har de i prosjektet ditt kan du bytte dem ut allerede i dag.

Ved å bytte til cn kan du håndtere konflikter, rekkefølge og conditional styling slik som dette:

<Button className={cn("px-4 py-2 text-blue", isDisabled && "opacity-50", className)} />

Hvor mye du har å tjene på det vil nok variere med prosjektet ditt, men når det bruker de samme APIene du allerede har i prosjektet er det begrenset hvor mye du har å tape. Ettersom det er raskere å kjøre og lettere å lese er jeg i alle fall interessert.

Det var alt for denne gang, ha en fin uke 👋

Shopify kjøper Tailwind

Etter å ha sparka utviklerne fordi alle brukerne var KI, har de nå funnet en trygg havn.