Jamming away with JAMstack

Pragati Rithekar
Globant
Published in
5 min readSep 21, 2020

The modern way of building web apps

Modern Web Development — The place to be today! This requires you to think differently, bring innovation into play, and ultimately — think smart! For this, we need to move away from the traditional way of building websites i.e., using a web server. Sites built this way needlessly slow things down, provide way too many opportunities for an attack, and are often expensive to scale.

Wait! Did you read it right? A website without a web server? Sounds weird?

NO, it is not! This is where JAMstack comes in.

Although, why would you need to move away from the traditional way of building websites with a server? Let’s have a look.

The above scenario seems pretty neat, right? Why change it? Hold on. Now try using this for a website that would get a lot of hits. The server would crash unless we provide it some help. Enter — Load Balancer! They act as a reverse proxy and distribute network or application traffic across multiple web servers.

Umm. Still doing good. Then we all thought — Maybe there are some assets that are static in the web app and don't need to do the roundabout from the server. And we thought of putting those on a different location like a CDN!

OK! So now we have multiple web servers to handle the traffic and we put in a load balancer in front of them to share the load. We also started abstracting where the data lived. So now the DB servers share the load with the data that is specific to it.

JAMstack happens to be one of the multiple solutions present out there to handle this scenario.

JAMstack projects neatly separate the frontend pages and UI from the backend apps and databases. Freed from backend servers, the frontend can then be deployed globally, directly to a CDN. That’s right, a CDN!

Now, you must be thinking, one more library/framework to learn.

Hold on! JAMstack doesn’t change the technologies you use — JAMstack sites can be built in Javascript, PHP, Ruby, Python, React, Vue, or virtually any language. It’s not a collection of specific software, it’s a set of best practices.

JAMstack is a modern way of building websites & web apps.

What’s in the “J-A-M”, you may ask? It stands for:

JavaScript: Any dynamic programming during the request/response cycle is handled by JavaScript, running entirely on the client.

APIs: All server-side functions or database actions are abstracted into reusable APIs, accessed over HTTPS with JS. Be it SaaS, third-party services, or custom-built.

Markup: Templated markup should be prebuilt at build time, usually using a site generator for content sites, or a build tool for web apps.

Ok, enough of the hype — Let’s see the real deal now!

How does JAMstack work?

Code development & deployment

The traditional way — Developer completes a website development and ships it to a web server.

The JAMstack way — Developer uses a Static Site Generator to produce pages and assets. She then ships the built files to CDN. So, before deployment, the entire front end is prebuilt into highly optimized static pages and assets.

Request for a web page from the client

The traditional way — The Server goes through a series of interactions between the browser, layers of caching, server, back-end code and produces the HTML requested.

The JAMstack way — The CDN provides the pre-built files on demand.

Updates

The traditional way — Core updates are pushed to production servers, often through FTP. The database must be maintained or updated.Content updates are pushed through traditional CMS, like WordPress or Drupal.

The JAMstack way — Core updates are pushed through Git; the site gets re-built entirely via modern build tools like static site generators. Content updates are pushed through Git or a static site CMS.

How is JAMstack beneficial?

  • More secure. Server-side and database are delegated which reduces failures and surface areas for attacks.
  • Cheaper scaling. Cost automatically reduces owing to the lesser complexity during development.
  • Performant. The user experience is super speedy as the static content is served via CDN.
  • Happy developer. The reduction of bloat & maintenance + refreshing flexibility in workflows diminishes depression and alcoholism among developers. :)

It’s not a collection of specific software, it’s a set of best practices that combines:

GIT WORKFLOWS

The JAMstack ties deployments closely to a Git-based workflow. Git brings the rigor and safety of version control to web projects allowing support for large projects with numerous contributors.

MODERN BUILD TOOLS

With a build run every time a deploy happens, The JAMstack brings full support for linting code, transpiling javascript, compiling CSS, and optimizing HTML and assets.

CDN TECHNOLOGY

First deployed by large enterprises, the JAMstack democratizes the use of CDN technology to deliver web content from endpoints as close to users as possible.

Is JAMstack the silver bullet?

When should you not consider JAMstack?

Any project that relies on a tight coupling between client and server cannot be built with the JAMstack. This would include:

  • A site built with a server-side CMS like WordPress, Drupal, Joomla, or Squarespace.
  • A monolithic server-run web app that relies on Ruby, Node, or another backend language.
  • A single-page app that uses isomorphic rendering to build views on the server at runtime.

Closing Thoughts

Like mentioned earlier, JAMstack is not about specific technologies. It’s a new way of building websites and apps that delivers better performance, higher security, lower cost of scaling, and better developer experience. Worth giving a thought!

Keep on reading, keep on exploring. You never know which thought/idea would change your life!

--

--