Det er søren ikke lett å holde oversikt over hvordan man lager nettsider om dagen. Bare spør redaktør Ole Petter. En som har fått mye fart i det siste er rammeverket med det noe pompøse navnet Gatsby. Men hvorfor skal man velge det over andre språk og rammeverk egentlig?
Vi satt oss ned med Gatsby-fan Øyvind Aukner for å få svar.
#1. Øyvind, hvis du skulle forklare Gatsby til en nyutdannet utvikler. Hva ville du sagt? 🤔
At Gatsby er en wrapper som legger seg rundt, og fullfører React.
React er som kjent et bibliotek som gir deg mye, men ikke alt du trenger. Man må selv sørge for ruting og andre essensielle byggeklosser i de aller fleste prosjekter. Gatsby er et rammeverk som bruker React og samtidig gir deg disse funksjonene. Gatsby er altså klart til bruk ut av boksen på en måte React ikke er helt på egenhånd.
#2. Si at man har erfaring fra mer tradisjonelle backend-miljøer som PHP. Hvorfor skal man velge Gatsby istedenfor? 👋
Det er jo i bunn og grunn smak og behag.
Gatsby gir noen fordeler som jeg går gjennom lenger nede, og React og Gatsby er en del nyere - og enkelte vil påstå mer moderne.
Utvikleropplevelsen er en god del bedre og selv skyr jeg unna PHP. Men PHP vil nok være relevant i mange år til, og om du fortsatt holder fast ved det av egen fri vilje i 2021, tviler jeg på at jeg vil være den som får deg inn på bedre tanker!
Hva er greia med Azure?
#3. Hva bruker dere Gatsby til på arbeidsplassen din? 💡
Hos oss er vår nye hjemmeside – capraconsulting.no – bygget med Gatsby.
Utover det bruker jeg det gjerne til egne prosjekter. Jeg har ikke opplevd å se Gatsby bli brukt ute hos en kunde enda.
#4. Hvordan jobber man med Gatsby? Trenger man noe programvare? Må man lære noe spesielt rammeverk eller språk? 🥸
Gatsby introduserer veldig lite i og for seg selv.
Det rammeverket derimot gjør, er å binde sammen en del andre byggeklosser. For min egen del hadde jeg erfaring med React og Typescript, men for eksempel ikke GraphQL eller Sanity, som vi bruker både på hjemmesiden i Capra og nå på min egen blogg.
For min del ble det altså en relativt bratt læringskurve for å ta i bruk Gatsby, og jeg anbefaler å ha i alle fall erfaring med React før man hiver seg i ringen. Om man kjenner godt til React, GraphQL og en CMS man ønsker å bruke, for eksempel Sanity, burde det gå relativt fort før man er godt i gang.
#5. Hva er mest tidkrevende og eller vanskelig i arbeid med Gatsby? ⏰
Det var å forstå den mentale modellen for hvordan Gatsby setter opp sider og behandler innhold.
Noe av det var nok også relatert til Sanity.
Hva er greia med webutvikling i .NET?
Jeg stusset også først litt på hvordan å sette opp TailwindCSS sammen med disse. Tailwind i seg selv har en egen plugin i Gatsby så det var superlett å komme i gang. Men når det kom til innhold fra CMS så ble det noe værre. En av tingene Tailwind gjør er å resette en del default CSS. Så semantisk styling forsvinner og man må selv style h1, h2 og så videre. Når man ikke har direkte tilgang til innholdet i koden kan det bli litt tråkete.
Heldigvis har noen tenkt på dette før, og det lot seg lett fikse med Tailwind Typogrophy. Det er en liten ekstrapakke fra Tailwind som lar deg skru av og til en viss grad justere på denne oppførselen ved hjelp av hjelpeklassen «prose».
#6. Er det noen spesielle bruksområder Gatsby er skikkelig gode på? 🥇
Det må jo bli SEO og hastighet!
SEO er altså search engine optimization og går som de fleste sikkert vet ut på å gjøre seg selv til kjenne på verdensveven.
Gatsby har en del innebygget funksjonalitet for å lett sette for eksempel sidetitler. I tillegg er Gatsby generert på serveren, også kjent som server side rendering. Dette går ut på at alle sider er forhåndsgenerert og ligger klar som lesbar kode for en spørrende browser, og ikke minst netttrålerne fra søkemotorgigantene.
Hva er funksjonell programmering? 🤔
Et kjent problem med React gjennom create react app er at koden som blir synlig for Google’s analysealgoritmer er kryptisk og ulogisk strukturert. Dette gjør det vanskelig for algoritmene å anslå relevans og kategorisere innholdet du prøver å skape blest rundt.
Med Gatsby får algoritmene servert semantisk riktige sider og du blir belønnet med en bedre ranking i andres søkeresultater.
Ja og nevnte jeg at det var raskt? Den andre fordelen er hurtighet. Av samme grunn til overnevnte fordel får du raskere svar på spørringer ettersom det ikke er noe som må rendres eller genereres når du spør etter en side. Siden er jo allerede rendret på serveren og ligger klar til å skyte rett tilbake i det noen spør etter den. Dette påvirker visstnok også søkeresultatet. Så her har vi en god feedback loop.
#7. Gatsby blir ofte plassert i samme bås som Next.JS. Hva er forskjellen på de to, og hvorfor skal man velge den ene over den andre? 💪
Jeg må innrømme at jeg ikke har prøvd ut Next enda. Men fra hva jeg har lest og hørt fra andre (*kremt* sett på youtube), så brukes NextJS når det skal skje mer i real-time.
En flow chart jeg så en gang summerer det på følgende måte: Trenger du bra SEO? Hvis ikke, bruk create react app. Deretter spør du om du trenger en applikasjon som kan håndtere svært hurtig oppdaterende data? Om ja, bruk NextJS, om ikke, bruk Gatsby.
Om dette er helt dekkende er nok tvilsomt, men det er et sted å starte. Det kan også være verdt å merke seg at det er en økende kompleksitet å gå fra create react app, til Gatsby og så videre til NextJS.
#8. Tror du Gatsby kommer til å bli brukt om 5 år? ✈️
Det tror jeg absolutt.
Gatsby er helt herlig å bruke når man kommer litt inn i det og fungerer godt for sider som er relativt statiske. Gatsby passer fint inn der man ønsker å gjøre litt mer enn en wordpress-side, men ikke helt har tenkt til å lage en web-applikasjon.
Jeg har også sett talks med folk som har mye erfaring med WordPress og som foretrekker Gatsby og Sanity til samme type oppdrag, av varierende omfang.
