Frontity – perfekt for Headless WordPress

Stine Hagen og Kasper Aamodt – 03.05.2021

Frontity er en av de enkleste måtene for å lage en nettside ved bruk av det kjente CMS’et WordPress. Frontity er et open source React rammeverk for “headless WordPress”, hvor det også er mulig for hjelp i diverse forumer. Frontify leser WordPress-siden sin Rest-API og deretter bygger den hele frontend i React.

Det er ikke veldig vanlig å se WordPress-nettsider bygget med React. Frontity er en isomorf React-app for WordPress CMS. Det er med andre ord et enkelt rammeverk som skaper lynraske nettsider der innholdet enkelt kan redigeres i WordPress. Det beste med Frontity som rammeverk er at man får farten til en React-app, samtidig som man har funksjonaliteten til et WordPress CMS.

En del av React-rammeverkene som eksisterer i dag opplever SEO-trøbbel. Frontity betyr ingen SEO-bekymringer – fordi den benytter “server side rendering” og “client side rendering”.

1. Lynrask lasting
   Frontity sender først en HTML-side, så den lastes inn nesten umiddelbart. Denne HTML-koden er fullt funksjonell og navigerbar uten JavaScript. Når React lastes inn, tar det kontroll over appen, og brukerne merker ingen endringer.
2. Perfekt tilgjengelighet
   Frontity sitt mål er å gjøre WordPress og React enklere og mer tilgjengelig for alle. Ut av boksen er Frontity lett å bruke, og gir utviklerne også verktøy som gir beskjed hvis de har feil i koden sin.
3. Støtte for ES6 i moderne nettsider
   Frontity genererer to JavaScript pakker: Én i ES6 uten transpilering eller flerfyll, så den er så liten og rask som mulig. Den andre blir generert i ES5 for de gamle nettleserne som ikke støtter ES6.
4. Støtte for WordPress.com og WordPress.org
   Frontity har mulighet til å fungere med forskjellige “kilder”. Første versjonen inneholder en “wp-source” som vil fungere med REST API på både et wordpress.org nettsted og et wordpress.com nettsted. Derfor vil Frontity dekke dine behov uavhengig om du hoster din egen nettside eller om du bruker wordpress.com.
5. Kodedeling
   Frontity bruker webpack for å dele koden og kunne sende den minste koden som kreves for at appen skal fungere. Dette lar også utviklere dynamisk laste inn komponenter ved hjelp av “lastbare komponenter”.
6. Kamptestet rammeverk
   Når Frontity valgte å gjøre det interne rammeverket open source, hadde det allerede blitt brukt til å drive store WordPress nyhetssider i flere år. På disse sidene hadde rammeverket flere millioner brukere.
7. Et samfunn som hjelper hverandre
   Det er ikke noe som heter dumme spørsmål. I Frontity sitt samfunn kan man spørre både brukere og Frontity sine ansatte om ting man lurer på, se etter jobber, diskutere nye funksjoner, og bidra til videreutvikling av rammeverket.
8. Serverløs og horisontal skalering
   Frontity-serveren er så liten at den passer perfekt til “serverless” kravet. Dette betyr at frontend kan skaleres uendelig.
9. Minst mulig reageringspakke
   Frontity hjelper også med å bygge nettsteder som gir bedre brukeropplevelser ved å være raske. Grunnen til dette er at Frontity teamet har jobbet hardt med å redusere størrelsen på rammeverket. Sammenliknet med i starten har den blitt redusert med 60% og utgjør bare 60kb (gzipped).
10. Utvidbart
    En av de beste tingene med Frontity er utvidbarheten. Som utvikler kan du enkelt legge til nye funksjoner til ditt tema via utvidelser og NPM pakker uten å måtte opprette dem fra bunnen av.