Cloudinary Blog

Developer Experience for a Modern Web: JAMstack Delivers

Prosper Otemuyiwa
By Prosper Otemuyiwa
Developer Experience for a Modern Web: JAMstack Delivers

Off and on, the model of architecting software shifts. Over time, programming principles, best practices, toolkits evolve to accommodate the contemporary way of building fast, resilient, and reliable apps. Right now, the buzzword is J-AAAAAAM-STACK.

What Is JAMstack?

JAMstack is a modern web-development architecture that contains strictly client-side JavaScript, reusable APIs, and prebuilt markup, whose principles the architecture closely adheres to. With JAMstack, front-end developers can develop apps without setting up a web server or back-end, saving a load of time and effort. That’s thanks to serverless platforms and APIs, such as Firebase, Webtask, and Amazon Lambda, which enable connections from the front-end framework.

Before JAMstack became available, tightly-coupled software monoliths based on stacks like Linux, Apache, MySQL, PHP (LAMP), RaspberryPi, MySQL, Python (RAMP), and others, e.g., WordPress and Drupal, abounded. They are still in use. However, JAMstack ushered in a new era in which you can decouple software systems and build apps on the front-end while leveraging reusable APIs for the back-end, data storage and processing, authentication, and other key capabilities.

Webinar
How to Optimize for Page Load Speed

Why JAMstack?

Several major attributes of the JAMstack architecture are a significant help for app development.

Performance

If loaded and served to users from a content delivery network (CDN), front-end apps built primarily with JavaScript could potentially load fast. Furthermore, you can lower the Time to Interactive and Time to First Byte impressions by applying fast-loading techniques, such as code splitting, route-based chunking, tree shaking, scope hoisting with Webpack, and the Push Render Precache Lazy-Load (PRPL) pattern.

No Need for a Back-End Infrastructure

This one is a major reason for leveraging JAMstack for building apps. With JAMstack, instead of having to set up your own web server, you can run functions on a function-as-a-service (FaaS) platform on a remote server, invoking them only when necessary. Not having to manage your own back-end infrastructure saves time, effort, and cost.

High Security

The domain expertise of reusable, third-party APIs ensures no loopholes through inadvertent errors on your part. Furthermore, those APIs lower the risk of security attacks because deliberate hacks or compromises of the API platforms must first occur before exposure of your app’s private data becomes at risk.

Excellent Developer Experience

The overall experience of developing and maintaining apps relies on how several app components of the underlying architecture work together. Loose coupling along with the advantage of having third-party services perform the cumbersome, labor-intensive tasks make for a smooth developer experience, freeing you up to focus on your app’s business logic and other important issues.

Scalability

Scaling apps is a daunting task. JAMstack’s scalability is baked in. Because your app’s interaction with reusable APIs over HTTPS is stateless, you can scale your app content through CDNs to several regions while drawing closer to your users. Replication of your app to multiple servers then proceeds fast.

How Does JAMstack Work?

JAMstack contains three main sections.

Client-Side JavaScript

This is the front-end in which your JavaScript frameworks come into play: Vue.js, React, Angular, and, um, Vanilla JS, which is no framework, but of course. You can build a front-end, stand-alone app by fetching or modifying data from a dummy API. Furthermore, you can replace the dummy API with a custom-built or third-party API of your choice with nondummy content before production.

After setting up client-side JavaScript to connect with third-party APIs or a serverless back-end, simply host them on platforms like Netlify, ZEIT, or Surge, which are ideal for front-end apps. Other alternatives are CodePen and CodeSandBox.

Reusable APIs

Reusable APIs in the JAMstack context are reliable and reusable services geared for developers in the form of pluggable APIs. Gratifyingly, most of them have proven to be effective and robust. See a later section of this article for an extensive list of reusable APIs.

Reusable APIs eliminate the need for a back-end because you can connect over HTTP many app components to service APIs, which perform all the required tasks. Just ensure that your client-side JavaScript can properly communicate with those APIs.

Prebuilt Markup

During deployment, you must prebuild this markup to be displayed to users. Static site generators, such as Gatsby and Hugo, fit into this spectrum, generating markups and serving them to clients afterwards.

Note
Jason Lengstorf has built a Gatsby Cloudinary Plugin that enables Gatsby websites or apps to upload all their media assets to Cloudinary and deliver them to users through Cloudinary’s fast CDN. Look no further if you’re searching for a way to leverage Cloudinary transformation and storage capabilities with Gatsby.

What Are the Tools and APIs for JAMstack Apps?

Many tools and APIs are available for building JAMstack apps. See below for a list by architectural component.

Client-Side JavaScript

Besides Vanilla JavaScript, you can choose from the numerous JavaScript frameworks that are available for building the front-end, including the following:

Vue, React, Angular, Meteor, Ember, Preact, Next, Nuxt, Aurelia, Stimulus, Cycle.js, Babylon.js, Svelte, Backbone.js, Flight, Polymer, Inferno.js, Knockout.js, Stencil.js, Gatsby, Gridsome, and Ionic

Reusable APIs

Below are reusable and reliable APIs that stand to save you a load of development time.

Prebuilt Markup

Among the tools available for generating prebuilt markup, which can serve your website as static HTML files, are—

