En introduktion til JAMstack: arkitekturen på det moderne web

Jeg er sikker på, at du har stødt på ordet JAMstack før, men du har måske ikke forstået, hvad det virkelig betød. Jeg har også set dette ord før, men var ligeglad med at tjekke det, før Egwuenu Gift organiserede JAMstack Lagos. Derefter indså jeg, at jeg allerede har bygget JAMstack-applikationer.

JAMstack er en moderne webudviklingsarkitektur. Det er ikke et programmeringssprog eller nogen form for værktøj. Det er mere en webudviklingspraksis, der sigter mod at håndhæve bedre ydeevne, højere sikkerhed, lavere omkostninger til skalering og bedre udvikleroplevelse.

I denne artikel vil jeg introducere dig til, hvad JAMstack betyder, hvorfor du skal passe, bedste praksis og hvordan du kommer i gang. ?

Introduktion

Ifølge den officielle JAMstack-dokumentation,

JAMstack er en moderne webudviklingsarkitektur baseret på JavaScript på klientsiden, genanvendelige API'er og forudbygget markering. Når vi taler om "The Stack", taler vi ikke længere om operativsystemer, specifikke webservere, backend-programmeringssprog eller databaser. JAMstack handler ikke om specifikke teknologier. Det er en ny måde at opbygge websteder og apps på, der leverer bedre ydeevne, højere sikkerhed, lavere skaleringsomkostninger og en bedre udvikleroplevelse.

JAMstack er en vigtig tendens inden for webudvikling, der er skabt af Mathias Biilman, administrerende direktør og medstifter af Netlify.

Okay, chill! Hvad er JAMstack?

Du er muligvis stødt på specifikke udtryk som MEAN stack og MERN stack. Dette er blot udtryk, der bruges til at klassificere eller gruppere nogle bestemte teknologier med det formål at nå et bestemt mål.

JAMstack står her for

J avaScript

En PI

M arkup

Stakke er generelt kun en kombination af flere teknologier, der bruges til at oprette en web- eller mobilapplikation. Så JAMstack er kombinationen af ​​JavaScript, API'er og markering. Temmelig interessant, ikke?

JAMstack-projekter er ikke afhængige af serversides kode - de kan distribueres i stedet for at stole på en server. Serveres direkte fra et CDN, JAMstack-apps låser op for hastighed, ydeevne og bedre brugeroplevelse.

Nyttige vilkår

Jeg bruger ofte disse udtryk i denne artikel, og jeg tænkte, at du skulle kende deres betydning (hvis du ikke allerede gør det):

  • API er forkortelsen for Application Programming Interface, som er en softwareformidler, der gør det muligt for to applikationer at tale med hinanden.
  • CDN (indholdsleveringsnetværk) er et system med distribuerede servere (netværk), der leverer sider og andet webindhold til en bruger, baseret på brugerens geografiske placering, websidens oprindelse og serveren til indholdslevering.
  • En server er en computer designet til at behandle anmodninger og levere data til en anden computer over internettet eller et lokalt netværk.
  • En database er en samling information, der er organiseret, så den let kan tilgås, administreres og opdateres

Hvorfor JAMstack?

Traditionelle websteder eller CMS-sider (f.eks. WordPress, Drupal osv.) Er stærkt afhængige af servere, plugins og databaser. Men JAMstack kan indlæse noget JavaScript, der modtager data fra en API, der betjener filer fra et CDN og markering genereret ved hjælp af en statisk stedgenerator under implementeringstiden.

Det lyder sejt, ikke ?!

JAMstack er hurtig

Når det kommer til at minimere belastningstiden, slår intet forudbyggede filer, der serveres over et CDN. JAMstack-websteder er superhurtige, fordi HTML allerede genereres under implementeringstid og kun serveres via CDN uden interferens eller backendforsinkelser.

JAMstack er meget sikret

Alt fungerer via en API, og der er derfor ingen database- eller sikkerhedsbrud. Med processer på serversiden, der er abstraheret i mikrotjeneste-API'er, reduceres overfladearealer for angreb, så dit websted bliver meget sikkert.

JAMstack er billigere og lettere at skalere

JAMstack-sider indeholder kun få filer med minimale størrelser, der kan serveres hvor som helst. Skalering er et spørgsmål om at betjene disse filer et andet sted eller via CDN'er.

JAMstack bedste praksis

  • Brug CDN til at distribuere dine filer i stedet for servere
  • Installation og bidrag til dit projekt skal være let og mindre kompliceret. Brug værktøjer som npm og Git for at sikre standard og hurtigere opsætning.
  • Brug build-værktøjer og gør dit projekt kompatibelt med alle browsere (f.eks. Babel, Browserify, Webpack osv.)
  • Sørg for, at dit projekt er op til webstandarder og meget tilgængeligt
  • Sørg for, at din byggeproces er automatiseret for at reducere stress.
  • Gør din implementeringsproces automatisk, du kan bruge platforme som Netlify til at gøre dette

Hvordan kommer jeg i gang?

Du kan bruge nogle allerede byggede teknologier til at opbygge JAMstack-applikationer på få minutter. Her er et par:

  • Gatsby : Gatsby er en gratis og open source-ramme baseret på React, der hjælper udviklere med at opbygge brændende hurtige hjemmesider og apps
  • NuxtJS : NuxtJS er Vue.js Framework til universelle applikationer, statiske genererede applikationer, applikationer med en enkelt side, progressive webapps og desktop apps
  • Hugo : Hugo er verdens hurtigste ramme til opbygning af websteder. Det er en af ​​de mest populære open source statiske generatorer. Med sin fantastiske hastighed og fleksibilitet gør Hugo det sjovt igen at opbygge websteder.
  • Netlify CMS : Netlify CMS er en open source-indholdsstyring til din Git-workflow, som kan bruges med enhver statisk generator til et hurtigere og mere fleksibelt webprojekt
  • Contentful : Contentful er et smartere og problemfrit indholdsstyringssystem, der giver redaktører og udviklere et samlet indhold og derved forbedrer samarbejdet og sikrer, at digitale produkter sendes hurtigere på markedet.
  • Svelte : Svelte er en radikal ny tilgang til opbygning af brugergrænseflader. Mens traditionelle rammer som React og Vue gør størstedelen af ​​deres arbejde i browseren , skifter Svelte det arbejde til et kompileringstrin, der sker, når du bygger din app.

og mange flere. . .

Nyttige ressourcer

  • JAMstack WTF
  • Sådan opbygges et JAMstack-websted
  • Hvad er JAMstack, og hvorfor skal du prøve det
  • Et JAMstack-klar CMS
  • JAMstack for klienter: Om fordele og statisk websteds-CMS
  • Bliv statisk: 5 grunde til at prøve JAMstack på dit næste projekt
  • Statiske websteder + JAMstack = ❤

Find flere ressourcer her

Konklusion

JAMstack blev opfundet som en måde at sætte en nomenklatur på den nye måde at opbygge websteder og apps på, der leverer bedre ydeevne, højere sikkerhed, lavere omkostninger til skalering og en bedre udvikleroplevelse.

JAMstack handler ikke om specifikke teknologier, det er en moderne webudviklingsarkitektur baseret på klientside-JavaScript, genanvendelige API'er og forudbygget markering.

Deltag i JAMstack-samfundet for at lære mere og få flere opdateringer.

PS: Denne artikel blev først offentliggjort på min blog her