Dette var året til Greta og miljøbevegelsen ✊, og definitivt ikke året til Trump 🤡. Og flere ting enn vi klarer å liste opp skjedde i React-verdenen!

Men her kommer en liten oppsummering over de tingene vi synes var kulest i 2019.

Det er mye som har skjedd i 2019. Vi har brukt hver mandag kveld på å gi dere en kort oppsummering av alle de små og store nyhetene som skjer i communityet vi alle er en del av, og noen saker har stukket seg litt mer ut enn andre.

Her finner du en oppsummering av de 12 største sakene vi hadde i 2019, samt en liten konferanse-oppsummering til slutt. Velbekomme!

Hooks

I mars kom det vi lenge hadde ventet på, nemlig Hooks! På ReactConf 2018 ble det offentliggjort at React-teamet jobbet med ny funksjonalitet som skulle gjøre hverdagen lettere. Det ble godt tatt i mot, og ga oss flotte verktøy for å håndtere både tilstand og sideeffekter i funksjonelle komponenter.

Du fikk kanskje med deg lanseringen, men vi legger ved en lenke til deg likevel.

Vi skrev også en bloggpost om Hooks om det skulle være interessant! 🤘

React Native får hooks

Uken etter Hooks ble lansert for React fulgte React Native teamet etter. De ga ut en release-candidate versjon 0.59.0-rc.1 som selvfølgelig inneholdt Hooks, og som lot deg bruke denne flotte nye funksjonaliteten uten problemer for React Native-apper også. Hurra!

React Router 5

Dette var en nydelig release — helt uten breaking changes! Den eneste grunnen til at de bumpa versjonen var måten de håndterte avhengighetene til react-router-dom. Dette er kanskje litt i strid med semver-reglene, men samma det! 🤭 La ved en lenke hvis du vil lese mer om releasen!

I denne versjonen kom kompatibilitet med React versjon 16, bruk av nytt Context API, fiks av “Update-blocking” problemet, spesifisering av flere paths med array for samme route komponenten, og mye annet småsnacks!

Nyhetene i Create React App: "Julenissen kom tidlig i år"

tirsdag 10. desember 2019

Create React App v3

Versjon 3 av create-react-app kom, og nye major releaser er jo alltid morsomt! Denne versjonen kom med støtte for Jest 24, eslint-regler for Hooks, linting av TypeScript, og som alle releaser litt av hvert av fixes. Les mer i changeloggen.

Hot reloading 2.0: Fast Refresh

Hot reloading har på samme tid vært en av de beste og verste tingene med React. Det gir oss en helt utrolig utvikleropplevelse, hvor vi kan iterere raskere enn med noen annen plattform. Samtidig har det en tendens til å ikke fungere sånn halvparten av tiden, og være et skikkelig helvete å sette opp.

Mye av grunnen til dette har vært at det har vært en feature som har vært implementert i brukerland. Dette har React-teamet nå tatt til seg, og har nå lagt til støtte i selve React for best mulig støtte.

Det er allerede tilgjengelig for React Native, og web-støtte er bare uker unna. Om du bruker Parcel kan du allerede nå begynne å bruke det i nyeste alpha-versjon, og Webpack har et åpent pull request for å legge til støtte.

Reach Router og React Router slår seg sammen

Routing er noe de fleste React-apps bruker, og i det siste har det vært to konger på den proverbiale haugen. React Router har lenge vært førstevalget for mange, men siden Gatsby valgte Reach Router som sin router, har det plutselig blitt et valg vi burde forholde oss til. Frem til i år.

På selveste nasjonaldagen konstaterte nemlig Ryan Florence (karen bak begge bibliotekene, på forskjellige tidspunkt) at de to bibliotekene skal slå seg sammen!

Du kan lese alle detaljene her, men kort forklart så blir det flere hooks, færre bibliotek (reach-router deprecates), og et felles API å følge. Vi har allerede begynt å merke litt til dette arbeidet, med de nye hooksa innført i react-router@5.1.0 , og vi gleder oss til fremtiden.

Speaking of sammenslåinger — kanskje vi kommer til å se mer av dette i CSS-in-JS-verden også? Styled Components og Emotion begynner å bli skummelt like API-messig! 🤔

Nye DevTools

Etter å ha teaset oss halve året, var det endelig duket for at Brian Vaughn kunne lansere en helt ny versjon av React DevTools i august. Her var det plutselig støtte for hooks, bedre ytelse for store applikasjoner, og ikke minst en utrolig mye bedre brukeropplevelse.

Jeg tror muligens dette er den saken som — kanskje etter hooks — fikk flest saker i årets ForrigeUke-r. Utrolig digg å endelig få det på plass, i alle fall 🙌

Kode som over­legent design­verktøy

