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 binnen 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 worden hier meestal de 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:
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 rendering en bij de laadtijden bij compiling:
Doordat alle verschillende onderdelen 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:
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/
Conclusie
De JAMstack biedt veel nieuwe mogelijkheden. Door een kortere time-to-market 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!
Heb je vragen over dit onderwerp of zou je één van onze experts willen inhuren voor een vergelijkbare opdracht?
Lees ook onze andere berichten
Heb je een Microsoft Expert nodig?
