Have you already heard about the new JAMstack web development approach? It offers the possibility to write web applications on your favorite framework, manage content from the admin panel, and at the output receive fully valid HTML pages built in accordance with the latest SEO, PWA recommendations. Sounds intriguing, isn't it? Let’s see what this JAMstack is and what else it can offer:
What is JAMstack?
To begin with, let me tell you what JAMstack actually is and why it is superior to traditional websites.
The first thing that you should know is that JAMstack is not technology. It should better be called a methodology or approach that offers a variety of tools to choose from when building static sites. It appeared not so long ago but has already gained popularity among developers and a pretty decent community.
JAMstack is an abbreviation where “J” stands for JavaScript, “A” for Application Programming Interface (API), “M” for markup. The stack of these three elements, thus JAMstack.
Now we know that in order to create a static website that can compete with a dynamic one, you should use the following three components:
JavaScript — to add interactivity to your website;
API — the source of information used by the website;
Markup — a content generator (also called "template generator”) that allows you to create page markup.
JAMstack Composition
Let’s look at the mentioned-above components a little bit closer:
JavaScript
JavaScript is responsible for loading all data into your site (as well as any other dynamic programming is done on the client-side). JavaScript can be in any form you want! React, Vue.js, vanilla JS, etc.
API
API is a way to access data. What would normally be on your server is now abstracted as an API. In most cases, your data will be stored on third-party services known as headless JAMstack CMS, such as Netlify CMS,Contentful, Kentico Cloud, Directus, etc.
Markup
Markup is a content/template generator that allows you to create page markup. Markup has two common manifestations — HTML and XML. You might wonder why I talk about JAMstack markup if every website has it. Is it somewhat special? Yes. The point is that, unlike dynamic sites that create a new HTML page for each request received (this involves a database query and combining the results with markup and plugins), JAMstack pages are created during deployment using a Static Site Generator (SSG) such as Gatsby, Jekyll, Hugo. This means that the user receives content with minimal latency on demand. This not only makes the site fast but also makes it much more secure due to the lack of a database query.
What Is JAMstack Website?
Of course, JAMstack is not a new concept at all, and developers have been building static sites using JavaScript for years. So what makes a JAMstack site different from a regular static site?
First, as it was already mentioned, JAMstack is a methodology, not a result. You can say that every JAMstack site is a static site, but not every static site is a JAMstack. Thus, to reveal the differences, you need to understand how building a Jamstack site differs from creating a classic static site.
The distinctive feature of JAMstack sites is that the content is part of the git repository, along with the site core code and templates. This approach allows you to follow generation-deployment cycles whenever you change your code or content. Having git-based code and content allows you to make all changes into full-fledged commits, which means that each site update is saved as a snapshot and is characterized by immutability. The ability to return to a specific state is a hallmark of Jamstack sites. In the past, the content of static sites was uploaded via FTP (File Transfer Protocol), and therefore the site files changed with each update without the ability to save their snapshots in time. This led to many problems, including the consequences of unpredictable changes in the web environment and the presence of invalid cache files. JAMstack sites avoid this kind of annoyance because modern CDNs have the ability to flush the cache entirely.
Typically, the building blocks of a Jamstack site are JavaScript, an API, and an embedded markup language. However, the site must adhere to the JAMstack architecture, but not all of these elements, in order to be a JAMstack site.
JAMstack follows a path of simplicity and is a direct response to the increasing complexity of web page development. This is achieved with modern development tools, CDN builds, and a growing ecosystem of APIs for outsourcing complex functions.
The JAMstack demonstrates an effective move away from server-side technology.
Traditional Workflow vs JAMstack Part 1.
Let’s see how different is JAMstack approach from a traditional one:
Traditional websites and CMS depend on server-side code that has to be rendered and return HTML after each request. They also have a database that contributes to latency. Moreover, it is not an easy task to scale a traditional website when you need more servers and higher availability. With the growing need for download speed and ease of maintenance for your finished product, traditional CMS are quite difficult to cope with. These are some common challenges that you can face:
Vulnerability to hacker attacks;
With a large influx of visitors, the server stops responding;
Low site speed;
Need for constant server support and moderation.
Of course, these problems are not insurmountable, but they definitely require the participation of an experienced web specialist, whose work might sometimes cost a pretty penny. What is more, imagine a situation when a site is hacked, or it starts to crash, or takes a long time to load. This always implies a loss of money for the client.
Solution that JAMstack Offers
With JAMstack, you don't need a traditional web server to deploy a static site. A static site can be hosted almost anywhere, which solves the problem with the server — you just do not need it.
Safety. The most an attacker can do is copy your HTML files. Well, good luck, they are already public
Site speed. It is even easier here - the page is already assembled, it is not being built at runtime. Upon request, the user receives a simple HTML file that is already filled with content. As a plus, nice features of Netlify Asset Optimization allow us to keep the weight of our page to a minimum.
No cyclical support, backups, or moderation. Everything is stored in Github / Bitbucket / GitLab or in your archive on your hard drive. And in terms of generated content, in the case of Netlify, your site is hosted on thousands of CDN servers around the world.
Traditional Workflow vs JAMstack Part 2.
Here's a quick visual example for you to understand the key differences between the traditional workflow and JAMstack:
Since this picture only represents quite a superficial view of what is actually going on, let’s have a little bit closer look:
How the Traditional Workflow Looks Like
Building and hosting are coupled.
Whenever a user makes a request, there is a long process with various interactions before the page is served, including the back-end, database, server, cash, and browser interaction.
Each core update is sent to production servers (in most cases via FTP). The database, in turn, has to be maintained/updated.
All content updates are pushed via traditional CMS.
How the JAMstack Workflow Looks Like
In contrast to the traditional approach, here building and hosting are decoupled.
Whenever a user makes a request, the page is sent right to the browser from a CDN since it is already compiled.
Each core update is pushed via Git. JAMstack websites use modern tools such as SSG.
All content updates are also pushed via Git or JAMstack CMS.
Now, let's look at several reasons to use Jamstack in your next projects.
How JAMstack can Benefit Your Business
JAMstack offers a lot of advantages that you can use to facilitate your business.
Speed, Performance, and SEO
The use of modern static generators allows you to combine the simplicity of maximum SEO optimization with incredibly fast page loading speed and the mechanics of modern, high-quality optimized applications. All these make JAMstack ecommerce websites the best.
Price
Thanks to the tremendous work of the community, which is constantly working on improving the tools and services that provide free methods for assembling, storing and delivering JAM sites, the price of development does not differ from the price of a good site created within the framework of the traditional web architecture.
Safety
The site receives content at the build stage and is not directly connected to the server at runtime. Thus JAM sites are devoid of most of the popular vulnerabilities.
Progressive web application
JAMstack compliance of sites with PWA philosophy no longer requires resource-intensive development for:
Offline mode of a website,
Possibilities of installing your site as an application on iOS / Android
Placement of the site in the Google Play directory
Sending push notifications to your users
Affordable Support and Fast Implementation of New Functionality
The fast-growing community creates a large number of open-source tools, an automated CI/CD process makes website maintenance much cheaper than using conventional technologies.
Content Management Systems
The JAMstack is not tied to any particular way of storing information, you can use everything that has REST API support for this. You can even build your site from static files with marked-up text and store it in git, thus getting an advanced backup system for free.
Hosting
The architecture itself implies the ability to store a fully generated frontend in the form of static files. This allows you to avoid using paid hosting on the server and instead store the current version of our website on a CDN (Content Delivery and Distribution Network). This means that as little time as possible passes between the transition of the user to the page of your site and its loading into the browser.
Which Projects Are Good for JAMstack
Here are some JAMstack examples of projects where this approach will bring maximum benefit:
Landing pages
Business cards and corporate sites
Media
Catalogs and shops
Useful Tools
JAMstack is just an approach for which there are already enough tools on the market, but prefer to use the following ones. So here is the list of the best tools for 2020:
Gatsby
Gatsby.js is a JAMstack framework based on React.js. It allows our pages to remain static only for search engines, while the user gets a hyperdynamic site with pages that open at the speed of light.
Contentful
Contentful is a content management system for static pages. This is WordPress, which does not preserve the links between templates and data in the database, but instead changes the data directly in the HTML files.
Netlify
Netlify is a very easy-to-use deployment system that allows you to connect most of the popular file hosting services with a JAM application, and even on the HTTPS protocol.
Final Words
The JAMstack combines the solution to the problems of the previous approaches and seems to be quite promising and achieve worldwide popularity. But is it a revolution? Of course, there is nothing groundbreaking new and special, but it is indeed the most advanced methodology of the last two years, which offers tons of benefits.
OTAKOYI developers already adopted JAMstack and loved it right away. We highly recommend trying it out. If you need help with that, feel free to contact our team.
