Learn about JAMstack in web programming with beginners

If you are starting to learn about web programming, do you know about any web development applications using JavaScript, APIs and creating static pages that are very popular today? Look no further than JAMstack, let's find out together now.

What is JAMstack?

In the web programming world, JAMstack is famous as one of the software architectures designed with the purpose of making web development and operation faster, more secure and more scalable. It is built on many different tools and workflows with the common goal that programmers are aiming for, which is to bring maximum productivity.
To imagine one of the JAMstack applications, we can refer to the React application that you often use to compile with Webpack. It's the JAMstack app. Or a simple HTML file without JavaScript, which is also a JAMstack application.

What does JAMstack include?

Typically, the main components of JAMstack include the following 3 elements: Javascript, API and Markup. Originated from the development of the term “static website” into an application that is smarter and can integrate many functions such as marketing. Perhaps that's why JAMstack as well as other new web programming tools like these are gradually being born.

Javascript

Javascript is considered the busiest component in the JAMstack structure. A web browser language that would allow us to provide all the dynamic and interactive bits. These are features that if we were serving pure HTML we might not have it.

This is where we often see front-end frameworks like React, Vue or even new ones like Svelte come into play.
By providing component APIs and tools that compile into one or more simple HTML files, they make building applications simpler and more organized. Those HTML files can be images, CSS or JS served to the browser through a CDN.

API

The next indispensable component is the API, which is considered the core to building a dynamic JAMstack application. Whether authenticating or searching, the application will use Javascript to make HTTP requests to another provider with the ultimate goal of enhancing the experience.

For example, if you have a Wordpress API that doesn't have an interface and space to store blog posts. Or lack a Cloudinary account for storage and an Elasticsearch instance to provide search functionality, etc. Now, it will all integrate and work together to provide an optimal and useful experience. to users on your site.

Markup

The last but not least important component is Markup. Whether it's handwritten HTML or code compiled down to HTML, the first and foremost goal is to serve the customer. And Markup is considered a real part of any website.
To put it simply, for an application to be considered a JAMstack, the HTML needs to be served statically. Meaning they are not dynamically displayed from the server. And when you put each page together and serve it with PHP, it cannot be JAMstack. Because only uploading and serving a single HTML file from storage built with Javascript is JAMstack.
However, that doesn't mean that apps should be built 100% in the browser at any time. Because tools like Gatsby and static site generators can pull one or all of the API sources at build time and display them as HTML files. For example, you own a Wordpress blog and can pull all the posts and create a new HTML file for each of them.

So what makes the JAMstack app so great?

Basically, JAMstack can meet all 5 pillars of the AWS Well-Architected Framework. Including 5 specific elements below:
Speed
JAMstack applications are served as static files directly from the CDN, making our applications load extremely fast compared to normal. Thanks to that, we don't seem to spend too much time waiting for the server to respond.
Expense 
Reality proves that JAMstack websites cost businesses/individuals less money than similar websites on the server. Thanks to cheap static asset storage, both businesses and users can now optimize a certain fee.
Ability of extension
Since we are using files in addition to static storage, which can be a CDN, it almost automatically gives us infinite scalability. This means you won't have any trouble getting someone to access your website through your front door.
Maintenance
The static website platform is not a server, so there will be no maintenance required. Whether it's S3, Netlify, or any other provider, static HTML, JS, and CSS are maintained without any headaches.
Protect
The worry of having to do maintenance yourself when there aren't enough servers now means we don't have to worry too much about preventing intruders. Instead, we'll need to focus on permissions to lock private content. At the same time, ensure users that personal information will not be made public or leaked.