ShareValue | De JAMstack: wat is het en wat levert het op?

De JAMstack: wat is het en wat levert het op?

Een nieuw fenomeen binnen de Front-End-wereld de laatste tijd, is de opkomst van de JAMstack. En hoewel dit waarschijnlijk klinkt als een stapel boterhammen met jam, is het in werkelijkheid een fantastische manier om Front-End applicaties in elkaar te zetten. In tegenstelling tot veel andere trends binnen de Front-End wereld betreft dit een methode en niet zozeer een techniek.

Wat is een JAMstack?

De JAM in JAMstack is een afkorting die staat voor:

  • JavaScript – dit gedeelte draagt zorg voor het interactieve gedeelte van een site of applicatie: eigenlijk alles wat met een modern JavaScript framework kan valt in deze categorie
  • API’s - oftewel een “Application Programming Interface”. API’s maken het mogelijk om te communiceren met externe systemen of services 
  • Markup – de markup (bekend van de M uit HTML) staat op de opmaak van een pagina. Binnen JAMstack wordt hier meestal de te templates mee bedoeld die via JavaScript gevuld worden met content 

 

Dit stelt Front-End Developers in staat om in betrekkelijk korte tijd een project op te zetten, zonder dat hij of zij hoeft te wachten op een Back-End om te communiceren. 
Ik leg het uit aan de hand van een aantal schema’s: 

schema JAMstack

Zoals te zien is in de modellen, is de JAMstack veel platter dan een traditionele stack. Dit komt doordat de meeste lagen geabstraheerd zijn in losse calls, waardoor er niet met één Back-End wordt gecommuniceerd, maar middels meerdere software-as-a-service oplossingen. 

Wacht, meerdere connecties is sneller dan één ouderwetse architectuur? 

Ja, er is een verschil tussen de laadtijden bij render, en bij de laadtijden bij compiling

Doordat alle verschillende onderdelen allemaal gegenereerd worden én worden geserveerd van een CDN, komen alle onderdelen veel sneller binnen. 

Voorbeeld: JAMdemo

Ik heb een demo gebouwd in GatsbyJS en React met Sanity als Content Management System en Netlify als CDN (Content Delivery Network). Dit geeft het volgende schema:

jamstack onderdelen 

De J van JavaScript

Mijn startpunt is GatsbyJS; een Static site generator die gebouwd is op ReactJS. Met Gatsby kun je websites en applicaties bouwen waarbij de content overal vandaan kan komen: dit kunnen markdown files zijn in een map binnen je project, maar ook content die via API’s kunnen worden ontsloten. Dat laatste is waar ik voor gekozen heb voor mijn demo.

De A van API’s

De content schrijf ik in Sanity, een Headless CMS (oftewel een CMS zonder voorkant). Bij Sanity kun je een account aanmaken, en vervolgens je eigen data-model opzetten via een interface. Uiteraard zijn er ook tal van start-templates beschikbaar. Zodra je je content geschreven hebt, kunnen we Gatsby en Sanity aan elkaar knopen.

De M van Markup

De markup in mijn demo komt uit Gatsby; Hierin bouw je de templates die gevuld worden met de content uit Sanity.

Op deze manier was ik in staat om in korte tijd een site te bouwen. 

Versiebeheer en Continuous Deployment

Uiteraard is er versiebeheer toegepast voor dit project. Het staat op GitHub. En elke keer als er nieuwe code wordt weggeschreven naar de Github repo, wordt het project gebouwd en gedeployed door Netlify (de CDN en Host van dit project).

De demo site staat live op deze locatie: https://jams-jams-jams.netlify.com/

demo JAMstack

 

Conclusie

De JAMstack biedt veel nieuwe mogelijkheden. Door een kortere time-to-market en de mogelijkheid, en het combineren van diverse services, biedt dit veel kansen voor bijvoorbeeld ontwikkelteams met minder of geen Back-End capaciteit.

De Front-Enders bij ShareValue vinden de JAMstack een mooie nieuwe ontwikkeling die we graag verder onderzoeken. Zo gaan meerdere Developers het aankomende JAMstack_conf 2019 in London bijwonen, om zo nog meer te weten te komen over deze nieuwe manier van bouwen. Kan Johan of een van zijn Front-End-collega's jou helpen bij het opzetten van jouw JAMstack-oplossing? Laat het ons weten, we helpen graag!

 

04-07-2019 | Johan

Vond je dit een interessant bericht? Deel het!

© ShareValue 2019