Jamstack: voordelen, nadelen, geschiedenis en meer

Jamstack is de moderne manier om websites en apps te bouwen. Omdat het over het algemeen betere prestaties levert dan traditionele websites. Naast andere voordelen en kostenbesparingen.

Het doel is om eerst een statische HTM-website te laden en vervolgens de site en de gebruikerservaring geleidelijk te verbeteren. Dit resulteert in supersnel ladende pagina's, die later afbeeldingen en andere dynamische inhoud kunnen laden als dat nodig is.

De Jamstack is een praktische benadering van webontwikkeling die voordelen biedt voor zowel site-eigenaren als bezoekers. Maar hoewel het een geweldige ontwikkeling is, is het nog steeds niet perfect voor alle soorten websites.

Dit bericht kijkt naar de geschiedenis en verschillende kenmerken van de Jamstack-revolutie om te ontdekken wat het voor u en uw bedrijf kan betekenen.

Een beetje geschiedenis van de Jamstack

Webservers dienden oorspronkelijk statische pagina's sinds de jaren '1980, totdat server-side scripting aan populariteit won en dynamische websites tegen het begin van de jaren 2000 de feitelijke standaard voor wed-ontwikkeling werden.

Naarmate het internet groeide, werden optimalisaties echter noodzakelijk om kosten te besparen en meer bezoekers te bereiken. Dit leidde tot het gebruik van website-caching, content-delivery-netwerken en media-optimalisaties.

Naast al deze werden personal computers krachtiger en werd steeds meer werklast verschoven naar de front-end voor de uitvoering van JavaScript. Dit leidde tot de ontwikkeling van veel nieuwe technologieën zoals: jQuery, en later naar Angular, React JS, Vue en andere JavaScript-bibliotheken.

De 3 pijlers van de Jamstack

De Jamstack dankt zijn evolutie aan drie verschillende maar complementaire technologieën, zonder welke het onmogelijk zou zijn. Deze technologieën zijn JavaScript, Markup en API's. Ze dragen de 3 initialen bij die de . vormen JAM in Jamstack; J voor javascript, A voor API's, en M voor Markup.

Hier is een nadere blik op elk van deze technologieën en wat het brengt voor het Jamstack-ecosysteem.

JavaScript – JavaScript is een client-side geïnterpreteerde scripttaal, hoewel frameworks zoals Node.js de engine nu ook beschikbaar maken voor server-side scripting. Client-side zijn betekent dat welke JavaScript-code u ook voor een website schrijft, wordt uitgevoerd nadat de pagina in de browser van een webbezoeker is geladen.

Omdat het een geïnterpreteerde taal is, betekent dit dat de code 'as-is' op de webpagina wordt geleverd en niet vooraf is gecompileerd zoals bij talen als C en C++. Alle populaire browsers ondersteunen de JavaScript-taal, hoewel er in het verleden verschillen waren in hun interpretaties. Dit was de situatie die leidde tot de ontwikkeling van frameworks zoals jQuery om voor al deze problemen te zorgen.

Tegenwoordig maken veel moderne frameworks het nog gemakkelijker om geweldige dingen te doen met JavaScript en voor minder tijd en gedoe dan je in eerste instantie nodig had. Sommige frameworks zoals Next.js en Vue bevatten functies die het ontwikkelen van een gebruikersinterface met JavaScript een fluitje van een cent maken. En dit heeft enorm bijgedragen aan de Jamstack-revolutie.
APIs – De API of Application Programming Interface is de nieuwste van deze 3 pijlers van het Jamstack-ecosysteem. Het is een technologische ontwikkeling die voortkwam uit internet, in een poging het leven van programmeurs gemakkelijker te maken.

Met API's kunt u informatie opvragen en ophalen uit een reeks webbronnen, door simpelweg het webadres of de URL van die bron te gebruiken en vast te houden aan de gespecificeerde protocollen. Het begon als een manier om met een website te communiceren zonder een traditionele browser te gebruiken, maar het is geëvolueerd.

Tegenwoordig bieden API's verschillende diensten, waaronder databankieren zoals de Firebase-service, weerdiensten, financiële diensten, boekingen, misdaadgegevens, vluchtgegevens, tekst-naar-spraakdiensten, wisselkoersconversies, enzovoort.

Deze API-ontwikkeling maakt het gemakkelijk om traditionele database-afhankelijke websites te vervangen door ontkoppelde systemen die hun informatie uit API-bronnen kunnen halen. Een Jamstack-site kan de API-gegevens laden tijdens de compilatie van statische bestanden. Of het kan een eenvoudige HTML-site laden en JavaScript gebruiken om de bron te laden die het nodig heeft wanneer het die nodig heeft.

Het is bovendien vermeldenswaard dat een API niet openbaar of extern mag zijn. U kunt elke service van uw keuze gebruiken of de uwe maken die specifiek is voor uw site. Serverloze functies zijn ook populair geworden als API-bron voor Jamstack-sites. En met goede redenen, die u hieronder zult zien.
Markup – Een opmaaktaal is elke computerconventie die tags gebruikt om de elementen in een document te definiëren. De meest populaire opmaaktaal is de HyperText Markup Language of HTML, die het grootste deel van het web gebruikt.

