Dette var uken for aprilsnarr spesial: en swag stack overflow 😎, en hendig liten blåsemekanisme 🌬, og vi må nå tilrettelegge for VR når datatilsynet kommer på besøk ✌️.
Og 5748 ting skjedde i frontend-verdenen!
React 18 er ute 🎉
React 18 ute, og det er på tide for mange av oss å endelig ta det i bruk! Vi i redaksjonen har vært over middels gira på denne utgivelsen, og hvis du fortsatt lurer på hvorfor kan vi nevne noen grunner:
Concurrent rendering
I bunn og grunn dreier det seg om et nytt sett med features som tillater å avbryte eller utsette rendering. Dette i motsetning til tidligere versjoner av React, der en igangsatt render må gjøre seg ferdig.
Dette betyr at man for eksempel kan velge å prioritere brukerinput. Dvs. at dersom appen jobber med noe og brukeren interagerer med nettsiden, så pauser eller avbryter React det den holder på med, responderer til brukerens interaksjon, for så å fortsette der den slapp. På den måten unngår man en hakkete og uresponsiv brukeropplevelse.
Det er concurrent rendering som ligger til grunn for det fleste nye features i denne utgivelsen.
Automatic batching
Helt uten at du trenger å gjøre noe som helst, så vil state oppdateringer i timeouts, promises og events bli slått sammen til én render, der det før kunne resultere i ganske mange re-rendere.
React Day Norway er tilbake: - Helt fantastisk at vi nå kan møtes igjen
Transitions
I React 18 kan du som nevnt, skille mellom hva som er hvilke oppdateringer som er viktige og ikke-viktige ved å bruke det nye APIet.
Et eksempel er startTransition. Ved å legge endringer som er mindre viktige i en startTransition-blokk, vet React at disse kan bli avbrutt. På den måten kan andre, viktigere ting bli prioritet, for eksempel brukerinput. Dette fører til en mye smoothere brukeropplevelse.
Suspense
En begrenset versjon av Suspense der man kan bruke det sammen med lazy loading finnes allerede i React, men nå har de lagt på mer. Suspense i React 18 kan man blant annet kombinere med transitions, slik at man kan utsette render til man har lastet nok data til å vise noe fornuftig!
Den er ganske bakoverkompatibel
Den originale planen for React 18 var en Concurrent Mode som ikke var bakoverkompatibel. Men, etter litt tenking og diskusjon endte de opp i stedet med å lage opt-in concurrent functions, slik at man skulle kunne oppgradere til React 18 uten å måtte skrive om hele kodebasen.
Det virker jo som om de stort sett har holdt seg til det! Undertegnede testet å oppdatere sitt prosjekt i dag, og det gikk nesten smertefritt. TypeScript ville ikke umiddelbart være med på leken, men det kan vi jo ikke klandre React for.
Mikael oppsummerer frontend-året: - Egentlig ikke så mye endring
Typeannotasjoner i JavaScript?
Når vi først er inne på TypeScript, så har TypeScript-gjengen foreslått å legge typeannotasjoner rett inn i JavaScript.
Dette har blitt lagt frem for komiteen som kommer frem til ECMAScript standarder, og de ble i forrige uke enige om at dette er en god idé å utforske videre! Kanskje vi en dag slipper det ekstra byggesteget fra TS til JS.
Andre ting ECMAScript-komiteen kom frem til var at de har det meste klart for nye array-funksjoner som ikke muterer innholdet i arrayen (yes!), og også dekoratorer, som er funksjoner man kan kalle på klasser og klasseelementer. Syntaksen kan minne litt om Spring for oss som har vært innom Java 🤯
Raser mot Reacts Ukraina-støtte: - Skam dere!
JavaScript-utvikling anno 2022 🔧
I forrige uke dukket det opp en artikkel med oversikt over de viktigste utviklingsverktøyene i bruk for JavaScript, og selv om det ikke er noen enorme overraskelser her, er det en fin oversikt over kompilatorer, bundlere, rammeverk m.m. og noen betraktninger rundt disse.
Blant annet anbefaler artikkelforfatteren Next.js som rammeverk dersom du skal starte et nytt Reactbasert prosjekt i år!
Tanken er å gi oss lesere litt oversikt over økosystemet, slik at vi kan gjøre informerte valg av verktøy fremover.
Lesetips 📚
Undertegnede kom over denne reddit-tråden, for deg som er på jakt etter enda mer lesestoff i React-atmosfæren (i tillegg til ForrigeUke da, så klart 😁)
Det var alt vi hadde for denne gang, takk for at du leste, også sees vi forhåpentligvis i neste ForrigeUke! 👋
Kommer du til å hive deg over nyhetene i React 18, eller har du funnet deg noe bedre? Rop ut i kommentarfeltet! 💬
