What is Jamstack? [First Half]

Jamstack is no longer just a buzzword among developers. Jamstack has grown into an ecosystem of tools that support the development of high-performance websites, progressive web apps, and other projects, and has significant benefits.

 

Even famous companies are jumping into the realm of Jamstack. For example, Microsoft announced Azure Static Web Apps earlier this year, and Cloudflare recently announced a similar service called Cloudflare Pages. Popular commercial brands such as PayPal, Nike, Braun, Shopify, and FreeCodeCamp are also paying attention to Jamstack.

 

In such situations, many developers tend to focus on the debate of which is better between Jamstack and WordPress, which has been used extensively in the past, and often forget the benefits from the perspectives of end users and business users.

 

For us at Bejamas, Jamstack has brought great benefits in building websites and web apps for our clients. However, the technology stack we can use depends on our previous projects, so we cannot always freely choose Jamstack.

 

In this article, we will explain the basic concept of Jamstack, the differences from traditional stacks, and why Jamstack is an excellent solution for web developers and clients.

1. What is Jamstack?

JAMstack stands for JavaScript, API, and Markup, and was created by Netlify CEO Mathias Biilmann. However, Jamstack encompasses much more than what its initials suggest.

 

Jamstack refers to the architecture of web development. While taking advantage of the benefits of static websites such as excellent performance and security, it is also possible to dynamically update content by using a CMS based on a database.

 

The Jamstack approach allows for both deploying pre-configured static files on a CDN and creating fully dynamic websites. Dynamic content is processed by client-side JavaScript and is typically executed through serverless functions.

 

Let's compare the LAMP stack process, the king of web development, with the challenger Jamstack in order to accurately understand Jamstack.

 

1-1 Static Development Process vs. Dynamic Development Process

The LAMP stack web development architecture is derived from four open source components that developers used in the early 2000s to build websites: "Linux", "Apache HTTP Server", "MySQL database", and "PHP language".

 

In LAMP stack, when a user requests a page, the server queries the database before the page is displayed on the browser, and combines the content with the page's markup and plugin data. As a result, it generates and displays an HTML document on the browser.

 

 

On the other hand, websites using Jamstack can be displayed using optimized HTML files. Unlike LAMP, there is no need to query the database every time a page is requested. This is because the files are directly placed on the browser from the CDN, and optimization is performed every time the page is delivered.

 

In other words, using Jamstack dramatically increases development efficiency and significantly reduces unnecessary maintenance.

 

1-2 Is Jamstack Static?

Although it is static, there are also dynamic aspects. Websites built with Jamstack will of course create static files, but those files do not lack dynamic elements. Functionality such as forms, comments, and payment gateways are typically handled by third-party APIs (Application Programming Interfaces).

 

In the case of Jamstack, "static" does not mean "fixed" but rather "serverless" because there is no need to involve a server to handle dynamic parts. There are also many business benefits, which will be explained in detail below.

 

1-3 History of Jamstack

Did you notice that I wrote JAMstack and Jamstack?

 

The term JAMstack was coined in 2016 by developers who wanted to give a name to a different approach for building static websites. It refers to an approach that includes decoupling the backend and frontend, as well as separating the build stage and hosting stage, and incorporates many benefits offered by modern CDNs.

 

Originally, the J A M in Jamstack stood for JavaScript, API, and Markup. Client-side JavaScript adds dynamic programming during the request/response cycle. Reusable APIs are accessed via HTTPS using JavaScript, abstracting all server-side processes and database actions. The role of the API is to enable additional functionality. Templated markup must be pre-built during deployment using site generators or build tools for web apps.

 

As mentioned earlier, the terminology of Jamstack has grown and now refers not only to JAM, but also to the larger ideas and best practices behind it.

 

1-4 Efficient Learning of Jamstack

To fully leverage the benefits of Jamstack architecture, we recommend following the steps outlined below.

 

・Page delivery from CDN
・All code is managed with GIT
・Automatic build and atomic deployment
・Instant invalidation of cache
・Use of modern build tools

 

We will ensure that we can handle all of the information listed above.

 

1-5 Adoption of Jamstack

The Jamstack architecture has unique advantages and development methods that are unmatched, and with the support of tools, Jamstack has been gaining attention in recent years and the number of websites adopting it has increased significantly.

 

Let's take a look at the latest 2020 Web Almanac Jamstack adoption data compared to the previous year.

 

 

It's clear to see that Jamstack is growing steadily.

 

1-6 Jamstack Ecosystem

The widespread adoption of Jamstack methodology has had a significant impact in various areas. This includes the expansion of browser capabilities (such as Chrome and Firefox), the growth of the API economy, the increase in SSG (static site generation tools), the rise of headless CMS solutions, and the utilization of advanced CDNs (content delivery networks) for content delivery.

 

In addition, these growths have also led to a rapid growth of the Jamstack ecosystem. For example, there are currently over 300 static site generators being used in Jamstack projects. Furthermore, new services that provide API integrations for handling additional features such as search forms and videos are being created every day.

2. Why do we need to use Jamstack?

When making business decisions, it is important to choose the best solution for each use case and consider cost reduction. Today, it is necessary to open a website, but it is also important to compare the merits of different methods and decide how to open the website.

 

When talking to technical professionals about Jamstack, they will quickly understand its convenience. However, compared to traditional web development represented by WordPress, there are more opportunities to talk to business executives who are interested in the benefits that Jamstack brings.

 

So, what are the benefits of Jamstack?

 

2-1 Performance

With the ability to directly deploy pre-built static files from a CDN, it is possible to process them at a much faster load time compared to server-side or high-load client-side rendering solutions. Additionally, since static files are deployed, it is possible to quickly respond to unexpected spikes in traffic.

 

Website performance greatly affects user experience, subsequent website traffic, and SEO measures. User experience has always been difficult to track, measure, and optimize, but the introduction of Core Web Vitals metrics has made it possible.

 

These performance indicators are set up to measure the UX that users actually experience, so they are assumed to be effective measurements for how users feel about almost all web pages. (From Simon Hearnes' blog post "How to Improve Core Web Vitals").

 

The most important thing is that optimized websites are given preferential treatment over slow websites. Of course, there are also benefits in terms of better UX and easier readability, but most importantly, it will be displayed at the top when searched on Google, leading to an increase in traffic and revenue.

 

2-2 Security

Database and server security is handled by third-party services. In Jamstack architecture, the front-end and back-end are separated, relying on APIs to execute server-side processes.

 

Jamstack has security benefits that other methods do not have. Because services are clearly separated, it is difficult to find individual vulnerabilities.

 

2-3 Scaling and Hosting

Scaling can be tricky, but since we provide files from a CDN, you won't feel it. CDNs are almost infinitely scalable, so with the Jamstack approach, you can get that by default. Additionally, cost reduction is possible for hosting. CDN hosting for static files is much cheaper than traditional hosting.

 

2-4 Maintenance

Jamstack aims to push the front-end to the edge instead of directly managing the infrastructure. By eliminating the maintenance of databases, plugins, and hosting servers, it leads to a reduction in operational and development costs.

 

2-5 Developer Experience

From a developer's perspective, is there anything not to be happy about? Netlify and Vercel already have a Github → CI/CD → CDN flow in place. Features include automatic preview, easy rollback (no need for backups, previous versions can be published immediately), the ability to run and debug cloud functions locally, redirects, HTTP headers, and management through a single configuration file.

 

In addition to the above, with flexibility, meaning no restrictions between front-end and back-end, it is possible to have more focused development by adding functionality using third-party API solutions. Instead of finding solutions within the constraints of the back-end, it becomes possible to first approach the project using business logic.