What is the JAMstack and how do you get started?

JAMstack sites are basically all the rage right now in the web dev world. And so! But what exactly is it and how can we all take benefit of its advantages?

• What is JAMstack?
• That’s not to be confused and puzzled with serverless
• What makes up the JAMstack?
• So what makes a JAMstack app so amazing?
• Is my website considered to be on the JAMstack?
• What are some of the examples of JAMstack?
• What are some of the tools that I can use to build JAMstack sites or apps?

What is the JAMstack?

To begin with, JAMstack is a software architecture and philosophy that adheres and coheres to the following components: Javascript, APIs, and the Markup.

If this sounds a bit familiar, it’s because it is! The React app that you compile and integrate down with Webpack and ultimately serve from the S3? Yup, that’s a JAMstack app. It’s simple HTML file that has no JavaScript and literally does not do anything dynamic? Yup, that’s also a JAMstack app.

That’s not to be confused with the serverless app

• If you’re coming more from the cloud side of things (think AWS, GCP, Azure), you might be more inclined to think of serverless and JAMstack as the very same thing. Granted they have some similarities in the philosophy of how resources are managed, such as hosting a site on the S3. But a JAMstack app is not always going to be a serverless app, now, is it?
• Consider an application hosted in the static storage on the cloud provider of your own choice. Yes, you might be serving the app in a serverless way, but you might actually be dealing with an API that utilizes and makes use of WordPress or Rails, both of which are certainly not serverless.
• Combining these philosophies can go a very long way, but they shouldn’t be confused or bewildered as the same.

What makes up the JAMstack?

• Back to the JAMstack: it’s quintessentially comprised or made up of 3 major components: Javascript, APIs, and Markup. Its history stems from growing the term “static site” into something a bit more meaningful (and also marketable). So while ultimately a static site is the end result or conclusion, it’s blown up to include and inculcate first class tooling for each and every step of the way.
• While there aren’t actually any specific set of tools that you need to make use of, or any tools at all beyond simple and basic HTML, there are some paragons or epitomes of what can make up each part of the stack. Let’s dive right into each of the component.

1. Javascript

• The component that’s most probably done the most work to popularize the JAMstack is Javascript. Our favorite browser language allows and enables us to provide all of the dynamic and interactive bits that we might not actually have if we’re serving plain and basic HTML without it.
• This is where a lot of the times you’ll see or come across of UI frameworks like React, Vue, and newcomers like Svelte come into play.
• They make building apps a lot simpler and more organized by providing component APIs and tooling that compile down to a simple and basic HTML file (or a bunch of them).
• Those HTML files include and inculcate a group of assets like the images, CSS, and the actual JavaScript that ultimately get served to a browser via or through your favorite CDN (content delivery network).

2. APIs

• Utilizing and making complete use of the strengths of APIs is core to how you make a JAMstack app dynamic. Whether it’s authentication or search, your application will make use of Javascript to make an HTTP request to another provider which will ultimately enhance the experience in one form or another.
• Gatsby coined the phrase “content mesh” that does a pretty amazing job at describing or explaining the endless domain of possibilities here.
• Content Mesh
• You don’t quintessentially have to reach out to the only one host for an API, but you can actually reach out to as many as you need (but try not to go overboard).
• For example, if you have a headless WordPress API where you host your blog-posts, a Cloudinary account where you store your specialized or focused media, and an Elasticsearch instance or example that provides your search functionality, they all work together to provide a single experience to the people who are using your site.

3. Markup

• This is a very critical and essential piece. Whether it’s your hand written HTML or the code that compiles down to the HTML, it’s the very first part you’re serving to the client. This is kind of a de facto piece of any website, but how you serve it is the most essential and important piece.
• To be considered a JAMstack app, the HTML needs or requires to be served statically, which basically and typically means not being dynamically rendered or left from a server.
• If you’re piecing together a page and serving it with the PHP, it’s most probably not a JAMstack app. If you upload and serve a single HTML file from the storage that constructs and builds an app with the Javascript, it sounds like a JAMstack application.
• But that doesn’t necessarily have to mean we have to always build 100% of the app within the browser. Tools like Gatsby and other static site generators allow and enable us to pull in some or all of our API sources at build time and render the pages out as simple HTML files.
• Think if you have a WordPress blog, we can pull in all of the posts and eventually create a new HTML file for each and every post. That means we’re going to be able to serve a precompiled version of the page directly to the browser which usually equates to a quicker first paint and a faster and better altogether experience for your visitor.

To know about Industrial Based Learning and more Information like this make sure to register yourself at NullClass now !