GatsbyJS, Hugo, Nuxt.js, Next.js, Jekyll, Hexo, VuePress, and Pelican

What Are the Best Practices for Developing JAMstack Web Apps?

Community-defined best practices for building JAMstack apps are available online. However, no hard and fast rules exist. Below are a few guidelines for starting the development of or enhancing JAMstack apps.

Deliver Content Through a CDN

CDNs serve websites to users fast even though those networks bear the brunt of multiple users simultaneously trying to access the sites in question. Instead of your servers, the access requests are directed to your CDN, which ultimately saves your site or platform from crashing. Talk about peace of mind!

Cloudflare, Fastly, and Akamai as recommend worthy CDNs.

Use Build Tools

Since your content is served to the client (one of the many browsers), using build tools like Browserify, Parcel, and webpack ensures that your code works on all browsers regardless of the JavaScript version for your app.

Furthermore, build tools automate the entire build process, from code pushes to deployment. If you are using a tool like SASS, LESS, or another framework that requires compilation, you can also leverage it to minify, concatenate, and reduce the size of media assets before serving your content to users.

Implement Version Control

Git is the best version-control tool for apps, bar none. With Git, many tasks, such as collaboration, rollbacks, deployment through Git hooks, project tagging and versioning, and code reviews, are a breeze.

Deploy Sites Atomically

Atomic deployments render each deployment as a full snapshot of the site. That means that, for every release, your deployment serves everything at the same time across the board to users. Such a practice is especially important for major updates.

Invalidate the Cache

Two difficult tasks in computer science are naming of programming elements and invalidation of the cache. So, put in place a reliable and well-tested cache-invalidation process to avoid serving outdated content to users.

A Netlify feature invalidates the cache. Have a try.

What’s Next?

I strongly believe that JAMstack was made for mankind but not the other way round. As a superb architecture for building web apps, JAMstack also accords them scalability and speed. However, be sure to research in detail what suits your product or company and ensure that you’ll benefit from JAMstack before taking the plunge of switching to it.

Tamas Piros has created a comprehensive course titled Introduction to the JAMstack. The videos there contain many details on the fundamentals of JAMstack and guidelines for building apps with that architecture.

Are you using JAMstack in production? How has it helped you? How do you store, optimize, and transform media assets? I’d appreciate your sharing your insight.

About Cloudinary

Cloudinary provides easy-to-use, cloud-based media management solutions for the world’s top brands. With offices in the US, UK and Israel, Cloudinary has quickly become the de facto solution used by developers and marketers at major companies around the world to streamline rich media management and deliver optimal end-user experiences.

For more information, visit www.cloudinary.com or follow us on Twitter

Recent Blog Posts

Maya Shavin: How I Built My Website

Besides working as a senior front-end developer at Cloudinary, I'm also a content creator, a blogger, and an open-source developer. Follow me at @mayashavin and on mayashavin.com.

In the beginning, my website, mayashavin.com, was mainly for showcasing the status of my development projects and keeping me organized with my speaking schedule. Initially, I built it with Vue.js, later on switching to Nuxt.js (aka Nuxt) for a higher SEO score, and deployed it with Netlify. After some time, I added a blog section with Netlify CMS as the content management system (CMS). Everything was fine until I added more content and features, which led to a significant decline in the site’s performance. Also, the site design needed a modern look. So, I gave the site a makeover.

Read more
Automation Frees Up PetRescue’s Staff to Help Pets Find Their Forever Homes

As we spend more time at home, many of us are adopting pets for the joy, companionship and a surprising range of health benefits. In Australia, where our nonprofit customer PetRescue is located, there’s a shortage of pets to adopt. Last August, the Guardian reported that dog shelters in Australia emptied and adoption fees for puppies were running as high as $AUS1800.

Read more
Cloudinary and Contentful Make Modern Content Management Easier

I am pleased to share that Cloudinary and Contentful have joined forces to further streamline the creation, processing, and delivery of online content through Cloudinary’s digital asset management (DAM) solution and advanced transformation and delivery capabilities for images and video. What’s more, the partnership delivers a headless approach to DAM. By leveraging APIs for media management tasks, marketers and developers alike benefit from an integrated stack of optimized assets for optimization and automation. As a result, page loads are fast and beautiful, and at scale—with less overhead and effort.

Read more
Introducing Cloudinary's Nuxt Module

Since its initial release in October 2016 by the Chopin brothers as a server-side framework that runs on top of Vue.js, Nuxt (aka Nuxt.js) has gained prominence in both intuitiveness and performance. The framework offers numerous built-in features based on a modular architecture, bringing ease and simplicity to web development. Not surprisingly, Nuxt.js has seen remarkable growth in adoption by the developer community along with accolades galore. At this writing, Nuxt has earned over 30K stars on GitHub and 96 active modules with over a million downloads per month. And the upward trend is ongoing.

Read more
How Quality and Quantity can go Hand in Hand

When it comes to quality versus quantity, you’ll often hear people say, “It’s the quality that counts, not the quantity”. While that’s true in many situations, there are also cases where you want both quality and quantity. You may have thousands of images on your website and you want them all to look great. This is especially important if your website allows users to upload their own content, for example, to sell their own products or services. You don't want their poor quality images to reflect badly on your brand.

Read more