JAMStack

TL;DR: JAMStack is a term used to identify a way of building web applications using JavaScript, API's, & Markup

A Stack is a term that refers to all the technologies that are used in an application.

  • For example
    • LAMP (Linux, Apache, MySQL, PHP)
    • MEAN (Mongo, Express, Angular, Node)
    • MERN (Mongo, Express, React, Node)

JAM stands for: Javascript, API's, & Markup.

The JAMStack is client oriented and not server oriented. For this reason, when the business logic of an application is implemented in the client side, it needs a way to access to databases, private services, etc. This can be accomplished by consuming API's.

The third part of the JAMStack refers to Markup. This means that all the application's views are precompiled and then they are used normally.

In traditional web apps, everytime that the server gets a petition for a page it fetches all the data that is needed and then it generates a view to represent that data. Normally, generating those views everytime the server gets hit can be time consuming.

The JAMStack skips the data fetching and view generation phases at runtime, executing them at "compilation time".Those generated views are ready to use and can be easily stored in CDN's and, therefore, all the application's views will get all the benefits of using a CDN (improved response time, resilience, etc.).

Traditional web development cannot use CDN's for the views because each view is re-created every time.

Every JAMStack application needs to follow the next rules:

  • Javascript is used in the client side for interactivity.
  • All the views are precompiled and, if possible, distributed by a CDN.
  • Data is consumed via API's.

Generating precompiled views for an application can be a hard task to achieve; for this reason, a framework is commonly used for this task.

Some frameworks that can precompile views are:

  • Sapper (Svelte)
  • NextJS (React)
  • Nuxt (Vue)
  • Angular Universal (Angular)
  • Gatsby (React & GraphQL)

Pros and Cons

JAMStack applications can have multiple advantages vs the traditional ones:

  • Better Performance. As pages are generated at compile time, the time to first byte of the applications can be decreased significantly.
  • Cheaper. JAMStack applications don't need a custom server to live; therefore, they can be hosted by really cheap (sometimes free) solutions like Netlify, Vercel, among others.
  • Easier to Scale. JAMStack applications can be distributed by any kind of CDN, and they offer multiple plans to serve your files in any place!
  • Highly Secure. With the usage of API's as the only point of contact with server-side processes, surface areas for attacks are reduced and can be leveraged to experts.

All of that sounds really cool, but of course there is no silver bullet for all the scenarios.

If you want to use the JAMStack you need to consider the following:

  • Custom/Dynamic Features will need to be excluded from your application. This is because those features require server-side logic most of the times.
  • Template Updates Require Coding because they need to be pre-compiled everytime a change is made.
  • Highly Dependant on Third Party Systems can be a double edged sword. You can leverage tasks to third party services, like hosting, security, caching, etc., and it can be really beneficial, but remember that if any of them has an outage, so will you.
  • Compilation Time can become long and tedious if your project starts getting really big.

Conclusions

I would encourage you to deeply understand all of your projects' requirements and start asking questions like: What do they need? How are they going to scale? Is this project a correct fit for this stack?

JAMstack is definitely a good solution for many applications, but not all of them. Selecting a stack for your app needs to be reviewed carrefuly, you need to understand what are you earning and what are you loosing.