onsdag 2. oktober 2019

React-Gate

Mens de fleste store profilene i React var samlet på ReactRally, var det en ganske ugrei ting som skjedde på Twitter. Det som i ettertid ble kjent som “React-Gate”, var en stor, distribuert krangel om den mer giftige biten av React-miljøet. Rasisme og utenforskap ble tatt opp i plenum, og det var mange sårede følelser og harde utvekslinger mellom folk som inntil nylig var bestevenner. Ugh.

Det finnes gode oppsummeringer for de som måtte være interessert, og vi skrev om det i to ForrigeUker 1 og 2.

Etterspillet var dog det viktigste. React-teamet har fått et mye større fokus på inkludering av svakerestilte i samfunnet, samt en forbedret Code of Conduct. Mange av de mer kjente React-navnene har også gått ut og sagt at de skal jobbe sammen for å stoppe de delene av React-miljøet som ikke har noe der å gjøre.

Concurrent Mode

Høstens store begivenhet — React Conf — hadde mange godbiter å by på. Den største nyheten var nok introduksjonen av Concurrent Mode — som ble sluppet i en eksperimentell versjon. At den er eksperimentell er viktig å få med seg da den ikke er en del av noen stabil release enda, men kan eksperimenteres med av nysgjerrige hoder 👩🔬

Som dokumentasjonen sier så er Concurrent Mode "a set of new features that help React apps stay responsive and gracefully adjust to the user’s device capabilities and network speed".

Det høres jo fabelaktig ut! React-folka har lenge vektlagt utvikleropplevelse i utviklingen av biblioteket, men denne featuren fokuserer altså på brukeropplevelse — noe som er digg at de prioriterer!

9 høydepunkter fra React Conf 2019

Kristofer Giltvedt Selbekk tar oss med til Nevada, hvor årets største React-nyheter ble vist fram.

onsdag 30. oktober 2019

Concurrent Mode åpner opp en ny verden av muligheter. Som navnet tilsier — samtidighetsmodus — gir den deg muligheten til å rendre flere ting samtidig eller til og med pause rendring av enkelte elementer slik at appen skal virke smoothest mulig for brukeren. Kort fortalt gir den deg tilbake kontrollen av hvordan appen din rendres. Harry Wolff har laget en knallfin oppsummering av fordelene med det nye React-tilskuddet og understøtter dette med flere eksempler.

Her svarer han også på om du i det hele tatt trenger å bry deg om Concurrent Mode. Svaret er det samme som svaret du ville fått ved å stille det samme spørsmålet om en annen avansert React-funksjonalitet: nei, de fleste apper trenger ikke Concurrent Mode. Det er allikevel et kraftfullt verktøy som gir deg muligheten til å kontrollere hvordan appen din håndterer asynkrone oppgaver og rendrer UI-et — og er tilgjengelig hvis du ønsker denne muligheten.

Suspense for Fetching av Data (og alt mulig annet)

Siden React 16.6 har Suspense gitt deg muligheten til å utsette rendring av komponenter mens man venter på at noe kode skal laste, og deklarativt spesifisere en loading state mens vi venter. Som en del av ovennevnte Concurrent Mode kom Suspense for Data Fetching, som gir deg muligheten til å også vente på alt mulig annet — inkludert data!

Som med alt nytt kan det være vrient å få alle brikkene på plass med en gang. Heldigvis har har Maggie Appleton laget en fantastisk illustrert guide til Suspense som forklarer hva Suspense er, hvordan det funker og hvorfor man skal bruke det.

For å forstå hvilket problem Suspense virkelig løser anbefaler jeg også å ta en titt på denne Twitter-tråden til Dan Abramov. Han identifiserer dagens problem og pin-pointer hvor Suspense kommer inn og redder dagen.

Create React App v3.3.0

I desember ble versjon 3.3.0 av Create React App sluppet og inneholdt noen veldig kule nyheter.

For det første har man nå fått støtte for custom templates. Det vil si hvilken struktur man vil ha på, og hvilke filer man vil ha generert i appen man bootstrapper opp med create-react-app .

For produkter som CodeSandbox er dette fantastiske nyheter siden dette gir oss muligheten til å sette opp React-apper med ønsket struktur og innhold på null komma niks! Se for deg hvor lett det nå er å reprodusere bugs for open-source folk 🤩

Den andre store featuren i denne versjonen er støtten for de to nye språk-featurene i JavaScript — optional chaining og nullish coalescing operator.

I tillegg til dette er react-testing-library nå installert by default. Dette biblioteket — laget av Kent. C. Dodds — gjør det veldig enkelt å skrive gode tester som forbedrer koden din i samme slengen som den hindrer bugs!

