Programmering

Jamstack: Den statiske nettstedsrevolusjonen som venter på utvikling av nettet

Jamstack er en stadig mer populær webutviklingsfilosofi som tar sikte på å øke hastigheten på både nettutviklingsprosessen og nedlastingstidene til websiden. Tegner fra devops-bevegelsen og kontinuerlig integrering / kontinuerlig levering (CI / CD) teknikker som er i ferd med å bli normen i mange organisasjoner, opparbeider Jamstack langvarige teknikker for å bygge interaktive nettsider, flytter kjøring av lastetidskode bort fra webservere og mot JavaScript i nettleseren og eksterne tjenester som er tilgjengelige via programmeringsgrensesnitt (API).

Hva er Jamstack? Jamstack, definert

Jamstack er en webapplikasjonsmodell basert på tre søyler, som gir initialene i navnet: JavaScript, APIer, og markering. Nettsider for et Jamstack-nettsted består av standard kodespråk, slik at de kan bygges og testes hvor som helst, uten avhengigheter av app-servere eller server-teknologier som Node.js. Enhver interaktiv funksjonalitet leveres av standard JavaScript-kode som kjøres i nettleseren, som ringer til gjenbrukbare API-er via HTTPS for å få tilgang til eksterne data eller annen funksjonalitet som ikke kan bygges inn på selve websiden.

For å forstå hvorfor Jamstack-filosofien er revolusjonerende, bør du vurdere LAMP-stacken, som eksemplifiserer måten de fleste utviklere har tenkt på webutvikling de fleste av de siste 15 årene. LAMP står for Linux (operativsystemet som driver de fleste webservere), Apache (serverprogramvaren som kjører på disse Linux-maskinene), MySQL (databasen der informasjonen webapplikasjonen trenger lagres), og PHP / Perl / Python (språket koden på serversiden er skrevet på). Når du peker nettleseren din mot et LAMP-basert nettsted, utfører webserveren koden på serversiden som genererer websiden i farta, og tegner data etter behov fra MySQL-databasen.

LAMP-arkitekturen tillater oppretting av dynamiske og interaktive nettsteder, men det krever også en kraftig webserver - og jo mer trafikk et nettsted får, jo mer datakraft på serveren trenger det. Selv med en fullverdig server kan det ta lang tid å bygge og laste inn dynamiske websider. I en verden av mennesker med korte oppmerksomhetsspenn som surfer på nettet på telefonene sine, har forsinkelsen blitt stadig mer uakseptabel.

Jamstack ble født som en del av "static web" -bevegelsen, som oppsto på midten av 2010-tallet som en reaksjon mot denne tradisjonelle modellen for hvordan et nettsted skal fungere. For å forstå Jamstack, må du forstå dagens teknologi bakstatiske nettsteder.

Statiske nettsteder, statiske generatorer og Jamstack

Hvis du måtte forklare en fullstendig nybegynner hvordan nettet fungerer, kan det gå omtrent slik: Et sted i en webserveres filsystem er det HTML-filer, tilgjengelige med HTTP-adresser, som en nettleser laster ned og tolker for å opprette en webside. . Men det er en beskrivelse av en statisk sted: Det forutsetter at HTML-filene allerede eksisterer når nettleseren leter etter dem. Som vi allerede har sett, har mye av nettet det siste tiåret vært dominert av dynamiske nettsteder, som i stedet genererer HTML-filer på farten som svar på nettforespørsler, ofte basert på parametere som sendes til webserveren via skjemaer eller i Selve nettadressen.

I de aller første dagene på nettet, da nettsidene alltid var statiske, skrev mange webutviklere HTML-koden for hånd. Etter hvert som nettsidene ble mer kompliserte, kom verktøy som Macromedias Dreamweaver, som kunne generere disse statiske HTML-sidene programmatisk. Da den statiske nettbevegelsen tok fart på midten av 2010-tallet, en ny bølge av såkalte statiske generatorer begynte å dukke opp, inkludert Gatsby, Hugo og Jeckyll. I motsetning til WYSIWYG-verktøy som Dreamweaver, er statiske nettstedgeneratorer kommandolinjedrevet og designet for å integreres med CI / CD-prosesser. HTML-filer genereres av verktøyene, ofte basert på innhold skrevet i Markdown, og lastes automatisk opp til et versjonskontrolllager som GitHub. Siden disse filene er merket klare for produksjon, oppdateres statiske sider på nettstedet automatisk.

En viktig ting å huske på er at statisk i denne sammenheng betyr ikke at dette er enkle web 1.0-sider som ikke er interaktive. Husk at disse sidene kan inneholde avansert JavaScript som kjøres i nettleseren og ringer API-anrop til databaser, serverfunksjonalitet eller verts serverløse funksjoner. Men fordi ingen av denne kjøringen skjer på selve webserveren, trenger ikke et statisk nettsted en industridrevet webverten komplett med en database. Mange statiske nettsteder er distribuert til innholdsleveringsnettverk, eller CDN-er, der innholdet speiles på flere servere over hele verden for å bli levert raskt til brukere hvor som helst.

Mathieu Dionne, markedsføringsleder hos Snipcart, beskriver de tidlige dagene til denne nye verdenen av statiske nettsteder i et blogginnlegg, og nevner at "Netlify-grunnleggerne ... hadde nettopp kommet opp med begrepet" Jamstack "for å jobbe rundt 2015 den negative konnotasjonen av 'statisk nett'. ”Med andre ord har vi beskrevet Jamstack-prosessen gjennom hele denne delen. Men nå må vi kort diskutere Netlify og deres rolle i økosystemet.

