Programmering

Jamstack: Den statiske webstedsrevolution, der opdaterer webudvikling

Jamstack er en stadig mere populær webudviklingsfilosofi, der sigter mod at fremskynde både webudviklingsprocessen og downloadsiden til websiden. Tegning fra devops-bevægelsen og den kontinuerlige integration / kontinuerlige levering (CI / CD) -teknikker, der er ved at blive normen i mange organisationer, opjusterer Jamstack langvarige teknikker til opbygning af interaktive websider, forskydning af load-time-kodekørsel væk fra webservere og mod JavaScript i JavaScript og eksterne tjenester, der er adgang til via API'er til applikationsprogrammering.

Hvad er Jamstack? Jamstack, defineret

Jamstack er en webapplikationsmodel baseret på tre søjler, der giver initialerne i sit navn: JavaScript, API'er, og markering. Websider til et Jamstack-websted består af standard markup-sprog, så de kan bygges og testes hvor som helst uden afhængighed af app-servere eller server-side-teknologier som Node.js. Enhver interaktiv funktionalitet leveres af standard JavaScript-kode, der udføres i browseren, hvilket foretager opkald til genanvendelige API'er via HTTPS for at få adgang til eksterne data eller enhver anden funktionalitet, der ikke kan indbygges i selve websiden.

For at forstå, hvorfor Jamstack-filosofien er revolutionerende, skal du overveje LAMP-stakken, som eksemplificerer den måde, som de fleste udviklere har tænkt på webudvikling i det meste af de sidste 15 år. LAMP står for Linux (det operativsystem, der driver de fleste webservere), Apache (serversoftwaren, der kører på disse Linux-maskiner), MySQL (databasen hvor oplysninger, som webapplikationen har brug for, gemmes) og PHP / Perl / Python (det sprog, der er skrevet på serversiden). Når du peger din browser på et LAMP-baseret websted, udfører webserveren den serversides kode, der genererer websiden i farten, og tegner data efter behov fra MySQL-databasen.

LAMP-arkitekturen muliggør oprettelse af dynamiske og interaktive websteder, men det kræver også en kraftig webserver - og jo mere trafik et websted får, jo mere computerkraft på serversiden har det brug for. Selv med en fuldt udstyret server kan det tage lang tid at opbygge og indlæse dynamiske websider. I en verden af ​​mennesker med korte opmærksomhedsomspændinger, der surfer på internettet på deres telefoner, er denne forsinkelse blevet mere og mere uacceptabel.

Jamstack blev født som en del af den "statiske web" -bevægelse, der opstod i midten af ​​2010'erne som en reaktion mod denne traditionelle model for, hvordan et websted skal fungere. For at forstå Jamstack skal du forstå nutidens teknologi bagvedstatiske websteder.

Statiske websteder, statiske stedgeneratorer og Jamstack

Hvis du skulle forklare en komplet nybegynder, hvordan internettet fungerer, kan det gå sådan her: Et eller andet sted i en webservers filsystem er der HTML-filer, der er tilgængelige via HTTP-adresser, som en webbrowser downloader og derefter fortolker for at oprette en webside . Men det er en beskrivelse af en statisk sted: Det antages, at HTML-filerne allerede eksisterer, når webbrowseren leder efter dem. Som vi allerede har set, er meget af internettet i løbet af det sidste årti blevet domineret af dynamiske websteder, der i stedet genererer HTML-filer i farten som svar på webanmodninger, ofte baseret på parametre, der sendes til webserveren via formularer eller i URL i sig selv.

I de meget tidlige dage af internettet, hvor websider altid var statiske, skrev mange webudviklere HTML-koden manuelt. Da websider blev mere komplekse, ankom værktøjer som Macromedias Dreamweaver, som kunne generere disse statiske HTML-sider programmatisk. Da den statiske webbevægelse tog fart i midten af ​​2010'erne, en ny bølge af såkaldte statiske generatorer begyndte at dukke op, inklusive Gatsby, Hugo og Jeckyll. I modsætning til WYSIWYG-værktøjer som Dreamweaver er statiske stedgeneratorer kommandolinjedrevne og designet til at blive integreret med CI / CD-processer. HTML-filer genereres af værktøjerne, ofte baseret på indhold skrevet i Markdown, og uploades automatisk til et lager til versionskontrol som GitHub. Da disse filer er markeret klar til produktion, opdateres statiske sider på livewebstedet automatisk.

En vigtig ting at huske på er, at statisk i denne sammenhæng betyder det ikke, at dette er enkle web 1.0-sider, der ikke er interaktive. Husk, disse sider kan omfatte avanceret JavaScript, der udføres i browseren og foretager API-opkald til databaser, serverfunktionalitet eller hostede serverløse funktioner. Men fordi ingen af ​​denne udførelse sker på selve webserveren, har et statisk websted ikke brug for en industriel drevet webhost komplet med en database. Mange statiske websteder er indsat på indholdsleveringsnetværk, eller CDN'er, hvor indholdet spejles på flere servere rundt om i verden for hurtigt at blive leveret til brugere overalt.

