Multithreaded.Link
menu close

What you need to know about JAMstack

Overview

JAMstack is a new web development architecture designed to produce high-performance sites that don’t cost a lot to host and are easy for developers to work on. To understand how this works we must first understand the JAM in JAMstack: JavaScript, APIs, and Markup. Instead of a traditional web application where pages are generated on the fly by the server all pages and page templates are pre-compiled in some form of Markup. All dynamic processing is done through JavaScript on the client side. Instead of running on a specific server backend requests are all done by JavaScript through APIs. These can be APIs you’ve developed or third-party APIs that you just use.

This is a very different application stack than traditional application stacks. For example, the LAMP stack (Linux, Apache, MySQL, PHP/Python/Perl) and the MEAN stack (MongoDB, Express, Angular.js, Node.js) have specific databases and backend programming languages. JAMstack doesn’t need a database or backend programming language and lets you use any JavaScript framework, API endpoints, and Markup compiler you want. As long as the application adheres to the three tenets of JavaScript, APIs, and Markup it’s a JAMstack application. Let’s examine them in more detail.

Javascript

JavaScript handles all of the dynamic interaction and the API calls. You can use any JavaScript framework you want or even no framework. This is the backbone of your application, so for best results you should be using a modern framework that will keep the code maintainable. Some good candidates are React, Angular, Vue.js, or Marko.

APIs

Need to save something? Use an API.

Need to retrieve some data? Use an API.

Anything that would traditionally be done by a backend server is abstracted away into an API. This lets you build parts of the application out of simple microservices and offload parts you don’t want to build or maintain to third-party services. Which APIs you want to use will depend on your specific use-case. Some parts of the application are time-consuming to build and maintain, so I would offload those to dedicated services. This would also be a good place to use a service like AWS Lambda for the parts of the application that do need some custom code that can’t run in the user’s browser.

Markup

Markup is a general term for templates or pre-compiled static content. In a traditional application architecture pages are generated dynamically using a language like PHP. In a JAMstack application the pages are fully or mostly already generated and are stored as static HTML or template files. This way they can be served easily and instantly from the cloud without worrying about an application server.

There are many different way you can do this. Here are a couple:

  • Use a static site generator like Jekyll. A static site generator can compile a bunch of markup or text files into static HTML files.
  • Use a JavaScript templating language like Underscore.js. You can store the templates in the cloud and retrieve them easily with JavaScript.

Best Practices

These are not strictly required for JAMstack applications, but they are highly recommended practices.

It is highly recommended that you serve your static content files from a CDN. A CDN serves your site from whichever server the visitor is closest to. This gives you much better site response times.

It is also highly recommended that you use a modern JavaScript build pipeline and modern JavaScript tools. The JAMstack is a modern easy-to-maintain, high-performance tech stack, so the tools and software you use should also be modern.

Sample application architecture

Let’s take a look at how we might build a blog using this stack. Here are the core technologies I would use for this:

  • Jekyll is a great tool that lets you generate static HTML out of a variety of formats. You can generate web pages out of plain text, Markdown language, Textile markdown language, etc.
  • Amazon CloudFront can store and serve the generated HTML to users around the world rapidly. It can also handle large surges in traffic easily so scale won’t be an issue.
  • Algolia provides Search as a Service. Using their API you can have high-quality article search results without needing a server or database.
  • Facebook Comments lets you have comments on the site without managing a backend service or user system. Over two billion people use Facebook so it is a natural choice because people will comment more if they don’t need to make a new account to do it.
  • Any modern JavaScript framework. There are going to need to be navigation menus, newsletter pop-up dialogues, and a host of other dynamic features. There are many frameworks that can do this well and whichever is your favorite should work.

Using this architecture you can write your articles in plain text or a markdown language, compile the articles into static HTML pages, store the pages in the cloud, and offload users, comments, and search for other people to maintain and develop. That makes everything easy to maintain, host, and develop. I will have to switch this site over to JAMstack in the future!

Leave a Reply

Your email address will not be published.