What is Jamstack? How to Get Started

What is one IT technology that benefits billions of people every day? The World Wide Web (WWW). Since its inception in the late 1980’s, web technologies have come a long way to meet the needs of today's demanding users and complex app requirements. If you’re a web developer, you might have come across several popular web technology stacks including LAMP, MEAN, MERN, and so on. Now, different web stacks — made up of various components — feel different to use. While some stacks offer unique benefits, others appeal to developers by using a well-known programming language. However, web stacks exist to achieve one common developer goal — To quickly build and iterate on interactive web apps. In the Web 1.0 era of the world wide web, the app requirements were simple. The web of those days was primarily “read-only”, composed of static hard-coded HTML pages, which were purpose-built to show information without requiring much user interactivity. Content and layout separation didn’t exist, as page styling elements were embedded directly within the page markup itself. For example, if a request hit a web server, the appropriate HTML file would be fetched by the server and sent back to the user’s browser without any database lookups. The browser would render the HTML data it has received as is, without any subsequent web calls. It was common also to have proprietary HTML web tags in those days, causing significant browser-related compatibility issues between sites.

In the web 2.0 era, user interactiveness and information sharing became the central focus, and the application complexity bar kept increasing. To meet these requirements, there was a quick shift from “read-only” to dynamic web pages that needed to be powered by a database. When a user accessed a website, the webserver would talk to an application server, make a database request for real-time data, and then convert that data into HTML on the fly before sending it back to the browser. The browser would then load additional CSS and javascript files before rendering the information to the user. With users expecting more than what web 1.0 provided, the LAMP (Linux, Apache, MySQL, PHP) stack was born, becoming wildly popular. Fast forward in 2016, a small group of developers established the term JAMstack as an alternative stack to the once-dominant LAMP stack — one that brings together the best parts of Web 1.0 and 2.0 with benefits such as speed, security, and SEO friendliness.

JAMstack is an architecture that leverages the tools and workflows that developers love while designed to make the web faster. As its name suggests, there are three main pieces to JAMstack: JavaScript, reusable APIs, and prebuilt Markup. Let’s get into each of these in detail:

JavaScript (J) - It is the piece that does a lot of the heavy-lifting in Jamstack by providing the dynamic and interactive bits. In a Jamstack app, there are no restrictions on what Javascript framework and library to use.

Reusable APIs(A) - Server-side operations including access to other services, and databases are abstracted into APIs. These APIs can be GraphQL (Graph Query Language) based on REST (Representational State Transfer). The reusable APIs hide the complexity of the plethora of different backend services (including databases) that power the web app.

Pre-built Markup (M) - During the website build and deployment cycle, templates are run through a static site generators (SSGs) like Gatsby, Jekyll, or Scully that outputs highly optimized pre-built static HTML files, which are directly served from a CDN (Content Delivery Network), reducing the cost, complexity and risk of dynamic server infrastructures.

What makes Jamstack appealing to developers is that websites can be built with a wide variety of modern tools and software that developers might already be familiar with.

For example, a React app that you compile with Webpack and serve from Amazon S3 is a Jamstack app. A simple HTML file with literally no Javascript is also a Jamstack app. However, if you’re piecing together a site page by page and serving it with PHP, it’s not a Jamstack app. One rule of thumb is that if your architecture has static HTML content, it’s probably a Jamstack app.

With Jamstack, developers can create beautiful and immersive web experiences that are fast, secure, and easier to scale and manage. To do this, Jamstack neatly separates the frontend pages and UI from backend apps and databases. Decoupling the backend and frontend also allows developers to explore a huge ecosystem of open source tools to accelerate development. However, there are a few common things across the different Jamstack implementations:

The entire front end is pre-built into highly optimized static pages during a build process. This allows sites to be served directly from a CDN (Content Delivery Network) resulting in: 1. Faster page load performance characteristics since the CDN is caching and bringing static HTML files closer to the user accessing the website 2. Reduced operational cost that comes from managing servers 3. Reduced app surface area making it is harder for an attacker to find and exploit vulnerabilities

Server-side operations, database operations and third-party services are abstracted behind reusable APIs. The benefits of this design are: 1. Service decoupling, allowing for easier and more efficient development, and streamlined debugging 2. More developer agility, making it easy to extend features on-demand via an API 3. Streamlines CI/CD pipelines test and build processes

Compared to traditional web architectures, Jamstack enables developers to streamline their web development and quickly build apps. This is possible because Jamstack apps are mostly made of static files. For instance, when a user requests a page on a traditional website, the file is processed and served following a series of interactions between a database, back-end code, server, browser, and intermediate caching layers. However, in Jamstack, the file is already compiled and ready to be served to the browser from a CDN upon request.

Apart from the structural differences, there are several other key developer experience related differences that sets Jamstack apart from traditional websites. In a traditional setup, core updates are pushed to production servers, often using File Transfer Protocol (FTP), followed by content updates pushed through a traditional Content Management System (CMS), like WordPress or Drupal. In Jamstack, core and content updates are both pushed through a Git workflow. The site gets rebuilt entirely on the fly using modern build tools like static site generators (SSG), and the changes are then pushed into a CDN. This workflow embodies the modern software development lifecycle practice of Continuous Integration and Deployment (CI/CD), accelerating developer agility.

