Hvorfor eksisterer Webpack, og hva prøver den egentligå løse?

ForrigeUke: Webpack forklart, TC39, tilstand i React, Svelte + TypeScript og Vue 3. 📦

Dette var uken for mobbing av tech-kjendiser 😈, hvor det var på tide å betale regninga for løken 🧅, og hvor folk er redde for TypeScript 🐛.

Og 311 815 ting skjedde i frontend-verdenen!

TC39 — Steg 4

En del features har kommet til det siste steget i TC39-prosessen, som snart blir klar for å bli inkludert i ECMAScript-standarden:

Dette ser veldig lovende ut!

I en annen ForrigeUke skrev vi om Logical Assignment da den kom til steg 3, og det er godt å se den har kommet til det siste steget. Logical assignment lar deg kombinere logiske operasjoner samtidig som den lar deg sette verdier som oppfyller det logiske uttrykket:

a ||= b; // Setter b hvis a er false

En annen ting som ser lovende ut er Promise.any. Den vil returnere når en av Promisene blant de itererbare objektene oppfylles (kronglete å oversette “promise”, “iterable”, og “fulfills” 😅):

const first = await Promise.any(promises);

Det er mye kult som kommer i ES2021, blant annet numeric separators, som lar deg bruke en separator for å skille cent vs heltall. Vet ikke helt om det kommer til å hjelpe meg eller forvirre meg!

let fee = 123_00; // $123
let fee = 12_300; // $12300

Sjekk ut det andre som er i steg 4 også! 👊

Webpack 👷

Jeg har alltid synes Webpack har vært litt “magisk”, og det har for meg alltid “bare” vært et verktøy som gjør at React bare fungerer i browseren. Men hvorfor eksisterer Webpack og hva prøver den egentligå løse?

Tyler McGinnis har skrevet en finfin bloggpost som tar for seg en introduksjon til Webpack og som forklarte en del ting for meg!

I korte trekk så gjør Webpack at du ikke må skrive for hver .js fil du vil ha inn, og den løser også det problemet at du slipper å tenke på hvilken rekkefølge du importerer filene i din index.html fil. Den gjør også om SASS og LESS filer til CSS, og “moderne” kode om til ES5 som gjør at koden du skriver i React vises på riktig måte i browseren. Liker veldig godt hvordan de forklarer det med forståelige eksempler. Vil absolutt anbefale artikkelen, og de tar også for seg litt mer tekniske aspekter ved Webpack 🚀.

«Jeg har alltid synes Webpack har vært litt “magisk”, og det har for meg alltid “bare” vært et verktøy som gjør at React bare fungerer i browseren.»

Tilstandshåndtering i React 🤖

Det å håndtere state syns jeg er vanskelig når man bygger en applikasjon. Hva er beste måte å gjøre det for mitt use case? Skalerer dette bra? Burde jeg dra inn et bibliotek?

Kent C. Dodds mener at React er alt du trenger for å håndtere state i applikasjonen din. Han mener at det at det er hundretalls med biblioteker på npm i tillegg til hundre til med “lettere redux”-biblioteker som gjør at det vanskelig å vedlikeholde state’n.

I det store og det hele mener han at React håndterer state ganske bra nå med hooks og context, og han oppfordrer til å holde state så lokal som mulig, å brukte context når prop drilling blir et problem. Selvfølgelig bruk global state når man virkelig trenger det, men det trenger du sjeldent for å vite om en modal er åpen eller ikke. Kanskje ikke så veldig overraskende eller revolusjonerende artikkel, men gjentagelse er alltid fint!

Syntax highlighting ✨

Farger er noe vi lett kan feste blikket på, det “drar” blikket vårt mot det og gjør det enklere å finne elementer som skiller seg ut. Jeg er veldig fan av å ha syntax highlighting og trives best med mørk bakgrunn og masse farger 🎨.

Men etter å ha lest artikkelen som kom i en utgave fra Computer Things om dette temaet må jeg si at jeg har fått større forhåpninger for dette i fremtiden.

De drømmer om å ha ulik syntax highlighting basert på hva slags informasjon man vil ha ut av koden. Tenk å ha ulike settings basert på om du vil fokusere på hva som er importert fra andre filer, eller ha nøstede parenteser i farger som du raskt kan se?

De konkluderer med at per i dag er det vanskelig å implementere de ulike casene de presenterer i artikkelen, da noe av highlighting som error-markering som kan trenge informasjon du får i runtime, og at mye av begrensningen er i editoren på grunn av regex’er. Sjekk ut artikkelen da vel!

«Jeg er veldig fan av å ha syntax highlighting og trives best med mørk bakgrunn og masse farger.»

Et lite blogginnlegg fra Dan til slutt 👊

ForrigeUke-posten som var ForrigeUke introduserte vi nye blogg-arenaen til Dan Abramov, og han har selvfølgelig levert denne uken også!

Han har gitt oss en super artikkel på hva f̵a̵e̵n̵ søren memoization er!

Svelte + TypeScript

I en tidligere bloggpost av ForrigeUke skrev vi om at Svelte begynte å nærme seg full støtte på TypeScript, og for litt siden annonserte de at nå offisielt støtter det!

Vue versjon 3

Ikke en full release enda, men Vue versjon 3 har også kommet som release-kandidat.

Den nye versjonen skal visst være indre, raskere, og enklere å vedlikeholde 🤓.

Det var ikke altfor mye å grave opp denne uka og det meste var artikler, men håper dere likte det ✌️. Vi skrives en annen uke! 👩💻