Du kan lese changelogen her, for en komplett oversikt over nye features.

Redux style guide

Er du en leser av denne bloggen er sannsynligheten stor for at du i en eller annen sammenheng har vært borti Redux — biblioteket man tidligere bare “måtte” ha hvis man satte opp en ny React-app.

Redux-style guide: - Disse bør du følge!

tirsdag 26. november 2019

Redux har mistet en del av sin initielle popularitet, mye grunnet utviklingen av React sine egne API-er. Man trenger ikke lenger bruker Redux som global tilstand og koden blir nettere, lettere og mer oversiktlig uten all boilerplaten man fikk med Redux.

Når det er sagt så er Redux fortsatt et veldig nyttig verktøy i komplekse applikasjoner og vel så viktig — den er sannsynligvis allerede en del av legacy-appen du sitter og vedlikeholder.

Siden Redux ikke er på vei ut — hverken fra React-økosystemet eller appen din — så er det viktig med gode kjøreregler for hvordan man burde gjøre ting. I den anledning har Redux-maintainer Mark Erikson og hans maintainer-crew laget en detaljert og inngående brukermanual for hvordan ting bør gjøres. Den inneholder et sett med regler som de har fordelt på tre kategorier: essensielle, sterkt anbefalte og anbefalte. Følg disse og du vil ende opp med mindre og enklere kode, færre bugs, og i det hele tatt slippe å gjette hvordan ting skal gjøres.

Litt om konferanser

I tillegg til alle nyhetene vi har snublet over i løpet av året, har det jo vært endel konferanser. Vi har vært på og oppsummert både React Conf og JSConf, men her får du en kjapp oversikt over de største konferansene om React, og hvor du kan se presentasjonene. Det er ikke i noen spesiell rekkefølge. 🤷

Du kan forøvrig se en veldig komplett oversikt på React sine hjemmesider!

ReactJS Girls Conf
Det var mange som satt seg på bakbeina da de hørte om en konferanse med bare kvinnelige speakers. For en tullete ting å gjøre. Fantastiske talks, spennende speakers og visstnok en utrolig bra gjennomført greie.

ReactConf 2019
Årets “offisielle” React-konferanse hadde massevis av underholdende talks, om alt fra Suspense til Facebooks interne CSS-in-JS rammeverk. Sjekk spesielt ut Sophie Alpert som live-implementerte en fungerende versjon av React fra scena!

ReactEurope
Som navnet tilsier er dette en av de største React-konferansene i Europa. Jared Palmer (karen bak Formik og TSDX) holdt en fin prat om State of React, blant annet, og masse annet moro!

React Amsterdam
React Amsterdam har en av de kuleste grafiske profilene på konferansescena, og påfølgende innhold. Her var det talks fra Kent C. Dodds, Max Stoiber og meme-kongen Mark Dalgleish.

React Advanced
Samtidig som ReactConf gikk av stabelen i Las Vegas, var det duket for React Advanced i London. r/reactjs-sjef Shawn Wang aka swyx viste hvordan man kunne implementere hooks fra scena, og den alltid like underholdende Ken Wheeler sparka i gang showet med litt magi!

React Rally
Kjent som den beste React-konferansen å være på, og visstnok var den like koselig i år som den alltid har vært. Min favoritt her var 11 år gamle Revel West’s talk “So you think you’re a junior dev?” 👶

Langt oppsummert

2019 har vært et utrolig år for React. Det har vært et fortsatt fokus på forbedret utvikleropplevelse, samtidig som vi nå ser at sluttbrukeren begynner å bli den virkelige vinneren når det brukes React.

Hooks har virkelig vært det paradigmeskiftet vi håpet på, og det har forenklet mang en kodebase.

Suspense og ConcurrentMode er nok de neste paradigmeskiftene vi kommer til å se, når de en gang blir lansert i 2020. Vi har allerede sett hvordan APIene kommer til å se ut, og arbeidet i communityet for å finne ut hvordan de skal utnyttes er i full gang.

React Native har også fått utrolig mye kjærlighet i 2019, noe som har blitt skikkelig nødvendig med utfordrere som Flutter og SwiftUI. Da er det flott å få forbedra hot reloading, raskere JavaScript-motor og forbedret dokumentasjon.

2019 har vært et fantastisk år for React. Vi tror at 2020 kommer til å fortsette trenden.

Takk for at du har fulgt oss i året som var. Vi er stolte av å ha levert en nyhetsrapport i 52 av årets uker, og det er det 14 utrolig talentfulle forfattere som står bak.

Sees igjen neste år! 👋

- Er det lov å være lei av React i 2019?

Jørgen er skuffa over 2019, og lei av både Windows og React. Men 2020 tror han skal bli bedre.

torsdag 2. januar 2020