Basisprincipes van JAM-stack ΒΌ

Webontwikkeling is niet meer hetzelfde als tien jaar geleden. Hoewel dynamische CMS-platforms zoals WordPress of Drupal het leven van gebruikers kunnen vergemakkelijken, gaat dit ook gepaard met minder prestaties en minder beveiliging.

Hier komt JAM om de hoek kijken, wat staat voor JavaScript, API's en Markups. Een framework dat ontwikkelaars heeft geholpen om de manier waarop websites worden gebouwd te revolutioneren. Het implementeren van een website met JAM is niet alleen eenvoudiger en sneller, maar kost ook veel minder. In deze post gaan we bekijken waarom JAMstack tegenwoordig enorm aan populariteit wint. Daarnaast duiken we dieper in op hoe JAMstack werkt en bekijken we hoe anders het is dan een traditionele stack.

Development
15 mei 2020
Martijn van der Put

Wat is JAMstack?

JAMstack is een webontwikkelingsarchitectuur die gebaseerd is op client-side JavaScript, herbruikbare API’s en vooraf gebouwde Markup. Het gebruik van JAMstack voor het ontwikkelen van een website geeft de mogelijkheid om te profiteren van de voordelen van een statische website, zoals betere prestaties en beveiliging, maar tegelijkertijd dynamiek te integreren. Dit alles zonder dat de website wordt vertraagd door een database en een server. Een typische JAMstack-website bestaat doorgaans uit drie onderdelen:

  1. JavaScript: Dit wordt gebruikt om alle gegevens naar je website te halen en de dynamische functionaliteiten van de website te beheren. Het draait meestal aan de clientzijde.
  2. API’s: De API bepaalt hoe je toegang krijgt tot de gegevens. Ze vormen een herbruikbare abstractie van wat aanwezig was op de server in een traditioneel model.
  3. Markup: Ze worden gegenereerd uit de bronbestanden met behulp van een statische sitegenerator of een buildtool. In eenvoudige bewoordingen wordt Markup gebruikt om inhoud te creëren voor statische websites die vervolgens worden geserveerd als een API-eindpunt.


Hoe werkt JAMstack? 

Een JAMstack-framework wordt veel gebruikt voor het bouwen van statische websites. Om ze te bouwen met behulp van JAMstack, gebruiken we een Static Site Generator (SSG). Je kunt op verschillende manieren inhoud toevoegen aan deze statische websites. Je kunt een headless CMS gebruiken of inhoud pushen met behulp van Git en markdown. De inhoud van een van deze methoden wordt ontvangen door de SSG. In de SSG wordt de code omgezet in een statische site zodra de inhoud is opgehaald.

Een statische site bestaat typisch uit een aantal HTML-bestanden en afbeeldingen. Hierdoor kunnen ze gemakkelijk worden gekopieerd naar een Content Delivery Network (CDN) om meerdere versies van de site te genereren die zijn opgeslagen in de datacenters van de CDN op verschillende geografische locaties. Omdat er geen afhankelijkheid is van servers en de sites zijn opgeslagen in verschillende datacenters over de hele wereld, worden de JAMstack-sites met bliksemsnelle snelheden geleverd vanuit het dichtstbijzijnde datacenter bij je locatie. 

De browser serveert de statische bestanden die het ontvangt van de CDN en ook de Markup die wordt gegenereerd door de statische sitegenerator tijdens de implementatietijd. Eventuele dynamische componenten in jouw statische websites worden beheerd met behulp van een API. Sterker nog, de toegang tot de gehele database wordt afgehandeld door de API's omdat er geen daadwerkelijke database is in een JAMstack-website. De API's kunnen worden aangeroepen binnen je JavaScript-code.



Hoe verschilt JAMstack van het traditionele model? 

In het traditionele proces zijn de bouw- en hostingmechanismen gekoppeld. Dus telkens wanneer een gebruiker een pagina opvraagt, wordt het verzoek verwerkt en wordt er een reactie gegenereerd na interactie met de database, webserver, app-servers en de backend-code. Als reactie wordt de volledige HTML-pagina aan de browser geleverd. Dit betekent een langzamere laadtijd en maakt het systeem ook kwetsbaar voor bedreigingen vanwege de vele componenten (zoals servers, databases, enz.) in de architectuur.

