JAMstack Review

When it comes to web development, there are conflicting philosophies about the best architecture for balancing performance, cost, and security.

One of the latest to gain popularity is JAMstack.

JAMstack is the jazzy term coined by Netlify co-founder Matt Biilmann to describe a trend that’s been evolving for a while.

It’s meant to update the concept of static website generators for a modern era.

In this article, we’ll take a look inside JAMstack and see why supporters are calling it “the future of the internet.”

What is JAMstack?

JAMstack describes a way to build fast, database-independent web sites with the joint goals of improving overall performance and lowering development costs.

It’s more a design principle than a detailed blueprint. Focus is kept on the front-end build, skipping server-side functions when possible and using a CDN (Content Delivery Network) to deliver content at lightning speed.

In simple terms, JAMstack is a solution stack (also known as a software stack or technology stack). A stack encompases all the components that go into operating a site or application.

Different stacks may have some of the same elements, but they’re arranged in a distinctive way in accordance with the underlying philosophy behind the stack’s architecture.

Breaking Down the Acronym

JAMstack features three core components:

JavaScript

JavaScript is popular everywhere right now, so it’s no surprise to find it here.

In JAMstack JavaScript lives on the client-side, handling responses and requests.

Because the stack stresses a style of build over specific technologies, this component can take many forms: pure JavaScript, a library like Vue.js, or even front-end JavaScript frameworks such as AngularJS.

APIs

Server-side processes and and database commands are handled via reusable APIs.

JavaScript uses HTTP calls to access the APIs. Again, JAMstack has no requirement for where an API comes from.

It can be custom-written for a specific app or selected from the host of third party options available.

Markup

Build tools or static site generators such as Grunt, Webpack, Metalsmith, Middleman, or Hugo are used to create templated markup. The markup is what users will see when visiting a site.

How JAMstack Works

The upfront work of JAMstack development happens offline. HTML is generated using static site generators and other build tools, then pushed to git as a collection of pre-built pages.

When a user requests content, the HTML gets distributed by a CDN with no need for further processing.

In contrast, there are a surprising number of steps between a user requesting a dynamic page and content actually loading.

The request first goes to the server, which queries a database (like MySQL or MongoDB).

That data (in conjunction with plug-ins and active themes) is used to create an HTML document within the server environment which is then presented to the user.

Essentially, templating occurs every time a page is called up instead of being done in advance.

Benefits of JAMstack

JAMstack has some major advantages over the traditional app server model.

Speed

Static websites have no need to query a database, and their code has already been compiled.

Every user gets the same page with dynamic elements handled client-side through third-party tools like Disqus.

There’s next to no server-side work. That means pages can be returned up to six times faster than otherwise possible.

Security

The absence of a database makes a static site incredibly secure.

It’s immune to SQL injection, for example. There are fewer server interactions overall to be targeted by malicious actors.

In addition, it’s widely known that the more complex software is, the more room there is for small errors that compromise security.

The JAMstack philosophy reduces the number of “moving parts” involved in development, so developers can more easily spot and fix potential weaknesses.

Control

Everything from JavaScript to markdown content documents is stored in a git repository.

Developers have complete version control over the code.

It’s simple to set up continuous deployment so the site is updated every time new content is pushed to git.

Scaling

CDNs distribute content across their entire network.

They’re well able to handle sudden unexpected loads, such as a surge of interest after an ad campaign goes viral.

Cost

The overall expense of building, maintaining, and deploying a JAMstack site are lower.

Most of this reduction comes from the focus on the frontend; fewer servers are needed, and the development team can be smaller.

Hosting is also dramatically cheaper without a database involved.

Maintenance

Once a site is live, there’s almost no need for maintenance.

Owners don’t have to perform updates and only need to do a back-up when content changes.

This makes JAMstack a great option for small businesses who want an informative landing page

Limitations of JAMstack

JAMstack has enormous potential, but it isn’t perfect. Critics of the style have offered these cautions.

JAMstack has a steep learning curve for non-technical users

