Foto: Reed Pearson / Unsplash
Foto: Reed Pearson / UnsplashVis mer

ForrigeUke: Ny Parcel, Watermelon DB, jukselapper

Dette skjedde i React den siste uka. 👓

Parcel i ny versjon 📦

For de som føler webpack byr på vel my config, kan Parcel være et godt alternativ. Med lansering for under et år siden, er de fortsatt i startgropa, men utfordret webpack nok til at de lanserte et “zero-config” alternativ i versjon 4. Hverken Parcel eller webpack krever derfor nå ikke en config-fil, men det skal ikke mye til før du må fortsatt må ty til config-filen i webpack.

I tillegg til mindre config, viser Parcel sine egne benchmarks en betydelig raskere bundle-tid. De har fått noe kritikk for at benchmark kildekoden er closed source, men tidene har blitt bekreftet av tredjeparter.

Versjon 1.10.0 som ble lansert denne uken støttes bla. Babel 7, Flow, Elm. For mer info om nyeste versjon se link her.

Teste create-react-app@2

Som Kristofer skrev i forrige uke, ble scopet i v2.0 av det populære verktøyet litt i overkant, og de måtte kutte det som kuttes kunne. Nå er uansett det de håper blir siste beta versjon ute og klar til bruk. Sjekk ut linken og kom raskt i gang med ditt nye prosjekt 👩💻👨💻

Watermelon DB 🍉

Databaseverden har fått et nytt tilskudd. Watermelon DB hevder å være en “Next-generation React database”. Det er en ny relasjonsdatabase som sikter på å gjøre React/React native apper mer skalerbare. Dette skal oppnås ved lazy-loading av dataen, bygget på SQLite. Den kommer også “fully observable”, slik at hvis en record endres i databasen, vil alle komponenter som bruker dataen re-rendres automatisk.

Watermelon DB er foreløpig fortsatt under aktiv utvikling og kan ikke brukes i produksjon.

Re-rendres komponentene dine?

Charles Stover har skrevet en veldig interessant artikkel, om noe i hvert fall jeg har syndet på. Pleier du å bruke anonyme funksjoner som event handlers i render metoden din? Denne artikkelen vil antakelig gjøre at du tenker deg om litt ekstra neste gang.

Ettersom en anonym funksjon vil lage en referanse til en ny minnelokasjon i RAMen din, vil React komponenten som mottar funksjonen re-rendres hver gang, selv om funksjonen gjør akkurat det samme. Dette skyldes måten React sammenligner props med nåværende state.

Denne artikkelen illustrerer fallgruvene på en lett forståelig måte, og hvordan du kan øke ytelsen ved å unngå dem.

JavaScript-skills for React-folk

For mange, spesielt de som begynte som utvikler etter React allerede var etablert, kan det være vanskelig å holde styr på hva som er React-ting og hva som bare er JavaScript-ting. For en oversikt over variabler, klasser, funksjoner og mer kan denne artikkelen være en god start.

Jukselapp?

Ukens tips for de som stadig glemmer boilerplate når de pusler med React og Redux, eller rett og slett er litt nye til denne forvirrende front-end verden; det kan være kjekt med en jukselapp.