Mathieu Dionne, marketingleder hos Snipcart, beskriver de tidlige dage i denne nye verden af ​​statiske websteder i et blogindlæg og nævner, at Netlify-grundlæggerne omkring 2015 netop var kommet med udtrykket 'Jamstack' til at arbejde rundt den negative konnotation af 'statisk web.' ”Med andre ord har vi beskrevet Jamstack-processen gennem dette afsnit. Men nu skal vi kort diskutere Netlify og deres rolle i økosystemet.

Hvad er Netlify?

Netlify er et cloud computing- og webhostingfirma. Netlify-medstifter Mathias Biilmann skabte udtrykket Jamstack, og Netlify's tjenester er skræddersyet til kunder, der ønsker at opbygge websteder baseret på Jamstack-filosofien.

Netlify hævder at have revnet et specifikt problem, der havde holdt statiske steder tilbage, hvilket er ugyldiggørelse af cache. Databasedrevne dynamiske websteder spiser muligvis mange serverressourcer, men du kan være sikker på, at de viser den nyeste version af dit websted til enhver besøgende, der stopper ved. Da Jamstack-websteder ofte er hostet på de flere distribuerede servere på et CDN, er opdateringer mindre ligetil. Det kan tage alt fra et par minutter til timer for hver CDN-server at finde ud af, at dens cachelagrede version af webstedet ikke længere er gyldig. Netfliys CDN giver øjeblikkelig cache-ugyldighed for HTML-filer til at omgå dette problem.

Men Netlify er ikke den eneste hostingudbyder i Jamstack-rummet, og det har ikke nogen form for varemærke eller proprietær kontrol over begrebet. Der er en række Jamstack-hosting- og implementeringsløsninger til rådighed, og de fleste af de store cloud-udbydere kommer ind på handlingen, herunder AWS, Google Firebase og Microsoft Azure.

Jamstack CMS

Hvis du er en person, der skal beskæftige sig med et websted dagligt, ved du, at det er begyndelsen at få webstedet bygget og hostet. Du har også brug for en måde at oprette nyt indhold på og tilføje det til dit websted. Fordi de mennesker, der gør det, typisk ikke er programmører, har de brug for et brugervenligt værktøj - nemlig en indholds styrelses system, eller CMS. Traditionelle CMS'er, som WordPress, tilbyder en back-end UI, hvor du kan indtaste webstedsindhold, administrere en database, hvor dette indhold er gemt, og oprette dynamiske websider, der præsenterer det indhold som svar på browseranmodninger.

CMS'er til Jamstack-websteder fungerer forskelligt, og de kaldes generelt hovedløs. Et headless CMS tilbyder et brugergrænseflade til indtastning og styring af indhold og en database eller anden måde at gemme det på, men genererer ikke selv HTML-kode, som en browser kan parse. I stedet bruger hjemmesidens statiske HTML-sider JavaScript til at foretage opkald til CMS's API'er, og CMS returnerer indholdet i et format, som JavaScript kan omdanne til en webside.

Dette system adskiller grundigt indhold fra præsentation, hvilket naturligvis er et langvarigt ideal for programmering. Da CMS har en tilgængelig API, kan flere websider let få adgang til den. For eksempel, hvis du har bygget separate mobil-, desktop- og smartwatch-versioner af dit websted, kan alle disse versioner få adgang til det samme indhold, der er gemt i CMS.

Netlify, som du måske forventer, har deres eget tilbud i dette rum, kaldet NetlifyCMS, men der er en række andre tilbud tilgængelige; udvikler Nebojsa Radakovic nedbryder dem for dig i et blogindlæg. Der er mange up-and-comers på denne liste såvel som et meget velkendt navn. Mens vi brugte WordPress som et eksempel på et traditionelt CMS, kan WordPress køres som et headless CMS for også at drive et Jamstack-sted.

Jamstack-konference

Netlify arbejder også på at oprette et Jamstack-samfund og sponsorerer Jamstack-konferencer. Virksomheden afholdt arrangementer i New York, London og San Francisco i 2019 og var vært for en virtuel begivenhed i maj 2020. Fra dette tidspunkt kan du tilmelde dig San Francisco-begivenheden, der er planlagt til 6-7 oktober 2020, dog Coronavirus-pandemien har stadig faldkonferenceplaner i luften.

Hvis du vil have opdateringer, kan du følge konferencen på Twitter. Du kan også tjekke tidligere samtaler på Jamstack Conf YouTube-kanalen.

[Også på: De 6 bedste JavaScript IDE'er | De 10 bedste JavaScript-redaktører]

Jamstack tutorials

Ønsker du at gå dybere? Tjek disse Jamstack-selvstudier, der giver dig praktisk erfaring med at opbygge et Jamstack-sted:

  • Udvikler David Neal har en god introduktionsvejledning om at opbygge et Jamstack-sted, der starter meget simpelt og derefter bliver mere og mere kompleks.
  • Over på LogRocket-bloggen giver softwareingeniør Ogundipe Samuel et dybtgående trin-for-trin-kig på at opbygge et e-handelssted efter Jamstack-principper.
  • Netlify tilbyder en tre-timers videoundervisning, der dækker meget grund fra det grundlæggende til mere avancerede emner.

Når du har mestret de grundlæggende koncepter, der er skitseret her, er du parat til at begynde at arbejde med Jamstack-udvikling i dit professionelle liv. Glad læring!