JAMstack: JavaScript, API and Markup

In this article, we share some of the main concepts and guidelines for introducing to the world of JAMstack.

JAMstack means JavaScript, API and Markup. The word “JAMstack” was created by Mathias Biilmann to describe a “modern web development architecture” based on client-side JavaScript, reusable APIs and a pre-built Markup.

With the Static nature of a JAMstack application makes scaling easy and causes little or no development overhead. The JAMstack approach can also improve your application’s security posture.

Another advantage is the large amount of functionality that was traditionally processed in the back-end, is now carried out in the user’s browser. And the fact that the Stack is based on JavaScript is a great plus for web developers.

This architecture has become very popular in recent years, especially with the arrival of new requirements from browsers and particularly from the same users who request faster loading websites. This approach brings benefits such as increased performance and security.

Now, let’s see why dynamic sites are not always a good option…

Challenges facing dynamic websites

Starting with performance, no matter how well we optimize all dynamic websites, they’re still not fast enough… That’s because of the number of steps that have to be taken to display the requested content every time someone visits the website.

Also, we are at the point where every website that is being built is using WordPress (which is maybe not the best choice, but still we love it ❤️) to give an example. This is the most popular CMS, overloaded with add-ons, scripts, and a lot of other stuff that only slows down what we develop. In addition, we have issues regarding security and expensive hosting.

Maybe you’d be interested in reading: How we redesigned our Website in WordPress

When are we not building a site with Jamstack?

Any project that is based on a close connection between client and server is not built with Jamstack. This includes:

• A site developed with a server-side CMS such as WordPress, Drupal, Joomla, or Squarespace.
• Monolithic web application built by a server that is based on Ruby, Node, or another backend language.
• The single-page application that uses isomorphic representation to create views on the server in runtime.

Why start thinking about static websites

When a browser requests the URL of a website, the server returns the static page in its entirety. No database calls are made, and no content is generated on the fly: the content is already there.

Speeds up your load times

The fact that JAMstack’s websites don’t have to make any calls to a database makes the loading time exponentially faster.

Safe and secure

The delegation of server and database side operations eliminates many points of failure and security vulnerabilities.

The front-end and the CMS are disconnected

It doesn’t have a CMS that dictates how it should structure its content and pages. Not having a CMS linked to the presentation layer gives you the flexibility to create anything you want in the front-end while using the API ends to extract content.

Reduce the Cost of Scale-Up

This is not dealing with expensive run times or complicated server configurations, it’s just dealing with static files that are served on the client-side.

Greatest Developer Experience

Front-end developers can focus on the front-end, without being tied to a monolithic architecture. This usually means faster and more focused development.

Know about our Nearshore services.

Statistical website generators

For the front-end, there are already several static generators as we will see below:

• NextJS: is a React framework for SSR applications, statically generated applications, single-page applications, progressive web applications and desktop applications.
• Gatsby: is a free and open-source framework based on React that helps developers to create incredibly fast websites and applications.
• NuxtJS: is the Vue.js framework for universal applications, statically generated applications, single-page applications, progressive web applications and desktop applications.
• Hugo: The world’s fastest framework for creating websites. It is one of the most popular open-source static site generators. With its incredible speed and flexibility, Hugo makes creating websites fun again.

This lets us save development time and focus more on writing code than on optimizing our site.

API, markup and hosting

The content can be static or dynamic HTML that is served by an API through a Headless CMS, such as Contentful, DatoCMS, or WordPress API. Once a change is made to the CMS, a new compilation of your site will be turned on and then implemented as static actives.

Your JAMStack site can be hosted easily and many times for free in cloud services like Vercel which is useful to complement with gatsby and next.js ( by the same founder of the last one ????), Netlify being one of the drivers of this stack, Amazon S3 or even a simple CDN like Cloudflare. To sum up, it’s HTML, CSS and Javascript ????.

In the next article, we’ll go further into Gatsby and Next.js, which are based on React. We’ll see which one to choose according to your application and the advantages of each one.

Do you want to know more about Clarika’s development? Leave us your question here.