Nå er app-mappa i Next.js her: - Et ganske stort paradigme­skifte

Next.js 13.4, CSS Zen Garden fyller 20, Vercel med KV-stores og Postgres, RemixConf og React Aria Components i ukas ForrigeUke.

- Det høres kanskje ikke så veldig spennende ut, men det er et ganske stort paradigmeskifte – både for Next.js og React, skriver Kristofer Giltvedt Selbekk i ukas ForrigeUke. 📸: Ole Petter Baugerød Stokke
- Det høres kanskje ikke så veldig spennende ut, men det er et ganske stort paradigmeskifte – både for Next.js og React, skriver Kristofer Giltvedt Selbekk i ukas ForrigeUke. 📸: Ole Petter Baugerød Stokke Vis mer

Dette var uken for litt lettvekts trolling 🧌 , ny innsikt 🤯 og en god gammeldags prank 🌭.

Og gjett hvem som oppsummerer frontend-verden denne uka! 🧓

CSS Zen Garden fyller 20 år!

Jeg vet ikke hvordan dere startet deres karrierer som frontend-utviklere, men jeg husker fortsatt første gang jeg snublet over den nå ganske sagnomsuste nettsiden CSS Zen Garden for mange (mange!) år siden. For de som ikke kjenner til denne siden, så er det en standardisert bit med HTML, med noen klassenavn på, som forskjellige folk har fått til å se helt forskjellig ut kun med CSS.

Jeg ble så fascinert av mulighetene man hadde, at jeg satt meg ned og nileste alt jeg kunne komme over av CSS-litteratur i år fremover. Jeg var riktignok ganske tidlig i tenåra, så noen imponerende kloner ble det ikke – men det førte til en kjærlighet jeg har til CSS den dag i dag.

Om du ikke har vært innom denne rolige internetthagen før, anbefaler jeg at du tar et besøk, og klikker deg rundt til et par eksempler. La deg inspirere. La deg imponere. Og lag din egen, bare for moro skyld. Tipper det er gøyere uten å bruke tabeller til layout, som jeg gjorde 🙈

Next.js 13.4 er ute!

Manges React-rammeverk numero uno – Next.js – er ute med en ny minor-versjon, med relativt major endringer!

For det første er deres nye måte å strukturere sider på – “app”-mappa – ute av beta, og nå den anbefalte måten å lage sider på. Det høres kanskje ikke så veldig spennende ut, men det er et ganske stort paradigmeskifte – både for Next.js og React.

App-mappa til Next.js lar deg nemlig ta i bruk såkalte “server components” – komponenter som bare kjører på server-siden. Det gjør at du ikke trenger å sende hele markdown-parsing biblioteket eller tekster for alle språk til klienten – du sender i stor grad bare ferdig-rendret HTML som vises til brukeren raskere enn noen gang før.

For å deale med endringer, har Next også laget støtte for noe de kaller “Server Actions” – en litt ny og forbedret måte å deale med skjema-innsending på. Det har også endt opp med å være ganske interessant, både fra et Next-perspektiv og fra et React perspektiv. Disse kommer nemlig til selv klientside-apper!

Om du er interessert i dette, så vil jeg anbefale å ta en titt på den offisielle release-posten deres – dette er skikkelig spennende teknologi og gøyale fremskritt for både oss utviklere og sluttbrukeropplevelsen.

«Det høres kanskje ikke så veldig spennende ut, men det er et ganske stort paradigmeskifte – både for Next.js og React.»

Vercel får støtte for KV-stores og Postgres 🤯

Som om det ikke var nok moro fra Vercel i det siste, har de også lansert et par nye tjenester jeg ser for meg kan være veldig nyttige – både for mindre prosjekter og mange større bedrifter.

Nå får man nemlig støtte for både key-value stores (les Redis) og PostgreSQL, distribuert ut til der brukerne dine sitter. Det betyr latterlig lav latency, og ikke minst en veldig mye bedre brukeropplevelse. Se bare hvordan det anbefales at man skriver koden sin fremover:

import { sql } from '@vercel/postgres';

export default async function UserPage(props) {
  const { rows } = await sql`SELECT * FROM users WHERE id ${props.params.id}`;
  return <h1>Hei hei, {rows[0].name}</h1>;
}

Dette er ganske kult, spesielt siden det også sikrer oss mot SQL-injection angrep og en rekke andre ulumskheter.

Gleder meg til å teste ut dette ved neste anledning. Selv om det muligens gir litt PHP-vibber for noen 😁

RemixConf!

Egentlig ikke en ForrigeUke-post verdig kanskje, for dette skjer denne uken, men jeg gleder meg såpass mye til denne eventen at jeg ikke klarer å vente til neste uke.

Remix har lenge vært en reell utfordrer til hegemoniet Next.js har hatt på React-rammeverksfronten, og det lages stadig flere sider med hva jeg liker å kalle mitt goto-rammeverk. Men den siste tiden har det vært relativt stille fra gjengen bak – noe som jeg håper kan være en slags stillhet før stormen av nyheter.

For hva slags svar har Remix-gjengen til alle de nyhetene Vercel og gjengen har sluppet i det siste? Kommer vi til å se støtte for Server Components? Server Actions? Eller noe av det andre React-gjengen har kjørt på med i det siste?

Stemningen er til å ta og føle på, og jeg kommer i alle fal til å sitte spikra foran skjermen for å følge med i morgen. Det kan du også, tipper jeg, selv om de ikke har sagt eksplisitt at noe skal streames. I alle fall verdt å følge med på.

React Aria Components får litt traction!

De som kjenner meg vet at jeg er litt over snittet glad i designsystemer. Jeg bruker hverdagene mine på å hjelpe Vy sette sammen sitt, og har vært med på å lage en god del forskjellige designsystemer og komponentbiblioteker opp gjennom.

Derfor er jeg så glad for å se Adobes React Aria Components-bibliotek få mer traction – både i TL;DR-nyhetsbrevet og på HackerNews. Vi nevnte det for et par uker siden, men om du gikk glipp av det da, så er dette biblioteket et sett med ustylede React-komponenter som lar deg lage alle de tingene som er vanskelig å lage med ren HTML. Vi snakker combobokser, autosuggests og datepickers, for å nevne noen.

Før måtte man skru sammen disse komponentene selv, med hooks fra react-aria-biblioteket, men nå kan man spare seg ganske mye arbeid ved å bare bruke dette biblioteket ut av boksen. Og med den evig økende populariteten til Tailwind, kan det hende at biblioteker som Chakra UI og Material UI kanskje kan få en reell utfordrer i det spacet.

Det var det viktigste som skjedde i frontend-verdenen min denne uka i alle fall. Og selv om både Angular droppet en ny (visstnok veldig mye bedre) versjon, og Quik kom ut i v1.0, så tror jeg det får være for de spesielt interesserte.

Det er en fin tid å være glad i frontend i alle fall. Det er det.