De JAM-stack, vaak gestileerd als Jamstack of JAMStack, verwijst naar het gebruik van JavaScript, API's en Markup om klantgerichte websites en applicaties te ontwikkelen. Een systeem gebaseerd op de Jamstack zal al zijn logica op de client draaien, waardoor componenten aan de serverzijde worden geëlimineerd.
De term is bedacht door Netlify en beschrijft een benadering voor webontwikkeling die hogere prestaties, betere beveiliging en een verbeterde ontwikkelaarservaring. In plaats van een server round-trip te maken bij elke pagina die wordt geladen, zijn Jamstack-sites zelfvoorzienend in de browser.
Gebruik statische sites de Jamstack?
Statische sites die zijn gebouwd met alleen HTML, CSS en JavaScript zijn inherent client-side zonder backend-programmering. Op deze manier voldoen ze aan de criteria van de Jamstack.
Jamstack gaat echter verder dan eenvoudige websites en blogs. Terwijl statische sites alleen de “markup” aspect, misschien met een beetje JavaScript, kan een Jamstack-app nog steeds een backend en een permanente gegevensopslag hebben.
Het verschil met traditionele webapplicaties zit hem in de manier waarop gegevens de winkel bereiken. In een verouderd systeem hebt u mogelijk een HTML-formulier waarmee records in een SQL-database worden gemaakt wanneer u de pagina verzendt. U heeft een aangepaste backend-stack met ondersteunende infrastructuur nodig.
Advertentie
Een Jamstack-applicatie vermindert de complexiteit aan de serverzijde door gegevens via API's te verzenden. U kunt nog steeds uw eigen backend implementeren, maar het is ook gebruikelijk om een gehoste oplossing van derden te gebruiken, zoals Netlify of Google's Firebase. De enige infrastructuur die u nu nodig heeft, is een basiswebserver om uw HTML en JavaScript aan de browser van de gebruiker te leveren.
De belangrijkste componenten
< p>Hier is een samenvatting van de drie samenstellende componenten van de Jamstack:
-
- JavaScript – De hele ervaring wordt mogelijk gemaakt door JavaScript in de browser van de gebruiker. Je kunt elk framework gebruiken dat je wilt, of je nu de voorkeur geeft aan React, Vue, Angular of je eigen vanilla-oplossing.
- API's< /sterk>– Gegevens stromen in en uit de browser van de gebruiker via API's. Als een formulier moet worden ingediend, moeten de invoerwaarden worden vastgelegd door JavaScript en naar uw backend of een service van derden worden verzonden. Dit verbetert de gebruikerservaring doordat u laadspinners en voortgangsbalken kunt weergeven wanneer gegevens worden opgehaald.
- Markup– Inhoud wordt gemaakt op basis van voor mensen leesbare opmaakformaten zoals HTML en Markdown. Deze kunnen as-is aan de browser worden aangeboden om door JavaScript te worden geparseerd. Het is niet nodig om een ingewikkeld CMS te hosten om inhoud te maken en te bewerken. U voegt een nieuwe blogpost toe door een Markdown-bestand te schrijven en dit toe te voegen aan de bronbeheerrepository van uw project.
De algemene aanpak zorgt ervoor dat opmaak en JavaScript in de gebruikersbrowser van uw webserver. Het JavaScript bemiddelt vervolgens tussen uw gebruiker en uw backend-opslag-API's om eventuele andere gegevensinteracties die u nodig heeft te vergemakkelijken.
Een soepelere ontwikkelaarservaring
Door de Jamstack te gebruiken, kunt u zich concentreren op het leveren van functionaliteit en het verbeteren van de gebruikerservaring. U hoeft geen tijd te besteden aan het configureren of onderhouden van dure backend-infrastructuur. In plaats daarvan kunt u platform-as-a-service API's gebruiken om de gegevens van uw app op te halen en op te slaan.
Jamstack past goed bij op Git gebaseerde ontwikkelings- en implementatieworkflows. Omdat je stack eigenlijk gewoon een webserver is, kun je alles als een tekstbestand in je repository weergeven. Met pijplijnen voor continue levering kunt u updates snel verzenden, zonder servers opnieuw in te richten.
Meestal zult u geen infrastructuurcomponenten zelf hosten. Jamstack-systemen worden gewoonlijk rechtstreeks geïmplementeerd op een statische bestandshost zoals Netlify, Firebase, GitHub Pages of zelfs een gewone S3-bucket. U kunt uw toepassing ook in een container plaatsen met Docker en deze in een Kubernetes-cluster starten.
Hoe dan ook, u kopieert niet handmatig bestanden of wijzigt de serverinstellingen – je schrijft code en merget in je hoofdbranch om te implementeren. Een laatste onderdeel is meestal een CDN zoals Cloudflare dat voor uw webserveroplossing zit en inhoud in de cache opslaat om de prestaties voor eindgebruikers verder te verbeteren.
Ontkoppelde componenten
< p>Met Jamstack kunt u de afzonderlijke componenten van uw applicatie ontkoppelen. In een traditionele CMS-gestuurde website leven uw code, inhoud en stijlen samen in één systeem. Je hebt het volledige CMS nodig om een enkele functie te kunnen vervullen.
Advertentie
Het gebruik van de Jamstack scheidt deze componenten volledig. Uw webserver bedient de code terwijl externe platformaanbieders uw gegevens verwerken. Dit geeft je meer flexibiliteit om delen van je stapel uit te wisselen als je vereisten veranderen.
De eindgebruiker profiteert ook van een meer veerkrachtige ervaring. Zelfs als de gegevensopslag uitvalt, kunt u nog steeds uw kernopmaak en JavaScript gebruiken om een juiste foutpagina weer te geven. Laadtijden zijn sneller omdat de browser alleen code ophaalt, geen gegevens, bij het eerste contact met uw server.
Een belangrijk verschil in vergelijking met door servers gegenereerde benaderingen is dat Jamstack-sites altijd vooraf zijn gebouwd. Je bedient volledig statische activa, in plaats van code en gegevens te combineren bij elk verzoek dat de server ontvangt. Uw buildproces voert de compilatiestap eenmaal per implementatie uit, waarbij de opmaak wordt gemaakt die uw webserver naar browsers verzendt. Dit verhoogt de efficiëntie en prestaties.
De nadelen
Het belangrijkste nadeel van Jamstack kan hetzelfde op code gebaseerde updatemodel zijn dat het vaak zo aantrekkelijk maakt. Het is vaak moeilijker voor auteurs en redacteuren van inhoud om mee te doen, omdat ze meestal moeten leren om opmaak in HTML of Markdown te schrijven. Dit kan ontmoedigend zijn voor niet-technische schrijvers die bekend zijn met een grafische WYSIWYG-ervaring.
Een andere beperking is uw inherente afhankelijkheid van platforms van derden. De Jamstack moedigt het gebruik aan van externe API's en hostingproviders die van de ene op de andere dag zouden kunnen verdwijnen of hun aanbod zouden kunnen veranderen. Hoewel het runnen van uw eigen infrastructuur gepaard gaat met onderhoudsproblemen, geeft het u ook de zekerheid dat uw stack tot ver in de toekomst functioneel blijft.
Advertentie
Het is ook mogelijk om de Jamstack te ontgroeien. Het implementeren van zware dynamische functies kan problemen veroorzaken als het platform dat u gebruikt niet aan uw vereisten kan voldoen. U kunt halverwege de levensduur van uw product op uw eigen backend terechtkomen. Als je voornamelijk tekst, afbeeldingen en een paar eenvoudige API-aanroepen serveert, zou Jamstack goed voor je moeten werken. Voor complexere scenario's kan het lastiger zijn om kant-en-klare oplossingen te vinden die u kunt aansluiten op uw JavaScript en opmaak.
Get the Tools
< p>Je kunt Jamstack-apps maken met niets meer dan een teksteditor en een terminal. Selecteer een hostingprovider, installeer zijn CLI, schrijf enkele HTML-bestanden en voer de opdracht deploy uit om uw site live te pushen.
In de praktijk kiezen de meeste mensen ervoor om een soort steiger te gebruiken om het gemakkelijker te krijgen om begonnen. Als u een web-app bouwt, kunt u een JavaScript-framework gebruiken om te profiteren van routering en navigatie aan de clientzijde. Voor statische websites wilt u waarschijnlijk een statische sitegenerator zoals Jekyll, Hugo of Gatsby gebruiken waarmee u uw thema gescheiden kunt houden van uw inhoud.
Dynamische functies worden toegevoegd door API's van derden te integreren, uw eigen microservices te hosten of te vertrouwen op serverloze functies die zijn gemaakt met een openbaar cloudplatform. Op JavaScript gebaseerde oplossingen zijn direct beschikbaar om formulieren, zoeken, e-commerce en andere complexe functies te implementeren, zonder zelf een regel backend-code te hoeven schrijven. Op GitHub vindt u openbare lijsten met ideale services waarmee u kunt integreren.
Conclusie
De Jamstack is een benadering voor de ontwikkeling van web-apps waarbij de voorkeur wordt gegeven aan het plaatsen van zoveel mogelijk code in de client. JavaScript en opmaak worden naar de browser gestuurd; gegevens bereiken vervolgens uw backend-services via API-interacties.
Jamstack's populariteit is gegroeid met de verbeteringen in browser-API's die de afgelopen jaren zijn waargenomen. JavaScript is ook aanzienlijk volwassener geworden als taal, geholpen door dialecten zoals TypeScript. Door deze ontwikkelingen is exclusieve targeting van de frontend voor veel meer teams realistischer geworden.
Advertentie
Het gebruik van een Jamstack-aanpak vereenvoudigt uw app vaak, wat een snellere ontwikkeling en grotere schaalbaarheid mogelijk maakt. Met minder server-side endpoints om te beschermen, verbetert uw beveiligingshouding en wordt uw onderhoudslast verminderd. Jamstack kan niet voor elke toepassing zorgen, maar het is het overwegen waard wanneer u werkt aan frontend-first systemen met relatief ontspannen backend-functionaliteit.
Tot slot, doe dat niet stress over dingen doen die 100% “de Jamstack-manier” – de aanpak is voor interpretatie vatbaar. Het concept gaat er echt om de frontend op de eerste plaats te zetten door gebruik te maken van de kracht van JavaScript en API's. Dit betekent niet dat u uw eigen infrastructuur niet kunt runnen of uw eigen backend kunt schrijven.
Focus op het ontkoppelen van de componenten in uw stack, het versnellen van de laadtijden van de client en het asynchroon ophalen van gegevens via API's op het moment dat de browser het nodig heeft. Deze technieken helpen bij het maken van meer veerkrachtige applicaties met een betere gebruikerservaring, waarbij de mogelijkheden van het moderne web volledig worden benut.