JAMstack: The Cornerstone of Modern-day Web Development

Back to blog

6 min to read

JAMstack: The Cornerstone of Modern-day Web Development

JAMstack, web dev architecture based on JavaScript, APIs, and Markup, is the perfect answer to modern-day web development problems.

Denis Kostrzewa

By Denis Kostrzewa
December 19, 2018

For the past several years, the web development scene has been gradually evolving. However, developers are most likely well aware of certain drawbacks when it comes to using a traditional CMS like Wordpress and Drupal. With Google improving its Javascript crawling and rendering capabilities, and favoring speed as one of top ranking factors, it is somewhat apparent why static, pre-rendered websites are emerging as the perfect solution for modern-day web developers.

I have written about the problems of today’s web in one of my previous posts, here I’d like to explain the main idea behind JAMstack, how it differs from traditional stacks and what’s in it for the clients.

What is JAMstack?

To put it as simply as possible, JAMstack is a handy abbreviation coined by Mathias Biilmann, the CEO of Netlify. It stands for JavaScript, APIs, and Markup. It represents a modern web development architecture that gives devs an opportunity to rely on the advantages of a static website, which include better web performance and security benefits, while still retaining the dynamic attributes of a database-oriented CMS without the database.

It’s imperative to point out that with JAMstack the rules and benefits are quite self-explanatory and straightforward:

  • JavaScript (on the client side) is carrying out dynamic programming during the request/response cycle.
  • Reusable APIs are accessed via HTTP with JavaScript abstract all server-side processes or database actions.
  • The template markup ought to be prebuilt at deploy time, utilizing a site generator or a build tool for web apps.

To present this in context, let’s compare the reigning champion of web development, LAMP stack process, with the challenger, JAMstack.

Sign up for our JAMstack newsletter!

Get exclusive web development case studies in your mailbox!

Static Dev Process vs Dynamic Dev Process

jamstack vs lampstack

The LAMP stack web development architecture originated from four open-source components that developers, in the early 2000s, adopted to build websites: the Linux operating system, the Apache HTTP Server, the MySQL database, and the PHP language.

The way things work for LAMP stack built websites is that with every user request for a page, a server first queries a database and combines the result with data from the page's markup and plugins to generate a HTML document in the browser.

JAMstack websites, on the other hand, serve cached static files immediately when a request is made. It is able to do so because there is no need to query the database as the files are already compiled and get served to the browser from a CDN.

In short, the JAMstack workflow drastically reduces cumbersome development hindrances and excess maintenance.

What Triggered the Need for JAMstack?

With mobile usage being on the rise, online businesses are facing certain challenges. To begin with, the attention span of the average user is dropping rapidly. Today most people want to get their information or access to a website/video straight away. That’s why most online businesses are keen on delivering faster access to content for their audiences. Global internet brands in that regard have stormed the market with their own solutions.

Google launched AMP Project, an open-source initiative that aims to improve the content ecosystem for everyone. In short, AMP pages are built with 3 core components: AMP HTML, AMP JS, and AMP Cache. Their goal is to make pages faster across devices and distribution platforms.

Facebook has Instant Articles aimed to solve some specific problems Facebook users are faced with, especially slow loading times on the mobile web.

Even Apple released their News Format as a solution for dynamic, animated multimedia content delivery speed.

Industry trends are directed towards powerful mobile tech and the appearance of fast modern web browsers, this is leading devs to seek practical solutions. That’s where JAMstack comes in! Mind you, other things fueled the need for the JAMstack as well. For starters, the current API-economy, SSG (Static Site Generators), and advanced CDNs (Content Delivery Networks).

How JAMstack Answers Modern-Day Web Development Problems?

To understand how JAMstack operates in practice, we have to differentiate between the following websites:

  • Pre-rendered websites (aka. Static Websites)
    Basically, a pre-rendered website is a website comprised of HTML pages with pre-populated content. The browser simply requests an URL of a static page, after which the server returns the complete static page. The beautiful part of this system is that no calls are made to a database and there’s no content generated on the fly. In other words, the content being requested by the user is already there. Don’t misunderstand - this doesn’t mean that every single page is being put up manually, and this doesn’t mean there can’t be dynamic elements on those pages. For that reason, various different tools handle diverse layers of this technology stack.
  • Dynamic websites
    Web performance is an essential part of modern-day web development and no matter how well a website is optimized, dynamic websites end up being grindingly slow, and that’s because there are too many steps that need to be taken before the actual content is loaded every time a user accesses the site/page.

An additional issue here is that many websites are being constructed using traditional CMS (i.e. WordPress or similar) solutions. While these are not bad per se, but over time they practically become encumbered with a massive bulk of scripts, plugins and an assortment of additional elements that actually feel redundant. Due to all of that, load times are reduced drastically for every website or ongoing web development project.

What’s in it for the Clients?

jamstack benefits

When discussing JAMstack with a tech-savvy audience, the room fills with awe and it all sounds great and understandable. But more often than not you are faced with a client that needs a bit of education, for the lack of better word, about JAMstack and it’s benefits over the traditional web development represented in WordPress and/or Drupal. The best way to make that client understand JAMstack is to explain the business benefits of using it.

Performance

As I mentioned already page load speed is becoming one of the most important ranking factors. What makes JAMstack so fast is that it rules out the database from the web architecture, which means a website doesn’t have to run multiple queries.

In essence, you can argue that static sites are faster sites with better rankings, which in turn equals more traffic and more $$$.

To make sure the client sees the difference in speed results, if you don't have your own case-study, show them how Smashing Magazine website became 10 times faster when they moved from WordPress to a static site.

Security

With JAMstack architecture, frontend and CMS are decoupled and server-side processes are run by APIs. That alone reduces the potential attack area.

You can tell your client that a static site equals a more secure and reliable site, which in turn equals fewer security expenses.

Workflow

There’s a majority of dynamic CMS websites that are becoming cluttered, this has proved to be a huge problem, especially in the past few years. Sooner or later this will also become a problem for your clients, simply because they’ll be worrying about way too many options and features in their CMS, most of which are rather unnecessary from a practical standpoint.

You can argue that ditching database, plugins and hosting maintenance will save them $$$ on top of reducing operational and development costs.

JAMstack is Rapidly Evolving

The JAMstack ecosystem is rapidly evolving and a plethora of tools and resources already available are pushing the border of what you can do with a static website to the new heights. We’ve already passed a crucial transition from backend to the more powerful and more effective frontend development. We’re now on the road to truly make a better internet for everyone.

Have a project at hand that is perfect for JAMstack? We can help in that regard.

CLICK HERE to schedule 1-on-1 talk and learn more about what we can do for you and your business.

Share

About author

Denis Kostrzewa

Denis Kostrzewa

Technology Enthusiast, lover of any kind of music. I like meeting new people, marinated tofu and building stuff from nothing. Not necessarily in that order.

Readers also enjoyed