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?
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?
- 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.
- 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).
- 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.
- 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.
- 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 !