The JAMstack set-up isn’t very approachable for content editors. User-friendly CMS’s like WordPress and Drupal have become the expected standard for adding content to blogs and company homepages.

The average employee given charge of the company’s blog would need training in Markdown just to make a blog post.

Since the content is stored in the same repository as the code, it’s typically easier (and safer) for IT to perform any updates.

There are markdown generators and JAMstack-friendly updating tools available, but they have a long way to go before they’ll be as accessible as WordPress.

For now, JAMstack tends to add to the IT workload.

All changes have to go through a developer 

Even in cases where an employee can handle content editing, anything beyond trivial changes to style requires new code.

Labor is one of the most expensive parts of development, so the cost of those changes adds up fast.

It’s nearly impossible to have member-differentiated content

Tracking memberships and tiers of access requires a database, and databases aren’t part of the JAMstack worldview.

That means no paywalls, no premium content, and no easy way to set up classes of users with varying levels of privileges.

Some third party options like Disqus have log-ins, but that’s handled by their platform and doesn’t affect the page content.

Dynamic features can only be added through client-side third party solutions

Comment sections, forums, polls, galleries, stores, and other types of dynamic features are possible through third-party options (Livefyre, lunr.js search, etc).

Some view third party services as a bonus, but they become a burden when they’re required for every dynamic feature of a page.

Most developers will recommend a WordPress or similar site when there’s a large amount of dynamic content involved.

Some projects just aren’t a good fit for JAMstack

JAMstack isn’t a magic bullet. The theory scales well in terms of users, but not so much in terms of size or complexity.

It isn’t suitable for projects that require frequent updates and new pages, several interactive features, or real-time updates.

How Does JAMstack Compare to Other Stacks?

As mentioned earlier, JAMstack is more a philosophy than a particular set of software and components.

Other stacks are more specific as to what technology is included.

Every system doesn’t have a catchy title, but there are two named stacks that JAMstack is often compared to: LAMP and MEAN.

LAMP (Linux, Apache, MySQL, PHP)

LAMP is used to build dynamic web sites and web apps. It’ve very different from JAMstack; pages are reconstructed from a database on request rather than being held as flat documents ready for delivery.

Content addition and modification is easier with LAMP (though future third party options are wearing away at this disparity).

However, JAMstack delivers content much faster.

MEAN (MongoDB, Express.js, Angular, and Node.js)

Though MEAN is also designed for creating dynamic web sites and apps, it has more in common with JAMstack.

All the MEAN components are written in JavaScripts. Some (like Angular) appear frequently in JAMstack sites.

The key difference is that MEAN still assembles pages from databases on request, like LAMP.

Because of that, MEAN and LAMP are more like each other than either is like JAMstack.

Real World Applications

Though JAMstack as a named stack is a recent development, engineers have been trending this way for a while.

These examples show the variety of sites that can be built using JAM.

Smashing Magazine

Smashing Magazine is an online magazine for web designers and developers.

Managing the tangle of technology that made up their stack, especially caching plugins for WordPress, was impacting performance and load times.

They decided to build an entirely new website using JAMstack.

The site is still in open beta, but it shows enormous promise. Load times have gone from 800ms time to first load to 80ms.

Sphero

Sphero is a robotic toy that wirelessly interacts with mobile devices.

Though the toy is complex, the company’s web site needs were simple.

JAMstack provides the base for this beautiful site that loads quickly on most devices despite being intensely graphics-heavy.

Marvel Search

Most of the time static sites aren’t suitable to huge projects.

There are exceptions, though. Marvel Search is a searchable catalog of nearly 2,000 Marvel characters by name or team.

More sophisticated databases offer more information and interactive character content, but the speed with which these pre-built pages load offers a superior user experience.

Looking Forward

Most websites have fewer than a dozen pages in total and won’t need to be updated often.

For these sites, JAMstack has a lot to offer. It can lower development costs, reduce security risks, and improve the user experience by providing faster load times.

Could JAMstack be an option for your next enterprise web site? Contact Concepta for a free assessment of your digital needs!

Request a Consultation