{"id":336373,"date":"2021-09-08T15:00:31","date_gmt":"2021-09-08T12:00:31","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/what-is-the-jam-stack-should-you-be-using-it-cloudsavvy-it\/"},"modified":"2021-09-08T15:00:31","modified_gmt":"2021-09-08T12:00:31","slug":"what-is-the-jam-stack-should-you-be-using-it-cloudsavvy-it","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/what-is-the-jam-stack-should-you-be-using-it-cloudsavvy-it\/","title":{"rendered":"#What is the \u201cJAM Stack?\u201d Should You Be Using It? \u2013 CloudSavvy IT"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_89 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6ae0e3c2369cf\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6ae0e3c2369cf\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/what-is-the-jam-stack-should-you-be-using-it-cloudsavvy-it\/#Do_Static_Sites_Use_the_Jamstack\" >Do Static Sites Use the Jamstack?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/what-is-the-jam-stack-should-you-be-using-it-cloudsavvy-it\/#The_Key_Components\" >The Key Components<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/what-is-the-jam-stack-should-you-be-using-it-cloudsavvy-it\/#A_Smoother_Developer_Experience\" >A Smoother Developer Experience<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/buradabiliyorum.com\/en\/what-is-the-jam-stack-should-you-be-using-it-cloudsavvy-it\/#Decoupled_Components\" >Decoupled Components<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/buradabiliyorum.com\/en\/what-is-the-jam-stack-should-you-be-using-it-cloudsavvy-it\/#The_Drawbacks\" >The Drawbacks<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/buradabiliyorum.com\/en\/what-is-the-jam-stack-should-you-be-using-it-cloudsavvy-it\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<p><strong>&#8220;#What is the \u201cJAM Stack?\u201d Should You Be Using It? \u2013 CloudSavvy IT&#8221;<\/strong><\/p>\n<div id=\"article-content-area\">\n<figure style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"type:primaryImage size-full wp-image-14091\" srcset=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/09\/4b262234.png?width=398&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1 400w, https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/09\/4b262234.png?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1 1200w\" sizes=\"auto, 400w, 1200w\" src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/09\/4b262234.png?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"Illustration of a computer monitor showing a JavaScript symbol\" width=\"1200\" height=\"675\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><figcaption class=\"wp-caption-text\"><span class=\"type:primaryImage imagecredit\"><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.shutterstock.com\/image-vector\/programmers-using-javascript-programming-language-on-1331328194\">Visual Generation\/Shutterstock.com<\/a><\/span><\/figcaption><\/figure>\n<p>The JAM stack, often stylized as Jamstack or JAMStack, refers to using <strong>J<\/strong>ava<a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">Script<\/a>, <strong>A<\/strong>PIs, and <strong>M<\/strong>arkup to develop client-centric websites and applications. A system founded on the Jamstack will run all its logic on the client, eliminating server-side components.<\/p>\n<p>The term was coined by <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.netlify.com\/jamstack\">Netlify<\/a> and describes a web development approach that offers higher performance, better security, and an improved developer experience. Instead of incurring a server round-<a href=\"https:\/\/buradabiliyorum.com\/en\/category\/trip-and-travel\/\" data-internallinksmanager029f6b8e52c=\"10\" title=\"Trip &amp; Travel\" target=\"_blank\" rel=\"noopener\">trip<\/a> on every page load, Jamstack sites are self-sufficient within the browser.<\/p>\n<h2 id=\"do-static-sites-use-the-jamstack\"><span class=\"ez-toc-section\" id=\"Do_Static_Sites_Use_the_Jamstack\"><\/span>Do Static Sites Use the Jamstack?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Static sites built with just HTML, CSS, and JavaScript are inherently client-side with no backend programming. In this way, they fit the criteria of the Jamstack.<\/p>\n<p>Jamstack goes beyond simple websites and blogs though. Whereas static sites only utilize the \u201cmarkup\u201d aspect, perhaps with a little JavaScript, a Jamstack app may still have a backend and a persistent data store.<\/p>\n<p>The difference compared to traditional web applications lies in how data reaches the store. In a legacy system, you might have an HTML form that creates records in a SQL database when you submit the page. You need a custom backend stack with supporting infrastructure.<\/p>\n<p>A Jamstack application will cut the server-side complexity by sending data via APIs. You could still implement your own backend but it\u2019s also common to use a third-party hosted solution such as Netlify or Google\u2019s Firebase. Now the only infrastructure you need is a basic web server to supply your HTML and JavaScript to the user\u2019s browser.<\/p>\n<h2 id=\"the-key-components\"><span class=\"ez-toc-section\" id=\"The_Key_Components\"><\/span>The Key Components<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Here\u2019s a recap of the Jamstack\u2019s three constituent components:<\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li><strong>JavaScript<\/strong> \u2013 The whole experience is powered by JavaScript within the user\u2019s browser. You can use whichever framework you want, whether you favor React, Vue, Angular, or your own vanilla solution.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li><strong>APIs<\/strong> \u2013 Data flows in and out of the user\u2019s browser via APIs. If a form needs to be submitted, its input values should be captured by JavaScript and sent to your backend or a third-party service. This enhances the user experience by letting you display loading spinners and progress bars as data fetches occur.<\/li>\n<li><strong>Markup<\/strong> \u2013 Content is created from human-readable markup formats such as HTML and Markdown. These can be served to the browser as-is for parsing by JavaScript. There\u2019s no need to host a complicated CMS to create and edit content. You\u2019d add a new blog post by writing a <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.howtogeek.com\/448323\/what-is-markdown-and-how-do-you-use-it\">Markdown file<\/a> and committing it to your project\u2019s source control repository.<\/li>\n<\/ul>\n<p>The overall approach sees markup and JavaScript land in the user\u2019s browser from your web server. The JavaScript then <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/social-mediaa\/\" data-internallinksmanager029f6b8e52c=\"1\" title=\"Social Media\" target=\"_blank\" rel=\"noopener\">media<\/a>tes between your user and your backend storage APIs to facilitate any other data interactions you require.<\/p>\n<h2 id=\"a-smoother-developer-experience\"><span class=\"ez-toc-section\" id=\"A_Smoother_Developer_Experience\"><\/span>A Smoother Developer Experience<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Utilizing the Jamstack lets you focus on delivering functionality and improving the user experience. You don\u2019t need to spend time configuring or maintaining costly backend infrastructure. Instead, you can use platform-as-a-service APIs to fetch and save your app\u2019s data.<\/p>\n<p>Jamstack pairs well with Git-based development and deployment workflows. As your stack is really just a web server, you can represent everything as a plain text file in your repository. Continuous delivery pipelines help you ship updates quickly, without re-provisioning servers.<\/p>\n<p>Most of the time you won\u2019t self-host any infrastructure components. Jamstack systems are commonly deployed straight to a static file host like Netlify, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/firebase.google.com\/products\/hosting\">Firebase<\/a>, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/pages.github.com\">GitHub Pages<\/a>, or even a <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/docs.aws.amazon.com\/AmazonS3\/latest\/userguide\/WebsiteHosting.html?tag=reviewgeek-20\">plain S3 bucket<\/a>. Alternatively, you could containerize your application with Docker and launch it into a Kubernetes cluster.<\/p>\n<p>Either way, you\u2019re not manually copying files or tweaking server settings \u2013 you\u2019re writing code and merging into your main branch to deploy. A final piece is usually a CDN like <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.cloudflare.com\/en-gb\">Cloudflare<\/a> that sits in front of your web server solution, caching content to further improve performance for end users.<\/p>\n<h2 id=\"decoupled-components\"><span class=\"ez-toc-section\" id=\"Decoupled_Components\"><\/span>Decoupled Components<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Jamstack lets you decouple the individual components of your application. In a traditional CMS-driven website, your code, content, and styles live together in a single system. You need the entire CMS available to serve any single function.<\/p>\n<p>Using the Jamstack separates these components completely. Your web server serves the code while external platform providers handle your data. This gives you greater flexibility to switch out pieces of your stack as your requirements change.<\/p>\n<p>The end user benefits from a more resilient experience too. Even if the data store goes down, you can still serve your core markup and JavaScript to display a proper error page. Loading times are faster as the browser only fetches code, not data, on its first contact with your server.<\/p>\n<p>A key difference compared to server-rendered approaches is that Jamstack sites are always pre-built. You\u2019re serving fully static assets, instead of combining code and data on every request the server receives. Your build process will run the compilation step once per deployment, creating the markup that your web server sends to browsers. This increases efficiency and performance.<\/p>\n<h2 id=\"the-drawbacks\"><span class=\"ez-toc-section\" id=\"The_Drawbacks\"><\/span>The Drawbacks<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The most significant Jamstack drawback can be the same code-based update model that often makes it so attractive. It\u2019s often harder for content authors and editors to get involved, as they usually need to learn to write markup in HTML or Markdown. This can be daunting to non-technical writers familiar with a graphical <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/WYSIWYG\">WYSIWYG<\/a> experience.<\/p>\n<p>Another limitation is your inherent dependency on third-party platforms. The Jamstack encourages use of external APIs and hosting providers that could disappear or change their offering overnight. While running your own infrastructure comes with maintenance concerns, it also gives you certainty that your stack will stay functional long into the future.<\/p>\n<p>It is possible to outgrow the Jamstack too. Implementing heavy dynamic features can cause issues if the platform you\u2019re using can\u2019t meet your requirements. You could end up bolting on your own backend midway through your product\u2019s life. If you\u2019re mostly serving text, images, and a few simple API calls, Jamstack should work well for you. For more complex scenarios, it may be trickier to find off-the-shelf solutions you can plug into your JavaScript and markup.<\/p>\n<p>You can create Jamstack apps with nothing more than a text editor and a terminal. Select a hosting provider, install its CLI, write some HTML files, and run the deploy command to push your site live.<\/p>\n<p>In practice, most people opt to use some kind of scaffolding to make it easier to get started. If you\u2019re building a web app, you could use a JavaScript framework to benefit from client-side routing and navigation. For static websites, you\u2019ll probably want to use a static site generator like <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/jekyllrb.com\">Jekyll<\/a>, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/gohugo.io\/\">Hugo<\/a>, or <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.gatsbyjs.com\">Gatsby<\/a> that let you keep your theme separate from your content.<\/p>\n<p>Dynamic functions are added by integrating third-party APIs, hosting your own microservices, or relying on serverless functions created with a public cloud platform. JavaScript-based solutions are readily available to implement forms, search, ecommerce, and other complex features, without writing a line of backend code yourself. You can find <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/automata\/awesome-jamstack\">public lists of ideal services<\/a> you could integrate with on GitHub.<\/p>\n<h2 id=\"conclusion\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The Jamstack is an approach to web app development that favors putting as much code as possible into the client. JavaScript and markup is sent to the browser; data then reaches your backend services via API interactions.<\/p>\n<p>Jamstack\u2019s popularity has grown with the improvements in browser APIs seen over the past few years. JavaScript has also significantly matured as a language, aided by dialects like TypeScript. These developments have made exclusive targeting of the frontend a more realistic proposition for many more teams.<\/p>\n<p>Using a Jamstack approach often simplifies your app, facilitating quicker development and greater scalability. With less server-side endpoints to protect, your security posture improves and your maintenance burden is reduced. Jamstack can\u2019t cater for every application but it\u2019s worth considering when you\u2019re working on frontend-first systems with relatively relaxed backend functionality.<\/p>\n<p>Finally, don\u2019t stress about doing things 100% \u201cthe Jamstack way\u201d \u2013 the approach is open to interpretation. The concept\u2019s really about putting the frontend first through utilizing the power of JavaScript and APIs. It doesn\u2019t mean you can\u2019t run your own infrastructure or write your own backend.<\/p>\n<p>Focus on decoupling the components in your stack, accelerating client load times, and fetching data asynchronously via APIs at the time the browser needs it. These techniques help create more resilient applications with a better user experience, fully exploiting the capabilities of the modern web.\n<\/p><\/div>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/www.cloudsavvyit.com\/14090\/what-is-the-jam-stack-should-you-be-using-it\/\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;#What is the \u201cJAM Stack?\u201d Should You Be Using It? \u2013 CloudSavvy IT&#8221; Visual Generation\/Shutterstock.com The JAM stack, often stylized as Jamstack or JAMStack, refers to using JavaScript, APIs, and Markup to develop client-centric websites and applications. A system founded on the Jamstack will run all its logic on the client, eliminating server-side components. The&#8230;<\/p>\n","protected":false},"author":1,"featured_media":336374,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/09\/4b262234.png","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-336373","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/336373","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=336373"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/336373\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/336374"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=336373"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=336373"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=336373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}