{"id":7389,"date":"2022-05-18T13:05:21","date_gmt":"2022-05-18T20:05:21","guid":{"rendered":"https:\/\/coderpad.io\/?p=7389"},"modified":"2023-06-05T14:30:22","modified_gmt":"2023-06-05T21:30:22","slug":"intro-to-jamstack-with-salma-alam-naylor","status":"publish","type":"post","link":"https:\/\/coderpad.io\/blog\/development\/intro-to-jamstack-with-salma-alam-naylor\/","title":{"rendered":"Dev Discussions: Intro to the Jamstack with Salma Alam-Naylor of Netlify"},"content":{"rendered":"\n<p>Salma-Alam Naylor can trace her love of Jamstack to her time as a music teacher.<\/p>\n\n\n\n<p>Before she spread the joy of learning web development, she was a musical comedian and music teacher who taught kids how to play in a rock band.<\/p>\n\n\n\n<p>She ended up falling in love with technology later in life. As someone who came to development from a non-traditional career path, she developed a special place in her heart for technologies that removed people\u2019s barriers to developing their websites.<\/p>\n\n\n\n<p>Now she\u2019s a staff developer experience engineer at the Jamstack-native cloud platform Netlify, where she continues to preach the cause of web development for everyone.<\/p>\n\n\n\n<p>For Salma, Jamstack helps open up a world of possibilities for people who want to create their own websites or get into web development.<\/p>\n\n\n<aside class=\"\n    cta-banner\n     cta-banner--bg-blue      cta-banner--has-media \"\ndata-block-name=\"cta-banner\">\n    <div class=\"inner\">\n        <div class=\"content\">\n                            <h2 class=\"headline\">Learn how to run front-end developer interviews that don&#8217;t suck<\/h2>\n            \n                            <div class=\"cta-buttons\">\n                                    <a href=\"https:\/\/coderpad.io\/blog\/interviewing\/5-tips-for-interviewing-frontend\/\" class=\"button  js-cta--read-our-guide\"  data-ga-category=\"CTA\" data-ga-label=\"Learn how to run front-end developer interviews that don&#039;t suck|Read our guide\">Read our guide<\/a>\n                                <\/div>\n                    <\/div>\n                    <div class=\"media\">\n                <img loading=\"lazy\" decoding=\"async\" width=\"432\" height=\"342\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/Illustration-of-man-with-beard-popping-out-of-computer-chat.png\" class=\"attachment-large size-large\" alt=\"\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/Illustration-of-man-with-beard-popping-out-of-computer-chat.png 432w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/Illustration-of-man-with-beard-popping-out-of-computer-chat-300x238.png 300w\" sizes=\"auto, (max-width: 432px) 100vw, 432px\" \/>\n            <\/div>\n            <\/div>\n<\/aside>\n\n\n\n<h2 class=\"wp-block-heading\">Wait, what is Jamstack?<\/h2>\n\n\n\n<p>Most people vaguely familiar with Jamstack think it\u2019s a set of specific technologies \u2013 notably <strong>J<\/strong>avaScript, <strong>A<\/strong>PIs, and <strong>M<\/strong>arkdown (JAM).<\/p>\n\n\n\n<p>That\u2019s a big misunderstanding that Salma was quick to correct: Jamstack isn\u2019t defined by your tools. Instead, it\u2019s an architectural decision about how website requests are processed and the responses rendered to the user.<\/p>\n\n\n\n<p>To understand this new architecture, it helps to take a step back in time to the early days of the internet.&nbsp;<\/p>\n\n\n\n<p>Back in the early 2000s, every time someone made a URL request to access a website, the request would go to a server, the server would run code to build the .html document, and then the server would send the document back to the requester.&nbsp;<\/p>\n\n\n\n<p>Not only was this a long process \u2013 imagine a server in Beijing having to render a page in Cairo \u2013 but early websites relied on massive monolithic tech stacks to carry out this process.&nbsp;<\/p>\n\n\n\n<p>There was no real front end\/back end separation. Front-end developers were often an afterthought, forced to use the templating systems that came with the monolithic tech stacks.&nbsp;<\/p>\n\n\n\n<p>Because these systems were so complex and intertwined, there was a lot of overhead with unused technology sitting idle and maintenance issues a pain to troubleshoot.<\/p>\n\n\n\n<p>That all changed <a href=\"https:\/\/coderpad.io\/blog\/development\/web-components-101-history\/\" target=\"_blank\" rel=\"noreferrer noopener\">around 2010<\/a> when companies started to decouple the front end from the back end \u2013 that\u2019s when we saw the emergence of front-end frameworks like Angular.js and Backbone.js.<\/p>\n\n\n\n<p>As front ends started to develop their own ecosystems, another advancement in web dev technology was occurring \u2013 the creation of static site generators like <a href=\"https:\/\/jekyllrb.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Jekyll<\/a> and <a href=\"https:\/\/www.gatsbyjs.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Gatsby.js<\/a>.<\/p>\n\n\n\n<p>The premise behind static sites is simple \u2013 you use a static site generator to generate the .html page and then publish them to a Content Delivery Network (CDN).<\/p>\n\n\n\n<p>The beautiful part about publishing them to CDNs is that the CDN comprises various distribution nodes worldwide. So the CDN distributes them to all the nodes around the world where they are cached.&nbsp;<\/p>\n\n\n\n<p>When a user wants to access the website, they are directed to the nearest CDN node \u2013 and not a server halfway across the world \u2013 which <em>drastically<\/em> reduces the time it takes to serve up the page, making for a much better user experience.<\/p>\n\n\n\n<p>That, in a nutshell, is the Jamstack architecture: Serving pre-generated assets that are bundled up at build time and then put onto a CDN which distributes them to users.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Jamstack lowers barriers for beginners<\/h2>\n\n\n\n<p>The only thing you have to worry about as a Jamstack developer is creating the static HTML file that will be published to the CDN. How you do that is up to you \u2013 you can use any Javascript framework, Ruby, or even write the HTML all by yourself.<\/p>\n\n\n\n<p>You don\u2019t have to worry about anything related to the <a href=\"https:\/\/en.wikipedia.org\/wiki\/DevOps\" target=\"_blank\" rel=\"noreferrer noopener\">DevOps<\/a> of your web application. In other words, you don\u2019t have to know anything about how to spin up and manage the server to which your application will be deployed.&nbsp;<\/p>\n\n\n\n<p>That\u2019s because Jamstack is generally managed using a serverless cloud platform like Netlify, Cloudflare, or Amazon CloudFront (to name a few).<\/p>\n\n\n\n<p>This removes any need for you to know how to manage servers and code deployment. It also allows you to push your web pages to production quickly and roll them back to previous versions if you accidentally push an error.<\/p>\n\n\n\n<p>Therefore Jamstack drastically lowers the barrier to entry for new web developers \u2013 it\u2019s much easier getting a web page live than developing a page and then worrying about setting up the infrastructure it will live on.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Take the YOLO approach to get started with Jamstack<\/h2>\n\n\n\n<p>The great thing about Jamstack is its simplicity. You only really need to know HTML (<a href=\"https:\/\/whitep4nth3r.com\/blog\/html-is-all-you-need-to-make-a-website\/\" target=\"_blank\" rel=\"noreferrer noopener\">Salma argues you don\u2019t even need to know CSS<\/a>) and how to connect to a hosting provider to get started.<\/p>\n\n\n\n<p>That helps enable what Salma calls \u201cYOLO\u201d (You Only Live Once) publishing, which is a web dev \u201ctechnique\u201d she recommends for new web developers.<\/p>\n\n\n\n<p>One problem with new developers \u2013 especially when they\u2019re only exposed to more complex web development \u2013 is that they\u2019re so overwhelmed with different ways of creating a web page that they don\u2019t know where to start. And if they do start, they want it to be so feature-rich and perfect that they never end up pushing the page to production.<\/p>\n\n\n\n<p>YOLO is a form of rapid iterative development where you quickly create a page and push it to production, warts and all. You then promptly learn \u2013 both by using the website and by getting feedback from others \u2013 about what went right and wrong and how to improve the latter. <a href=\"https:\/\/www.forbes.com\/sites\/deeppatel\/2017\/06\/16\/why-perfection-is-the-enemy-of-done\/?sh=78da23ea4395\" target=\"_blank\" rel=\"noreferrer noopener\">In the words of Confucious<\/a>, \u201cBetter a diamond with a flaw than a pebble without.\u201d<\/p>\n\n\n\n<p>If you made a big mistake, you can roll back to the previous version, make your corrective changes, and publish the page again.&nbsp;<\/p>\n\n\n\n<p>You don\u2019t need to spend time learning the inner workings of the cloud service\u2019s infrastructure or how they deploy your code to the CDN \u2013 they take care of all that so you can focus on creating excellent web applications.<\/p>\n\n\n\n<p>You don\u2019t need to spend hours learning the newest React features or use complex build tools to make a good web page. You just need to get started building <em>something<\/em> that you can quickly publish.&nbsp;<\/p>\n\n\n\n<p>Once you get your first pages published and become comfortable with that process, then you can start implementing more advanced Jamstack features. The key to not getting overwhelmed here is to only focus on learning the features that are essential for you and your web apps.&nbsp;<\/p>\n\n\n\n<p>It\u2019s easy to get distracted by new features, so it will take some effort to separate yourself from the \u201cI need to learn everything\u201d bug that often infects new developers.<\/p>\n\n\n\n<p>As long as your page is readable, usable, and accessible, it doesn\u2019t matter what it looks like. Sometimes simple is better, especially if you\u2019re learning something for the first time.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Jamstack: A force for good<\/h2>\n\n\n\n<p>Ultimately Salma\u2019s goal for preaching about Jamstack is accessibility \u2013 she wants to live in a world where technology allows everyone to do something good.<\/p>\n\n\n\n<p>Jamstack does this by making it easy for people to create and publish beautiful content.&nbsp;<\/p>\n\n\n\n<p>If you want to get started with Jamstack, the place to begin is <a href=\"https:\/\/jamstack.org\/resources\/\" target=\"_blank\" rel=\"noreferrer noopener\">Jamstack.org<\/a>.&nbsp;<\/p>\n\n\n\n<p>Once you get through those introductory readings, you\u2019ll probably want to:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><a href=\"https:\/\/www.w3schools.com\/html\/\" target=\"_blank\" rel=\"noreferrer noopener\">Learn HTML<\/a> if you haven\u2019t already (unless you\u2019re going straight to a <a href=\"https:\/\/jamstack.org\/generators\/\" target=\"_blank\" rel=\"noreferrer noopener\">static site generator<\/a> like Next.js or Jekyll).<\/li><li>Create your HTML file or generate it using your static generator of choice<\/li><li>Select <a href=\"https:\/\/www.pluralsight.com\/blog\/software-development\/where-to-host-your-jamstack-site\" target=\"_blank\" rel=\"noreferrer noopener\">a hosting company<\/a> to host your page and distribute it to a CDN<\/li><li>Publish your page using the hosting company\u2019s tools.<\/li><\/ol>\n\n\n\n<p>That\u2019s it! That\u2019s all you need to do to publish your first Jamstack-powered page.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>P.S. Are you a woman interested in, or already working with, Jamstack? Salma currently leads the <em>Women of Jamstack<\/em> group and would love for you to <a href=\"https:\/\/womenofjamstack.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">check it out<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Want to know more behind this popular platform? Salma&#8217;s got you covered in this all-you-need-to-know introduction.<\/p>\n","protected":false},"author":12,"featured_media":7391,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[],"persona":[27,29],"blog-programming-language":[],"keyword-cluster":[],"class_list":["post-7389","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development"],"acf":[],"_links":{"self":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/7389","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/comments?post=7389"}],"version-history":[{"count":10,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/7389\/revisions"}],"predecessor-version":[{"id":7775,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/7389\/revisions\/7775"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media\/7391"}],"wp:attachment":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media?parent=7389"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/categories?post=7389"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/tags?post=7389"},{"taxonomy":"persona","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/persona?post=7389"},{"taxonomy":"blog-programming-language","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/blog-programming-language?post=7389"},{"taxonomy":"keyword-cluster","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/keyword-cluster?post=7389"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}