Het doel van opmaak in Jamstack is om de lay-out van een webpagina of app te definiëren. Dit betekent dat u items op de juiste posities plaatst, inclusief vakken, tekstgebieden, afbeeldingen, een koptekst, enzovoort. Zo'n pagina zonder scripting wordt een statische site.

U kunt een Jamstack-website echter rechtstreeks in HTML coderen of andere talen en platforms gebruiken, zoals een generator voor statische sites. Veel van deze generatoren voor statische sites accepteren HTML en markdown-talen.

Statische versus dynamische sites

De laadsnelheid van websites is belangrijk voor een goede gebruikerservaring en is daarom onderdeel geworden van Google's Core Web Vitals, die rangschikkingsfactoren zijn voor zoekresultaten. De Jamstack-manier is om een statische site zo snel mogelijk te laden en vervolgens indien nodig extra's toe te voegen, vaak met behulp van JavaScript en API's.

Het hosten van een statische site betekent ook dat uw server minder werk doet. En de besparingen zijn zo veel dat een service zoals Netlify biedt gratis hosting voor statische sites. Statische sites zijn ook gemakkelijker te maken en te implementeren dan dynamische sites.

Dynamische websites hebben echter ook bepaalde voordelen, zoals bewerkingsgemak, meer functionaliteit en functies zoals gebruikersprofielen en accounts. Dit maakt dynamische sites vaak beter voor complexere projecten. Tenminste voor nu.

Voordelen van Jamstack-sites

Jamstack-websites bieden veel voordelen ten opzichte van traditionele. En deze voordelen dragen bij aan hun groeiende populariteit. Ten tweede zijn de meeste van deze voordelen in lijn met moderne praktijken voor webontwikkeling. En dit maakt de Jamstack een moderne manier om websites en apps te ontwikkelen.

Hier zijn enkele voordelen die u kunt verwachten van het toepassen van Jamstack-principes:

Hoge laadsnelheden – Statische webpagina's laden sneller dan dynamische websites omdat de server alleen de statische bestanden hoeft te bedienen. Een dynamische site daarentegen zou eerst het server-side script moeten ontleden. Voer het vervolgens uit, roep de database op voor records en controleer andere omgevingsvariabelen voordat u het uiteindelijke HTML-bestand aan de client levert.
Laag resourcegebruik - U kunt uw statische pagina's één keer genereren en ze daarna pas weergeven. Of u kunt de pagina's elke dag, elk uur of elke minuut opnieuw genereren, afhankelijk van uw behoeften. U zult uiteindelijk minder middelen gebruiken dan een dynamische site. En dat betekent ook lagere kosten.
Betere Beveiliging – De Jamstack-architectuur biedt een kleiner aanvalsoppervlak voor kwaadwillende actoren dan dynamische websites. Dit is nog beter wanneer alle API-aanroepen worden gedaan tijdens de compilatieruns, zodat een webbezoeker geen idee heeft welke webservices en protocollen in gebruik zijn.
Gemakkelijke schaalbaarheid – Statische websites zijn gemakkelijker te schalen omdat ze veel minder bronnen gebruiken dan dynamische sites. Bovendien zijn databankieren en andere problemen met het beheer van hulpbronnen schaars of helemaal niet aanwezig.
eenvoudig onderhoud – Geen infrastructuur om te onderhouden, geen routines voor databasebeheer, geen beveiligingspatches, enzovoort.

Flexibiliteit - U kunt eenvoudig bronnen toevoegen en verwijderen. U bent niet afhankelijk van een specifieke database of scripttaal, behalve JavaScript en HTML. Verander één regel en je bent verbonden met een andere API.

Nadelen van Jamstack-sites

Jamstack-sites hebben ook hun problemen, en dit zijn de meest opvallende.

Het is nog geen volwassen technologie.
U kunt problemen tegenkomen als u dynamische functies nodig heeft.
API-afhankelijkheid kan problematisch zijn, hoewel het zeldzaam is.

Jamstack- en serverloze functies

Hoewel Jamstack-sites statische webpagina's gebruiken, zijn ze niet volledig statisch. Omdat u API- en serverloze functies kunt gebruiken om dynamische gegevens aan de site toe te voegen.

Services zoals serverloze Google-cloudfuncties, Netlify-functies en de Firebase-databaseservice maken het eenvoudig om dynamische gegevens toe te voegen aan elke Jamstack-site.

De GitHub-repository en versiebeheer

U kunt uw statische pagina's rechtstreeks hosten op een Jamstack-host zoals Netlify. Of u kunt uw ontwikkelingsbestanden hosten op een repository zoals GitHub en een host zoals Netlify er toegang toe geven en statische pagina's bouwen wanneer u maar wilt.

Behalve dat ze u een plek bieden om uw code te hosten, maken softwarerepository's het gemakkelijker om verschillende versies van uw software te beheren. U kunt dus gemakkelijk teruggaan naar een eerdere stabiele versie als u problemen met de huidige ontdekt.

GitHub maakt dit allemaal gemakkelijk voor je. Bovendien kunt u expliciet toegang geven tot uw Jamstack-host naar keuze, zoals Netlify, om toegang te krijgen tot uw nieuwe gegevens en deze te compileren wanneer u een update uitvoert.

Statische sitegeneratoren

Statische sitegeneratoren of SSG's zijn geweldige tools waarmee minder technisch onderlegde mensen dynamische websites kunnen veranderen in moderne Jamstack-sites.

Sommige SSG's zoals Eleventy of 11ty zijn ontworpen voor minimalisten, terwijl andere zoals Gatsby worden geleverd met alle toeters en bellen die je maar kunt wensen. Ze kunnen functies bieden zoals beeldverwerking, mobielvriendelijke sitelay-outs, menugenerators, automatische paging, enzovoort.

Populaire Jamstack-sitegeneratoren zijn onder meer:

Op gebruikersinterface gerichte JavaScript-frameworks

De evolutie van op gebruikersinterface gerichte JavaScript-frameworks heeft grote invloed gehad op de Jamstack-evolutie. Natuurlijk kun je altijd vanilla JavaScript gebruiken op je statische sites, maar het gebruik van een framework maakt het beter en gemakkelijker.

De meest populaire op de gebruikersinterface gerichte JavaScript-frameworks zijn onder meer:

Netlify & Jamstack Hosting

Alle Jamstack-sites hebben hosting en een service nodig Netlify biedt het gratis aan. Netlify is al heel lang betrokken bij de Jamstack-beweging en biedt een freemium-prijsmodel.

Maar in tegenstelling tot traditionele hostingscenario's bieden gratis Jamstack-hostingservices grote waarde en prestaties. Het gratis abonnement van Netlify omvat bijvoorbeeld een onbeperkt aantal sites, een uitgebreid dashboard, a CMS, serverloze functiesen automatisch vastleggen van ingediende formuliergegevens.

Andere gratis Jamstack-hostingservices zijn onder meer:

Headless Content Management Systemen

Het headless contentmanagementsysteem of CMS-concept kan verwarrend zijn voor mensen die nieuw zijn in het Jamstack-ecosysteem. Maar headless zijn betekent simpelweg dat de software niet aan een platform is gekoppeld.

Platforms zoals WordPress en Drupal worden bijvoorbeeld geleverd met contentmanagementsystemen die onlosmakelijk verbonden zijn met het platform. Dat wil zeggen, u kunt hun editor alleen gebruiken om te publiceren op het platform waarvan het deel uitmaakt.

Headless-systemen zijn niet aan een platform bevestigd. In plaats daarvan verbinden ze via API's met meerdere platforms, waardoor ze zeer flexibele tools zijn.

De meest populaire headless CMS-software die door Jamstack-sitebeheerders wordt gebruikt, zijn onder meer:

Een Jamstack-site bouwen

Een Jamstack-site met de hand bouwen is eenvoudig. Hier is hoe je het doet:

Stap 1 – Ontwerp de lay-out van uw website met HTML en CSS.
Stap 2 – Voeg extra functionaliteit toe met JavaScript.
Stap 3 – API-functies en verzoeken toevoegen.
Stap 4 – Upload uw bestanden naar uw HTML-server.

Maar de bovenstaande stappen zijn waarschijnlijk alleen opwindend voor nerds. Verschillende ontwikkelaars hebben dus verschillende tools bedacht om niet-codeerders te helpen aan de slag te gaan zonder een hoofdcodeerder te zijn.

Hier zijn de andere en eenvoudigere methoden:

Statische sitegeneratoren – Dit zijn tools zoals Gatsby die het gemakkelijk maken om van een bestaande dynamische website een statische Jamstack-site te maken. Ze hebben verschillende functionaliteiten en sommige zijn speciaal plugins voor bepaalde platforms zoals WordPress.

Design Tools – Dit zijn ontwerp-apps zoals Stackbit en Builder.io, waarmee u eenvoudig een moderne Jamstack-site kunt ontwerpen zonder te weten hoe u moet coderen. Eenvoudig ontwerpen en implementeren.

Wanneer een Jamstack-site bouwen?

Hoewel de Jamstack-architectuur misschien niet ideaal is voor bepaalde soorten websites, kunt u deze met succes gebruiken voor de volgende soorten websites:

Persoonlijke sites – Basissites die de wereld vertellen wie je bent.
Bedrijfswebsites – Bedrijfssites die adressen, producten, diensten, enzovoort bevatten.
Landingspagina's – Speciaal gemaakt om informatie van webbezoekers vast te leggen.
e-commerce winkels – Verschillende soorten sites die dingen online verkopen.
Blogs – Inhoudssites voor regelmatige updates. SSG's zullen uw WordPress-sites zelfs automatisch converteren.

Conclusie

We zijn aan het einde gekomen van dit bericht over de Jamstack en alles wat je erover moet weten. En je moet je ondertussen realiseren dat de toekomst van het web verweven is met de Jamstack-beweging.

Als webontwikkeling nieuw voor u is, moet u de Jamstack onmiddellijk omarmen. En als je een doorgewinterde old-school webontwikkelaar bent, vraag jezelf dan af of je achter wilt blijven.