Introduction
Several JavaScript developers are talking about something called Jamstack these days. But what exactly does it mean? What does it look like? Is it all that different than just normal web development? What are the benefits, and how do I get started with Jamstack? This guide will walk you through the basic concepts behind Jamstack, and will give you the knowledge you need to get started today!
What is Jamstack?
Jamstack is a collection of technologies that serve as a complete and performant web development stack for building static sites. The acronym stands for JavaScript, APIs, and Markup, which makes up the three layers that all work together to create a fast and scalable website.
The JAMstack is an alternative to the traditional client-side MVC stack. It eliminates the need for the backend (in most cases), allowing developers to build applications using only HTML, CSS, and JavaScript.
Understanding JAM(Javascript, APIs, Markdown)
By combining these three technologies, developers can build powerful applications that are highly scalable, cost-effective, and easy to maintain. Let’s take a look at how each of these components works together to power modern web applications.
In my case, we are talking about ReactJS with an API running on Vanilla.Js and hosting everything on Netlify which automatically deploys when changes are made. But you can use any combination of these tools in various combinations, but using these 3 key components will make sure that your site or web app is lightning fast and always available because they are all serverless (meaning they run in the cloud).
Now let’s talk about why each part matters individually
MARKUP
HTML has been around since 1991 and has only gotten more powerful over time. It is very important to have HTML on your page because it provides structure to content. It allows users who visit your website via mobile devices or screen readers like VoiceOver to consume that content easily. Without HTML, things would get messy quickly! Also if you want to build a responsive website or one that adapts based on device width then HTML is essential.
APIS
When people think about APIs they often think about big companies such as Facebook, Twitter, etc. However, there are tons of useful public APIs out there such as Google Maps, Twitter Search, YouTube Videos, etc. All of these APIs allow you to do certain things with their data and they provide simple interfaces so that you don’t need to worry about getting access tokens or creating a backend. They also tend to return JSON data which makes them perfect for consumption by front-end frameworks like ReactJS.
REACT
As mentioned above, ReactJS is a front-end framework developed by Facebook. It was released in 2013 and it has gained massive popularity due to its flexibility and performance benefits over other frameworks such as AngularJS. If you want to build a web app then I highly recommend using ReactJS because it allows your UI components to be rendered server-side (on Node) and client-side (in your browser). This means that if your site ever goes down or if someone visits via an outdated browser then they will still be able to view content on your site without any problems! Also when content changes on your page it can automatically be updated in real-time so users don’t have to refresh their browser every time something changes.
To learn more you can check out this Cryptocurrency JAMstack app built using HTML, React, and multiple APIs powered by rapidapi.com. It is then hosted in Netlify.
Tools for building your website
JAMstack applications are often built on top of client-side JavaScript, meaning you don’t need server-side languages like Ruby and Python. That doesn’t mean you can’t use them—if your application needs server-side rendering or heavy lifting, it’s just as easy to implement those tools in a JAMstack app as it is in any other. Here are some popular tools for building your website
- A Static Site Generator: A tool that allows you to write content in markdown files and automatically converts them into HTML pages. This lets you focus on writing content without having to worry about coding HTML from scratch. Popular static site generators include Jekyll, Hugo, Gatsby, and Hexo.
- A JavaScript Framework: A library of code that makes it easier for developers to build complex web applications using JavaScript. Popular frameworks include React, VueJS, and AngularJS. A Content Delivery - Network (CDN): If you’re serving your content from a server in your office or your home, there’s a good chance your website will be slower than if it were hosted on a CDN like Cloudflare or Fastly.
- A CSS Preprocessor: CSS preprocessors allow you to use variables, functions, and other programming features within CSS. They make writing large stylesheets faster and more efficient.
- A Task Runner: Task runners let you run automated tasks on your project files, such as compiling SASS into regular CSS or bundling up all of your JavaScript files into one file. Grunt is a popular task runner written in NodeJS but many others exist such as Gulp which is written in Javascript itself.
- Media API: Media APIs make it easy to integrate videos and photos in your application e.g cloudinary
- Hosting Platform: If you don’t want to host your site yourself, there are several static site hosting platforms like Netlify and Surge that will host your static website for free.
- A CDN Provider: A Content Delivery Network (CDN) lets you distribute content around the world so that users can access it quickly no matter where they live. Fastly and Cloudflare are two popular CDNs.
- A Payment Processor: To accept payments online, you’ll need a payment processor that supports services like Stripe or PayPal.
- A Chatbot Platform: Chatbots are an emerging technology that allows companies to interact with customers through messaging apps like Facebook Messenger.
- A Customer Support Tool: No matter how good your product is, you’re going to have questions about how it works—and chances are you won’t be able to answer every question by yourself. That’s why customer support tools like Intercom make it easy to manage conversations between your customers and your company.
- A Marketing Automation Tool: Marketing automation tools help you better understand who your customers are so you can market to them more effectively.
Why JAMstack?
Jamstack is a way to deploy web apps that leverage static site generators, such as Gatsby or Hugo. It's an architecture where all the data is stored in a database and served statically. The result is fast, scalable sites that don't require any backend work. This means developers can get straight to work on their app's front end without worrying about setting up databases and servers. A benefit of this approach is reduced hosting costs since you're only paying for what you use (your computational power).
Finally, since everything runs in a browser tab with client-side rendering, each request is blazing fast since there’s no waiting for data from a server. And because so many people use Google Chrome these days, we know our websites will look great in their browsers without having to test across multiple browsers or devices.
Disadvantages of Jamstack
There are a few disadvantages of the JAMstack. One disadvantage is if you need to edit the content on your site, it won't be dynamically generated but instead have to be edited manually through your local copy of the project files. Another possible disadvantage is that not all web applications can be built using this method.
Conclusion
Jamstack is an unconventional architecture for building websites and apps. In this guide, I have introduced you to what JAMStack is, the advantages it has over other architectures, and how to get started using it today. You can check more about Jamstack here.
Happy Learning!
Top comments (1)