In de JAMstack-aanpak zijn de bouw- en hostingprocessen losgekoppeld. Dus telkens wanneer een gebruiker een pagina opvraagt, is de pagina al vooraf gebouwd en direct beschikbaar in de CDN. De Static Site Generator wordt gebruikt om de statische sites te bouwen en de gebouwde bestanden worden naar de CDN verzonden. Ten slotte wordt de vooraf gebouwde site aan de browser geleverd. Dit betekent verbeterde snelheid en verminderde kans op beveiligingsaanvallen omdat er geen interactie is met de servers.



Wat zijn de voordelen van JAMstack? 

  • Hoge snelheid: Allereerst worden de toepassingen van JAMstack rechtstreeks als statische bestanden geserveerd vanuit een CDN. Dit betekent dat uw toepassing snel zal laden. Geen verzoeken meer naar de server voor een reactie waarbij de server eerst de hele HTML-pagina moet opbouwen voordat deze antwoordt.
  • Lagere kosten: Er is geen twijfel dat JAMstack-sites goedkoper zullen zijn dan reguliere sites, aangezien er geen server is. Bij JAMstack-toepassingen zijn er geen kosten voor serveronderhoud. Ook het hosten van statische assets is zeker goedkoper omdat er geen server-side configuraties hoeven te worden geïmplementeerd.
  • Schaalbaarheid: Omdat je bestanden serveert vanuit een statische hosting zoals een CDN, is er een mogelijkheid van oneindige schaalbaarheid. Zelfs als je website een ongekende toename van het aantal bezoekers heeft, zal de CDN dit compenseren zonder de prestaties te beïnvloeden.
  • Beveiliging: Een van de grootste voordelen van de JAMstack-architectuur is de beveiliging. Omdat het aantal systemen dat met elkaar communiceert minimaal is, is het aanvalsoppervlak kleiner. Er zijn geen kwetsbaarheden als gevolg van databases, servers of plugins. In plaats daarvan wordt aanbevolen om je alleen te richten op het beveiligen van je privé-inhoud en ervoor te zorgen dat de privégegevens van gebruikers niet in gevaar komen.
  • Geautomatiseerde workflow: De workflow van JAMstack is zeer geautomatiseerd dankzij het gebruik van statische sitegeneratoren en buildtools. De implementatie gebeurt via een eenvoudige Git Push op basis van het principe van Continuous Integration Continuous Deployment.

Wat zijn de beperkingen van JAMstack?

  • Hoewel JAMstack een scala aan voordelen biedt voor ontwikkelaars en gebruikers, is het niet ideaal voor webprojecten die frequente en real-time updates vereisen en die een aanzienlijk aantal dynamische functies hebben waar gebruikers mee kunnen interacteren.
  • Een ander nadeel van het gebruik van JAMstack is dat je alleen componenten zoals formulieren, opmerkingen en galerijen kunt toevoegen met behulp van oplossingen van derden. Dit betekent een extra last van het beheren van deze externe providers.
  • Ten slotte kunnen wijzigingen in het ontwerp van de website alleen worden beheerd door de ontwikkelaar en kunnen ze niet door jou worden beheerd, tenzij je zelf een ontwikkelaar bent.


Conclusie

In deze post hebben we de basisprincipes van JAMstack gezien, hoe JAMstack werkt en hoe het verschilt van een traditionele technologiestack. We hebben ook de vele voordelen ervan gezien, samen met een opmerking over het ideale doelpubliek voor dit framework. JAMstack is omarmd door veel bedrijven over de hele wereld vanwege de lage kosten en het gemak van ontwikkeling die ervaren wordt door ontwikkelaars.

In dit artikel kijken we naar de beste JavaScript-frameworks die beschikbaar zijn en ideaal voor het bouwen van je volgende websie in het JAMstack-framework.


Wil je meer informatie? Neem dan contact op.

Cookies
Deze site gebruikt geanonimiseerde cookies. Klik op "Akkoord" als je akkoord gaat met het gebruik van cookies, of klik op "Aanpassen" om je voorkeuren te bepalen.
Deze site gebruikt geanonimiseerde cookies.