JAMstack: The Cornerstone of Modern-day Web Development

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

We’ve written about the problems of today’s web and static site generators as reliable WordPress alternatives , but here I’d like to explain the main idea behind JAMstack, how it differs from traditional stacks, why is it a better solution for web developers and clients.

What is JAMstack?

To put it as simply as possible, JAMstack is a handy abbreviation coined by Mathias Biilmann, the CEO of Netlify and 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 HTTPS with JavaScript abstract all server-side processes or database actions.
• The templated 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.

Static dev process vs dynamic dev process

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, 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 an HTML document in the browser.

JAMstack websites, on the other hand, serve 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 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), number of headless CMSs and advanced CDNs (Content Delivery Networks) for better content distribution.

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 a 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. Dynamic websites can be as fast as static but with it is much harder to achieve it and with a much heavier toll on your resources. On top of that with so many moving parts, you are vulnerable to malicious attacks from many endpoints.

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, 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?

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 lack of a better word, about JAMstack and its’ benefits over the traditional web development represented in WordPress and/or Drupal. The best way to make the client understand JAMstack is to explain the benefits their business would reap by 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.

Take a look at the performance scores for this page alone:

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 performance scores, 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. Or simply pick one of our JAMstack case studies .

Security

With JAMstack architecture, front-end 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.

Scaling

Finally, static content in JAMstack websites can be placed on a CDN what automatically makes it easier to dynamically scale.

The limitations of JAMstack

Yes, JAMstack is revolutionary in many ways. Yes, it can help you create a much better website, or present your company way better than the competition. However, like any other technology, it also comes with a couple of limitations.

For example, if your web project is based on frequent updates, real-time updates, and dynamic features users can interact with, though JAMstack has done a lot in this matter, it may not be the best option for you.

Galleries, comments, forms, and other interactive features can only be added to a JAMstack website using third-party solutions. Although it doesn’t have to be a flaw and a website can still work like a charm, for some managing many add-on providers can be a burden.

Finally, any change in the design must go through the developer, in case you are not one. So you’ll probably have to stay in touch with your JAMstack developers (which doesn’t have to be a bad idea at all).

Getting started with JAMstack

I know, that’s a lot to digest all at once, if you’re not a JAMstacker. So let me introduce it to you a bit better-going step by step through the set of modern tools that can help you build a JAMstack website.

Before I start, know this: JAMstack is about frontend-centric development. If you are generally new to web development thing and would like to start off with JAMstack, you better get some basic JavaScript and API skills first.

To create a JAMstack website you’ll use the JavaScript framework of your choice and/or a static site generator for a build, headless cms to manage the content, and a hosting and deployment platform.

JavaScript frameworks

The last couple of years belonged to JS, you cannot argue with that. It’s almost everywhere nowadays, and through the years it was fundamental for many rapidly evolving frameworks that popularized single-page applications and PWAs across the web.

Here at Bejamas, we used the following three frameworks the most in 2019 - React (the reigning JavaScript framework king), Next.js , and Node.js .

Static site generators

A static site generator is a tool that builds static HTML pages out of the input files. Taking your content from a CMS, or elsewhere, it applies a template of your choice generating a structure of purely static HTML files, giving you pages ready for the web. There’s a huge number of SSGs available right now suitable for almost any programming language. You can check our guide to static site generators for more in-depth info on available options.

We all have the favorites and as far as we are concerned our favorite SSGs are: Gatsby , Hugo , 11ty , etc.

Headless CMSs

You’ve probably heard of the traditional CMSs like Wordpress or Drupal and how they work ie they are hosted and served every time a request for a page is made. As an opposite to that, aheadless CMS decouples content management from your front-end and back-end. That allows you to deliver your content beyond websites or an app and repurpose your content from many different front-ends.

Most of the headless CMSes available will fit any front-end technology you are using. How important and how useful they are you can check in one of ourcase studies. We’ve talked about and shared our experience of Contentful , Storyblok , Sanity , Forestry , etc.

Hosting and deployment

Now that you’ve built your JAMstack website or an app with one of the tools mentioned above let’s find it a home. Nowadays modern-day hosting solutions and CDNs have become so much more offering pretty much everything you need to ship a modern website.

Just take a look at our favorite solutions like Netlify and Zeit . Or more traditional ones like Firebase and AWS .

All this just goes to show the best thing about JAMstack. The fact that you can juggle the tools for hosting, building, and content management any which way you like, creating the best stack for your current project.

JAMstack is rapidly evolving

The JAMstack ecosystem is rapidly evolving and as the plethora of tools and resources already available are pushing the boundaries of what you can do with a static website to new heights.

We’ve already passed a crucial transition from the 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.

Resources

To keep up with a fast-developing JAMstack world check out the following resources:

• JAMstack.org
• JAMstack.wtf
• WTF is JAMStack?
• Netlify blog
• Bejamas blog :grinning:
• Gatsby blog
• SSGs list
• Headless CMSs list
• Third-party solutions for static sites

Communities: