React4XP 6: Et moderne rammeverk for å bygge nettsteder

På en nylig Enonic-meetup avduket CTO Thomas Sigdestad den neste store utviklingen innen frontend-utvikling for Enonic: React4XP versjon 6.

Denne utgivelsen markerer et betydelig sprang fremover, og gir utviklere en mer moderne, strukturert og fleksibel måte å bygge fullfunksjonsnettsteder på – kun ved hjelp av React.

Enten du har jobbet med React4XP før eller utforsker alternativer til rammeverk som Thymeleaf eller til og med Next.js, introduserer versjon 6 flere endringer som er verdt å merke seg.

Se presentasjonen:

Hva er React4XP?

React4XP er Enonics egen tilnærming til serverside-rendering med React, innebygd i XP. I motsetning til andre rammeverk som Next.js, som krever drift av en separat Node.js-server, kjører React4XP-apper direkte i XP – noe som gjør dem enklere å distribuere, vedlikeholde og skalere.

Der Next.js kan være mer egnet for store, frikoblede systemer, tilbyr React4XP dyp integrasjon med XPs innholds-API-er, innebygd forhåndsvisningsstøtte og side-caching.

Den har også sømløs kompatibilitet med andre Enonic-funksjoner og -apper, som SEO-verktøy, sitemaps og sikkerhetsoverskrifter. Den er ideell for team som ønsker å holde utviklingen strømlinjeformet samtidig som de omfavner moderne frontend-verktøy.

Hva er nytt i versjon 6?

Versjon 6 er en komplett nytenkning av hvordan React og Enonic XP skal fungere sammen. Viktige endringer inkluderer:

• Headless-klar struktur: React4XP 6 lar deg skille frontend-kode fra XP-skjemaer, noe som gir deg fleksibilitet til å gjenbruke eller dele frontend-logikk på tvers av flere nettsteder eller prosjekter.
• Forent rendering-pipeline: I stedet for å kjøre flere mikro-React-apper per side, kjører versjon 6 en enkelt React-app på tvers av nettstedet ditt, noe som forbedrer ytelsen og vedlikeholdbarheten.
• Nytt app-bootstrap-lag: Du kontrollerer nå ruting og side-rendering gjennom app.ts og app.tsx, og tilbyr finkornet kontroll over forespørselshåndtering.
• Standardiserte CSS-moduler: CSS-moduler støttes ut av boksen, noe som forenkler stilkonsistensen på tvers av komponenter.
• TypeScript og forbedret byggesystem: Utviklingen drar nå nytte av strengere typing, raskere bygg og bedre utviklerverktøy.
• Komponent-register og datahenter: Disse to nye konseptene definerer hvordan komponenter får sine data og rendrer innhold. Hver del av en side kan deklarere sine egne databehov og rendering-logikk på en ren, deklarativ måte.

Live demo-høydepunkter

Under presentasjonen demonstrerte Thomas hvordan React4XP 6 kan legges oppå eksisterende XP-innhold.

Ved å bruke demo-nettstedet Headless Movie Database viste han hvor enkelt en React-frontend kan ta over rendering – komplett med umiddelbare forhåndsvisningsoppdateringer og hot-reloading under utvikling.

Ved å bare knytte en ny React-app til et eksisterende nettsted, kan utviklere migrere til moderne rendering-teknikker uten å måtte berøre underliggende innhold eller datamodeller.

Hvordan det fungerer

Under panseret fungerer React4XP 6 ved å fange opp rendering ved hjelp av en catch-all-mapping som ruter forespørsler til din egendefinerte app.ts. Denne filen fungerer som et bootstrapping-punkt, trekker inn kontekstuelt innhold og orkestrerer hvordan siden rendres.

Prosessen flyter gjennom:

1. Datahenter – Bestemmer hvilket innhold komponenter på siden trenger og henter det ved hjelp av dedikerte "dataprosessorer".
2. Komponentregister – Knytter parts til deres React-komponenter for serverside-rendering.
3. Responsbehandler – Endrer eventuelt den endelige HTML-en, noe som gjør det mulig å injisere ting som CSP-headere eller SEO-tagger.
4. Klient-rendering – Når den er levert til nettleseren, starter appen React på klientsiden.

Alt er utviklervennlig og fullt tilpassbart – ideelt for team som ønsker kontroll uten overhead av tilpassede byggesystemer.

Kom i gang

Du kan starte et nytt prosjekt ved hjelp av den oppdaterte starteren:

enonic create my-site -r https://github.com/enonic/starter-react4xp6

Denne kommandoen gir deg et fungerende oppsett med React, TypeScript, CSS-moduler og XP-integrasjon – alt forhåndskoblet for utvikling. Du finner også full dokumentasjon og en detaljert oppgraderingsguide for de som migrerer fra React4XP 5.

For team som oppgraderer, vær oppmerksom på at tidligere Thymeleaf-integrasjon og regionhåndtering ikke støttes i versjon 6. Den reneste veien er å starte på nytt, portere over frontend-koden din og reimplementere sidekomponenter ved hjelp av den nye datahenteren og komponentregisteret.

Kommer snart

Selv om versjon 6 allerede er funksjonsrik, er mer på vei. Enonic planlegger å:

• Flette datahenteren og komponentregisteret for enda enklere konfigurasjon
• Legge til GraphQL-støtte via Guillotine (for de som foretrekker dataspørringer på klientsiden)
• Støtte funksjoner som link-prefetching, hot module reload og flere utviklings-speedups

Som alltid vil tilbakemeldingene dine forme disse funksjonene. Enten du er en utvikler som bygger markedsføringssider, komplekse apper eller administratorgrensesnitt, ønsker Enonic å høre hva som fungerer og hva som kan bli bedre.

React4XP 6 er tilgjengelig nå. Det er raskt, fleksibelt og laget for moderne frontend-utvikling – rett i Enonic XP.

🚀 Klar til å prøve det? Kom i gang med React4XP 6 eller utforsk starter-repoet på GitHub.