Start for free
Sign up and claim your forever-free Fauna account
Connect with a Fauna expert
Table of Contents
What is Jamstack? How to Get Started
Nov 10th, 2020|
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.
What does JAMstack stand for?
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.
How does Jamstack work?
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:
Serving pre-built static HTML files
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
API calls for server-side operations
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
Difference between Jamstack and a traditional website
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.
Typical Jamstack workflow
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.
Best practices when working in Jamstack
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 -
Manage the project in Git
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.
Leverage a CDN
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.
Run ‘atomic deploys’
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.
Use instant cache invalidation
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.
Getting Started with Jamstack
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.
Building the frontend
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.
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.
If you enjoyed our blog, and want to work on systems and challenges related to globally distributed systems, serverless databases, GraphQL, and Jamstack, Fauna is hiring!
Subscribe to Fauna's newsletter
Get latest blog posts, development tips & tricks, and latest learning material delivered right to your inbox.