Hva er Netlify?

Netlify er et cloud computing- og webhotellfirma. Netlify-medstifter Mathias Biilmann skapte begrepet Jamstack, og Netlifys tjenester er skreddersydd for kunder som ønsker å bygge nettsteder basert på Jamstack-filosofien.

Netlify hevder å ha knekt et spesifikt problem som hadde holdt tilbake statiske nettsteder, altså ugyldiggjøring av hurtigbuffer. Databasedrevne dynamiske nettsteder kan spise opp mange serverressurser, men du kan være sikker på at de vil levere den nyeste versjonen av nettstedet ditt til alle besøkende som stopper innom. Siden Jamstack-nettsteder ofte er vert på de flere distribuerte serverne til et CDN, er oppdateringer mindre greie. Det kan ta alt fra noen minutter til timer for hver CDN-server å finne ut at den bufrede versjonen av nettstedet ikke lenger er gyldig. Netfliys CDN gir øyeblikkelig cache-ugyldighet for HTML-filer for å omgå dette problemet.

Men Netlify er ikke den eneste hostingleverandøren i Jamstack-området, og den har ikke noen form for varemerke eller proprietær kontroll over begrepet. Det er en rekke Jamstack hosting- og distribusjonsløsninger tilgjengelig, og de fleste av de store skyleverandørene kommer inn på handlingen, inkludert AWS, Google Firebase og Microsoft Azure.

Jamstack CMS

Hvis du er noen som må håndtere et nettsted på en daglig basis, vet du at det å få nettstedet bygget og vert er bare begynnelsen. Du trenger også en måte å lage nytt innhold og legge det til nettstedet ditt. Fordi menneskene som gjør det vanligvis ikke er programmerere, trenger de et brukervennlig verktøy - nemlig en system for innholdshåndtering, eller CMS. Tradisjonelle CMSer, som WordPress, tilbyr et back-end UI der du kan legge inn nettstedinnhold, administrere en database der innholdet er lagret, og bygge dynamiske websider som presenterer innholdet som svar på nettleserforespørsler.

CMSer for Jamstack-nettsteder fungerer annerledes, og de blir vanligvis referert til som hodeløs. Et hodeløst CMS tilbyr et brukergrensesnitt for å legge inn og administrere innhold og en database eller andre måter å lagre det på, men genererer ikke selv HTML-kode for en nettleser å analysere. I stedet bruker nettstedets statiske HTML-sider JavaScript for å ringe til CMSs API-er, og CMS returnerer innholdet i et format som JavaScript kan bli til en webside.

Dette systemet skiller grundig innhold fra presentasjon, som selvfølgelig er et langvarig ideal for programmering. Fordi CMS har en tilgjengelig API, kan flere nettsider enkelt få tilgang til den. For eksempel, hvis du har laget separate mobil-, stasjonære og smartklokkeversjoner av nettstedet ditt, kan alle disse versjonene få tilgang til det samme innholdet som er lagret i CMS.

Netlify, som du kanskje forventer, har sitt eget tilbud i dette området, kalt NetlifyCMS, men det er en rekke andre tilbud tilgjengelig; utvikler Nebojsa Radakovic bryter dem ned for deg i et blogginnlegg. Det er mange oppegående på den listen, så vel som et veldig kjent navn. Mens vi brukte WordPress som et eksempel på et tradisjonelt CMS, kan WordPress kjøres som et hodeløst CMS for å drive et Jamstack-nettsted også.

Jamstack-konferanse

Netlify jobber også med å lage et Jamstack-fellesskap og sponser Jamstack-konferanser. Selskapet holdt arrangementer i New York, London og San Francisco i 2019, og var vert for et virtuelt arrangement i mai 2020. I skrivende stund kan du registrere deg for San Francisco-arrangementet som er planlagt til 6-7 oktober 2020, skjønt coronaviruspandemien har fremdeles høstkonferanseplaner oppe i luften.

Hvis du vil ha oppdateringer, kan du følge konferansen på Twitter. Du kan også sjekke ut tidligere samtaler på Jamstack Conf YouTube-kanalen.

[Også på: De 6 beste JavaScript IDEene De 10 beste JavaScript-redigererne]

Jamstack tutorials

Ønsker du å gå dypere? Ta en titt på disse Jamstack-opplæringene som gir deg praktisk erfaring med å bygge et Jamstack-nettsted:

  • Utvikler David Neal har en god introduksjonsveiledning for å bygge et Jamstack-nettsted, og starte veldig enkelt og deretter bli mer og mer kompleks.
  • Over på LogRocket-bloggen, gir programvareingeniør Ogundipe Samuel en grundig, trinnvis titt på å bygge et e-handelssted på Jamstack-prinsippene.
  • Netlify tilbyr en tre-pluss timers videoopplæring som dekker mye grunn fra det grunnleggende til mer avanserte emner.

Når du har mestret de grunnleggende konseptene som er skissert her, vil du være forberedt på å begynne å jobbe med Jamstack-utvikling i ditt yrkesliv. Glad læring!

$config[zx-auto] not found$config[zx-overlay] not found