JAMstack
It is a subject that I want to dig into with but could not find the chance to work on; GatsbyJS and Netlify. When I started to search and tamper with these, a new architecture also caught my eyes; JAMstack. In this series of articles, I will briefly explain these topics and talk about how you can integrate these technologies.
Let me talk about what Jamstack is and what it is used for.
What is JAMstack?
JAMstack is a cloud-based web development architecture based on client-side Javascript code, reusable APIs, and markup content. Main idea; To create fast and secure sites and applications created with pre-rendering files and served directly on the CDN, eliminating the need to manage or run web servers.
JAMstack workflow vs traditional workflow
In order to be more understandable, I have drawn a flow describing the above two different methods.
The traditional way is as follows:
A user comes and wants to see a blog post on your site.
1- Let’s say you have a code written in React. You build your code and make it ready for use.
2- After you build the code, you can deploy it to a server. Your data is kept on a database. Of course, you can use it in CMS instead of the server and database.
3- The server shows the data it receives from the database to the user.
4- When new data arrives, it is written to this database.
The most important point here is; The data is not in the code while the code is being built. Data is received by accessing the database on the server upon request from the user.
With JAMstack this traditional way becomes:
1- Let’s say you have a code written in React. Your code goes during the build phase and gets the necessary data from the CMS. Your code is ready with mandatory data.
2- After the code is built, it is deployed on the CDN.
3- The data that the user wants to see is taken from the CDN and displayed.
4- When new data arrives, it is written to the CMS.
The problem here is; When a new data arrives, how this data will be shown to the user. Since the data is received during the build phase, the rebuild process is required to get the new data. At this point, we need a tool that will allow us to build frequently, or we will do this ourselves. This is where Netlify comes into play. It gets 3 builds per minute. Thus, if there is new data, it is quickly shown to users.
Through to Jamstack, we are able to respond to incoming requests very quickly since we are not in constant communication with the database.
Jamstack is built on 3 principal:
1- Javascript
You can use VanillaJS or choose one of the up-to-date frameworks.
Programming languages you can use: vanillaJS, React, Vue, AngularJS
2- API
You ought to use the functionality of the backend without the need for a database or backend. You can use any API, it can be public or private APIs you have created. You can also use the backend application you created before, and also use the third-party APIs that you can buy.
Technologies you can use: Contentful, Netlify CMS, Siteleaf, ButterCMS, Forestry
3- Markup
This layer is the view layer of our website. You can write your own HTML-CSS code or use a template like Hugo, Jekyll, or Gatsby. You can significantly reduce the time to create templates by using technologies that are ready. Learning new technology takes a lot of time at first, but then you will get a lot faster.
Technologies you can use: Gatsby, Hugo, NextJS, Jekyll, etc.
Jamstack is not about specific technologies. It is a new way to build websites and applications that offer better performance, higher security, lower scaling costs, and better developer experience.
So why do we need JAMstack?
If you are going to design a simple internet application and just want to create a static website, JAMstack suits you perfectly.
What does the simple mean?
It means that the situations where we need to communicate with the database are minimal, such as listing only the data, saving a simple form.
So what does it mean for a site to be dynamic or static?
Static websites usually come with a fixed number of pages in a specific layout. When the page is running in a browser, the content is literally static. Your site gives the same answer for each user. So we cannot say show this for the user, show something different for the other user. In simple text editors like Notepad, you can usually create a static website with HTML and CSS.
A dynamic website is more functional. It allows users to interact with the data on the page. You can return different answers for each user. For example, showing data differently for different users. Of course, you need to use more than HTML code to make the dynamic website.
Let me also mention this point; If you are using Netlify, any changes you make to the site/application will be instantly displayed to users. This will enable a static site/application to work as if it were dynamic.
What are the differences of JAMstack?
With a little experience, the differences as follows:
- JAMstack uses pre-rendering files / data. In this way, without wasting time getting data from the database, it quickly renders the site with the data already have. I think this is the most important difference.
- It allows you to clearly separate the frontend and backend parts. Thus, it allows you to develop different applications with different frontend using the same backend. Let me give an example; In my previous job, we wanted to use the code we have for different companies/applications within the scope of the “white labeling” project. However, we found that this cannot be done easily because the backend and frontend are intertwined.
P.s. of course, my posts are based on my personal experiences. I share the documents that I have used as much as possible so that you can go and read from there and get informed.
References:
