What is the JAMstack ?

What is the JAMstack ?

J is for javascript, A is for API and M is for makup :

  • JavaScript in the browser as the runtime. JAM stack applications are coded as SPA using javascript framework like React, Angular or Vue.

  • A JAMstack will never integrate interaction with a database, instead it will use reusable HTTP APIs in charge of maintening the service they provide.

  • Prebuilt markup as the delivery mechanism

Prebuilding Markup

The idea here, is that all the markup served by the JAMstack application is generated once and for all during the build process. Therefore, the generated markup up is static and can served directly by a CDN to the brower.

Gatsby is such a site generator. You code all your application in React and with all datas made available to your application through GraphQL (it can be local or remote data), the buid process will generate all the static markup. This phase is typically about server-side-rendering and rendering and storing the markup of all the pages of your application.

Microservices and serverless functions

This way of decoupling the presentation and the business layer is a move in the same direction than the microservices architectecture and serveless functions. Backend teams are moving away from one large monolithic API toward much smaller services with more narrowly defined responsibilities

Instead of an SPA using a single API the JAMstack choose to say SPA will typically communicate with many different APIs or microservice. The amount of fully managed, reusable APIs available as managed services will only keep growing and JAMstack is surfing on that wave.

Types of JAMstack Projects

In their simplest forms we can classify JAMstack projects into two main categories. In the fist type, the content is coming simple text file (html, markdown and so on), the second type the content is coming for external CMS.

HTML Content

A directory in the source is dedicated for the storage of the content. Typically it could be file with content formatted at the markdown format. Next we can imagine that each file should be a blog post page in the SPA. Therefor the SPA will implement that logic in the code. During the build process, each file will be read and parsed from the filesystem and its content we be used to create and render a page of the SPA.

Here plain-text files that can be edited directly in an editor of choice and kept under version control.

Content from a CMS

First when I talk about CMS, I mean Headless CMS. Time we’v etaken for granted that our CMS determines rendering is over. HeadlessCMS is used for online content editing and provide API so that application can retrieve the content from the CMS. Use of Headless CMS by JAMstack illustrate perfectly the A(pi) in the JAMstack name.

There are CMS which are headless only like Netlify CMS or Contenful but all majors CMS players like Wordpress and Drupal can also be used as Headless and delegate their rendering to a JAMstack application.

During the build process, the JAMstack application will fetch all the content it is configured to fetch (this is done through a graphQL query with Gatsby) and the server-side-rendering can generate all the static markup of the application.

Why the JAMstack is great

Blazing Fast Website

Since JAMstack generates all its content during the build process, all its content can served by a CDN. There is no fastest way to serve files. Moreover, the use of CDN makes it possible to distribute the load of the requests.

Maximal security

JAM stack application are as static Web sites true fortresses. Without databases, without plugins, without dynamic software running on your server, the possibility of code injection and hacks is greatly reduced. Removing communication with a CMS removes most of the weaknesses of classic web application. The remaining vulnerabilities are coming only from the use of external APIs used by the application. SSL certificates are also easy to install and are available for free through automated certificate authorities such as LetsEncrypt.

Cost & Scalability

To scale a JAMstack is very easy since you just need to scale your CDNs which is a pretty common and easy service you can order to your hosting provider.

Developer experience

The de-facto separation between the front-end team, therefore the people developping the JAMstack application and the back-end team, therefore the people developping the APIs used by the application allows both teams to work independently from each others.

In addition for many modern web developpers, to be able to develop a web application as a SPA with all the modern tooling coming from their favorite javascript framework is an appreciable comfort.

De-Facto Optimized SEO

A website which loads fast brings the following benefits :

  • Traffic and Engagement: You get more site visitors on a fast site that translates to user engagement.

  • Page Ranks: Fast websites earn not only better but higher browser rankings. Google ranks sites higher which, load in less than one second.

  • Sales: Better SEO rankings and user engagement bring more earnings. A fast site encourages a visitor to stay much longer; hence, more chances of lead conversions.

What is Gatsby and why you should use it ?

I will dive moredeeply in Gatsby in coming article, but I couldn’t talk about JAMstack without at least talking a little about Gabtsy.

What is Gatsby?

Gatsby is a React-based, GraphQL powered, static site generator. It weaves together the best parts of React, webpackreact-router, GraphQL, and other front-end tools in to one very enjoyable developer experience. Gatsby is far more like a modern front-end framework than a static site generator of old.

It uses powerful preconfiguration to build a website that uses only static files for incredibly fast page loads, service workers, code splitting, server-side rendering, intelligent image loading, asset optimization, and data prefetching.

What makes Gatsby special?

First, is the way Gatsby uses GraphQL to build it’s data layer. Gatsby is made to collect your data from wherever it may be: Markdown, JSON, headless CMS and so on! And at build time, all the content is fetched by an internal GraphQL server and inserted into your React components.

Secondly Gatsby ecosystem is very rich, it have the same feeling I had with Drupal or Wordpress. If you have a special need, just check the plugin search engine, you will certainly find what you need. In addition the documentation, the tutorials and the starters are a great quality.

And last but not the least, gatsby dedication to performance is awesome. Every aspect of performance and accessibility is a point of emphasis, and you can really feel that in the final product.