Hva er egentlig 'concurrent rendering'?

React 18 i beta, TypeScript 4.5, krav om tofaktor på NPM og "concurrent rendering" forklart.

Dette var uken for et lurt CSS-triks, en veldig høy hund, og en ikke fullt så høy i hatten stortingspresident. Og 8 440 ting skjedde i frontend-verdenen!

React 18 i beta! 🎉

I forrige uke ble det annonsert at React 18 er ute i beta, og som en som har gledet seg til lanseringen helt siden den ble annonsert på ReactConf 2019, kjenner jeg på at det klør i fingrene etter å ta dette i bruk.

I tiden siden den opprinnelige annonseringen har riktig nok React-teamet justert forventningene litt.

De har valgt å utsette suspense for data fetching til senere versjoner, og de har lagt fra seg idèen om en alt-eller-ingenting Concurrent Mode som ikke er bakoverkompatibel. Istedet har de valgt å gi brukerne en opt-in mulighet, ved å tilby nye features som vil føre til “Concurrent Rendering”.

Det betyr at de aller fleste skal kunne oppgradere til React 18 uten altfor store endringer.

Andrew Clarke som jobber i React Core Team tweetet forøvrig at de publiserer en final release tidligst i slutten av januar.

Concurrent rendering?

Når vi først er inne på concurrent rendering, hva er det egentlig?

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.

Et eksempel på en sånn type feature som kommer med React 18 er startTransition. Eksempelet de selv bruker er en søkeboks som både skal vise bokstavene man skriver inn og søkeforslag underveis. I dagens React fører dette raskt til en hakkete brukeropplevelse der det man skriver ikke vises før etter at søkeforslag er rendret.

Ved å legge endringene av søkeforslag inne i en startTransition-blokk, vet React at renderingen av søkeforslag kan bli avbrutt. Typisk ved at brukeren for eksempel skriver inn en ny bokstav. Dette fører til en mye smoothere brukeropplevelse ⭐️

TypeScript 4.5 🌟

Enda en release, folkens! Her er det bare å oppgradere i vei.

Blant en hop av nye ting finner vi blant annet en ny type Awaited for bruk sammen med await, og støtte for import assertions som tillater deg å sjekke at det du importerer er på riktig format.

Sjekk ut annonseringsposten til Microsoft, her var det litt av hvert!

Krever 2FA på npm-registry🔒

Github la ut et relativt langt blogginnlegg i forrige uke, der det blant annet kom frem en gledelig nyhet, og en nifs påminnelse om at man burde være obs på avhengighetene sine.

De innfører nå krav om tofaktorautentisering for alle som vedlikeholder og administrerer “populære” npm-pakker. Det er et godt virkemiddel for å hindre at uvedkommende får publisert malware fordi de har klart å hacke seg inn på kontoen til noen med tilgang.

Det betyr ikke at vi ikke skal være bekymret for npm-avhengighetene våre, for i samme bloggpost kunne de fortelle at de i høst hadde oppdaget en sårbarhet som tillot brukere å publisere nye versjoner av hvilken som helst npm-pakke med en konto uten ordentlig autentisering. Denne sårbarheten hadde vært der siden før september 2020💣

PS. Her er lenken til informasjon om tofaktorautentisering på github, hvis du skulle trenge den.

Det var alt vi hadde på lager denne uka! Tusen takk for at du leste gjennom, også sees vi i neste <ForrigeUke />. 👋