Jamstack apps scale effortlessly, and from a cost perspective, they are operationally cheaper to manage since they can be delivered with just a few pieces that can be hosted in a static cloud-based managed object store (like Amazon S3). Finally, when it comes to security of Jamstack apps, combining APIs and client-side Javascript for dynamic functionality significantly narrows the attack surface area, making it harder for an attacker to exploit vulnerabilities.

Jamstack apps are revolutionizing the way we think about workflows by delivering an incredible developer experience, better performance, lower cost, and greater scalability in 3 easy steps: 1. Develop - The first step in the workflow is to write the code and to push it into a version control system such as Git. Git provides visibility into change history, collaborator activity, and traceability. 2. Build Automatically - Code is merged in via a build process. This can be done manually or automated, using a wide variety of different tools. 3. Update CDN - Any previous caching on the CDN is invalidated, the new code is pre-built in the CDN, and it is now ready for users to access it.

Developers want the most out of their applications in the least amount of time. When using Jamstack, here are a few essential best practices that you might want to consider following -

For the majority of web projects, including Jamstack, Git is where everything should live. Putting everything into Git empowers any developer to access the code, clone quickly, and run it within a few minutes. In addition, there are no databases to clone with this approach, no complex installs across different environments, and overall happy developers.

When it comes to Jamstack applications, static is the new dynamic, and there is no better way to accelerate overall site performance than by using a CDN. In recent years, hosting costs of static files have also fallen drastically, making CDNs an attractive option to minimize the first time to the first byte. In addition, with a CDN, markup and pre-built assets can be pre-fetched and pre-cached so that web pages can be loaded within sub-millisecond response times to build high-performance and scalable web apps.

As your projects grow, new app changes might require re-deploying hundreds of files. Uploading these files one at a time while the website is serving live traffic can result in an inconsistent state for the user visiting the website. This can be avoided using “atomic deploys”, where no changes are allowed to go live until all the changed files have been uploaded. Then, if anything fails, the website is rolled back to its initial state.

Caches are performance-friendly, but they quickly become a nightmare to manage when you have frequent built-to-deploy cycles. You should make sure that your CDN supports instant global cache invalidation, so that stale, static components can instantly be purged if new builds are deployed. This will ensure that users always get access to the most up-to-date copy of your application served over the CDN no matter where they are and how they access the site.

Building Jamstack apps is easy and fun. As a developer, when it comes to tools, there are several options that you can choose from. In this section, we will cover a few critical aspects for you to consider when building your Jamstack app and list some of the valuable tools that can help you along the way.

Developers can leverage UI-focused frameworks that can help build apps with modular components. Some of the most common frameworks that work with Jamstack are React, Vue, Angular, Svelte. By combining these frameworks and extending them with SSGs, which generate static files, front-end components can be built as quickly as possible. Additionally, content management can be streamlined as more content gets added to the project.

Traditionally, Content Management Systems (CMS) have components tightly linked, including a database that stores all the content, design and customizations, and a front-end that stitches everything together. In a headless CMS system, the backend and frontend systems are decoupled. There are no page templates or themes. Instead of having your content coupled to a particular web-page output, the raw content is fetched over the provided REST or GraphQL APIs of the headless system and delivered to the front-end technology of choice. Some of the most popular headless CMS' include Contentful, Forestry, Ghost, Strapi.

In the Jamstack ecosystem, there’s an API for almost everything, and there are a plethora of different tools available to meet additional user requirements across the site. For example, if your app content needs to be searched, tools like Algolia can come in handy to build search functionality. If you need to authenticate a user before they view content, then using something like Auth0 could save you a lot of time, or if you want to start collecting form data in your app, then Postform could also be used.

Like any other web application, Jamstack apps also require a database to store data. Unfortunately, monolithic database architectures such as SQL and legacy NoSQL were built to sit behind an app server. They need Object-Relational Mappers (ORMs) or middleware for use with Javascript applications, adding additional complexity and overhead to the web stack. Since Jamstack requires a secure web-native data layer, you need a database-as-a-api option optimized for Jamstack. This means optimized API calls from the browser or CI/CD build process, a database with a flexible data model to support all your app needs, global data distribution, and hands-free scaling without the need for a database administrator. Fauna is a flexible, developer-friendly, ACID-compliant database delivered as a secure and scalable cloud API with native GraphQL. With Fauna, you can focus on the other parts of your Jamstack app and not worry about database provisioning, scaling, sharding, replication, or correctness.

Need a way to run your app deployment on auto-pilot? With tools like Netlify and Vercel, Jamstack app developers sort of get “Automated DevOps.” If a project is connected to either service with a Git provider, the app can be automatically deployed any time changes are merged into the main branch. Fauna plugs in cleanly with Vercel and Netlify to enable Jamstack developers to use Fauna in a serverless fashion in their Jamstack apps. Curious to learn more? Check out the Netlify and Vercel links to learn how you can connect these tools with Fauna.

Finding a modern serverless data API to create truly fast, secure apps has always been an endless search. However, the search is over now - start using Fauna.