Selv om etablerte frontendrammeverk som Next.js for React og Nuxt for Vue dominerer, har det kommet mange utfordrere de siste par årene. Da vi i forbindelse med den siste State of JS-undersøkelsen spurte norske eksperter om hvilke nye rammeverk de hadde tro på, var det flere som trakk frem det forholdsvis nye Astro-rammeverket.
Astro står også øverst på listen over hvilke rammeverk utviklere som har svart på State of JS har lyst til å lære seg.
Men hva er Astro – og er det egentlig noe å bry seg om? Vi spurte Stian Westvig, som er en av de mest erfarne frontendutviklerne i konsulentselskapet Bouvet.
Stian, hvordan ville du forklart Astro for en fersk utvikler?
Astro gir deg superkrefter til å utvikle websider!
For utviklere er det utrolig enkelt å bruke og du kan overføre kunnskapene dine fra React, Svelte, Vue eller andre rammeverk. Sluttbrukerne får lynraske nettsider som drikker lite batteri. Det er vinn-vinn for alle parter.
«I utgangspunktet er Astro et verktøy som lar deg generere statiske nettsider. Ganske likt som Gatsby og Next.js.»
I utgangspunktet er Astro et verktøy som lar deg generere statiske nettsider. Ganske likt som Gatsby og Next.js. Først lager du maler med komponenter fra ditt favorittrammeverk. Så samler du alt innholdet fra for eksempel markdown-filer, bilder eller artikler fra CMS .
Når du er klar så kombinerer Astro disse og resultatet blir et komplett nettsted som består av HTML-filer med fungerende lenker mellom seg. Da er du klar for å publisere websidene dine på nett via S3 bucket, Github Pages eller en annen webserver.
Hvis du trenger noe mer enn dette så er Astro lett å utvide med integrasjoner.
State of JS 2022: – Det er ikke sikkert React har alle svarene
Hva tror du er årsaken til den store interessen for Astro?
Det er lett å bli overveldet av alle verktøyene og konseptene innen webutvikling i 2023. Jeg tror Astro appellerer til utviklere fordi det fokuserer på å forenkle.
For eksempel når du skal installere integrasjoner til Astro så vil den også foreslå endringer i config filer slik at du slipper å tenke på dette. Det føles godt når verktøyene dine ikke står i veien for deg, men heller hjelper deg videre.
«Astro appellerer til utviklere fordi det fokuserer på å forenkle.»
For å skrive maler så kan du bruke mange av de populære JavaScript-rammeverkene. Du kan til og med kombinere komponenter fra for eksempel Vue og React hvis du trenger det.
Jeg tror dette fokuset på fleksibilitet og brukervennlighet er Astros største fordeler fremfor andre React-baserte rammeverk som Next.js.
Er det noe Astro ikke egner seg til?
Hvis du skal lage en single page application (SPA) så tenker jeg Astro ikke er førstevalget.
Det er også greit å være bevist på at dette er fersk teknologi og kanskje man ikke skal bygge den mest virksomhetskritiske løsningen i Astro riktig ennå.
Derfor velger de Rust: - JavaScript brukte minutter, Rust brukte sekunder
Astro snakker om "Island Architecture" for bedre ytelse. Hvordan fungerer det?
I utgangspunktet vil Astro lage nettsider som ikke inneholder noe JavaScript. Selv om du bruker React eller Vue for å kode maler så blir dette til HTML når du bygger nettstedet ditt. Disse komponentene vil ikke være interaktive for brukeren i nettleseren. Alt av oppførsel blir skrellet bort. Vi kan se på dette som “havet” i metaforen.
Hvis du trenger at en komponent skal være interaktiv i nettleseren så kan du slå på dette per komponent.
Disse blir da rendret av JavaScript og vil oppføre seg akkurat som forventet. Vi kan se på disse komponentene små “øyer” av interaktivitet. En fin mulighet med disse “øyene” er at vi kan velge å utsette rendring til senere. For eksempel så kan vi rendre et kommentarfelt først når brukeren har scrollet ned til det.
Dette er både smart og effektivt! Det vi oppnår er bedre ytelse pluss at vi beholder fleksibilitet.
«Vi kan se på disse komponentene små “øyer” av interaktivitet.»
Hva er det som gjør at nettsider bygget i Astro er så kjappe?
Når vi bygger nettsider i React så er det vanlig at all koden samles i en stor JavaScript-bundle som lastes ned via en HTML-side som bare er et tomt skall. Da må hver klient vente på nedlastingen og så utføre koden for å beregne brukergrensesnittet.
En mer effektiv nettside vil være rendret på webserveren. Da får klienten ferdig HTML som er lynraskt å vise i nettleseren, men vi må fortsatt vente på at webserveren utfører koden på sin side.
Astro er enda mer effektiv enn dette ved å generere alle sidene på forhånd.
Hvis du trenger noe mer enn statisk innhold så kan du utvide med en webserver. Da kan vi gi tilpasset innhold til hver request. For eksempel så kan vi lage en nettbutikk eller tilby et API.
Er det vanskelig å lære seg Astro?
Det er veldig enkelt å komme i gang.
Jeg anbefaler at du starter med å se en 100 sekunders intro her.
Hvis det virker interessant så finner du alle detaljene i den offisielle dokumentasjonen.
