JAM Stack Deployment Platforms and Performance Comparison

Rate this content
Bookmark

Our web app is finally ready to go live but which deployment tool should we use? With the rise of JAMstack, we have a multitude of options from Vercel, Netlify, to Firebase. Certainly, performance is key for us so we want to know which one is the fastest. In this talk, we will do a real-world benchmark comparing the most known JAMstack deployment options and discuss pros and cons.

Nacho Anaya
Nacho Anaya
8 min
01 Jul, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

This is an introduction to the Jamstack Deploy project, which measures and tests popular cloud providers for the Jamstack architecture. The project focuses on performance and uses Checkly as a monitoring tool. The speaker plans to add more stats and tools for comparison and invites users to contribute to the project.

1. Introduction to Jamstack Deploy

Short description:

This is an introduction to a project I was working on in the last couple of weeks, where I tried to measure and test the most popular cloud providers for the Jamstack. Jamstack is an architecture designed to make the web faster, more secure, and easier to use. It offers better performance, security, and scalability. Site generators like Next, Hugo, and Nuxt are commonly used to create Jamstack apps. The deployment process requires providers that offer SSL support.

Hi there, welcome to my talk. This is Jamstack Deploy, and it's an introduction to a project I was working on in the last couple of weeks, where I tried to measure and tried to test the latest or the most popular cloud providers for the Jamstack. So my name is Nacho Anasha, I am from Argentina, you have there my Twitter handle. I am working as Lead Open Source Engineer in Czech Republic. I am part of the Outsourced teams.

This is a disclaimer for the talk, it's an early stage project, so things could change in the future, but I hope you can get an idea and you can start using it as a helpful resource, anytime you would like to test a Jamstack provider.

So let's just start talking about the Jamstack. Starting in the new black, this is probably something you hear a lot the latest couple of months about the JavaScript APIs and markup, that it's basically the main things about Jamstack. Jamstack is not a framework, Jamstack is an architecture designed to be or think or build to make the web faster, more secure and easier to use. And of course, also easier to scale. You can go to Jamstack.com to get more information.

But basically the main features about the Jamstack, it's that you can get better performance, mostly because we build everything in deploy time, not in prime time. So the user does not need to wait the content. The content is already there. We then use web servers, we ship everything through CDNs. So everything, it's static. It's more secure because it's a kind of microservice approach and you can also rely on third party API. So if you don't have the resources to take care of security, you can delegate in something like Auth0. So it's also cheaper and it's easier to scale because the way to scale is to ship in more parts of the world, like replicate your files or serve static files in more places. This is the main things about the Jamstack.

Then you have site generators or static site generators like Next, Hugo, Nuxt. Those are the main tools that you use every day to create Jamstack apps. And this is the kind of architecture where we compare the classic structure of a web app with the Jamstack web app. You can see on the right that the Jamstack, it's quite easy. It's just a client, a CDN where we ship the files and microservices that are kind of lockboxes. We as developers don't really care about what they do or how they do, we just need to implement them. So it's an easy structure for the Jamstack developers.

So it's time to deploy. We would like to deploy our application to any kind of provider. So what do I look for in these providers? So the first thing is that I would like to have SSL support out of the box.

2. Measuring Performance and Project Process

Short description:

I like to have Git support like PRs or preview integrations. Infrastructure as code is a good feature. A nice setup process, something simple and fast. Performance is the focus of this project. The process involved creating a dummy app and deploying it to different providers. Checkly was used as a monitoring tool to measure performance. The checks were run in different AWS regions to gain insights from around the world. The time to first byte was used as the unit of measure. The Jamstack deploy project is in the early beta stage.

I like to have Git support like PRs or preview integrations. CLI, I love the terminal, I would like to do everything through my terminal. But I also like to have a nice UI where I don't have my computer or something, you know, where I can write code so I can go to the UI and do fast things.

Infrastructure as code is a good feature because it allows you to create or create infrastructure using XAML, JSON or even code and not everything going to the UI. A nice setup process, something simple and fast. Domains. I always need a custom domain for my site's price as low as possible. Performance and learning queue. Performance is like the focus of this project and the future learning queue will be too because I will try to have tutorials or things trying to show how to use those providers.

So how was the process of this project? What I did to measure the performance of these providers. The first thing is that I create a dummy app. It's a NUX app in the static site. So I create the same exactly app and I deploy the same app to different providers. I start with Verzol, Medlify, Firebase, Render, GitHub, Pages, and search.

So once I deploy the same exactly app to them, I went to Checkly. Checkly is a monitoring tool. It's basically the backbone of this project. It's what I am using to measure the different providers. And with Checkly I can create checks. Basically a check is a kind of request where I try to measure performance and get statistics stats from this check where I can see the response time, the time to first byte, etc. And what I did with these checks using Checkly is try to run all of them in around the world, in all the AWS regions possible so I can get different insights from different parts of the world. It's not the same if I am from Argentina, if I am from United States, and if I am from South Africa.

And I put all of these pieces together using JavaScript and I decided to use the time to first byte like the unit of measure for the project. And according to Google, 200 milliseconds it's a good number for that. So I like to keep with that number. So I put everything together with JavaScript, Vue.js and Checkly Public API so I can show all the information to the public without actually using or going through the Checkly UI. So you can go to that URL, you can also go to the repo, and you will find something like this.

The Jamstack deploy project early stage is really beta now, but it's probably the beginning for something bigger. You can pick your provider, you will see there that you have more providers that are coming soon. So if you click a provider like Rocell or Netlify, you will see something like this.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

A Guide to React Rendering Behavior
React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
React Concurrency, Explained
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
Top Content
React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar
Levelling up Monorepos with npm Workspaces
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Levelling up Monorepos with npm Workspaces
Top Content
Learn more about how to leverage the default features of npm workspaces to help you manage your monorepo project while also checking out some of the new npm cli features.
The Future of Performance Tooling
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Top Content
Our understanding of performance & user-experience has heavily evolved over the years. Web Developer Tooling needs to similarly evolve to make sure it is user-centric, actionable and contextual where modern experiences are concerned. In this talk, Addy will walk you through Chrome and others have been thinking about this problem and what updates they've been making to performance tools to lower the friction for building great experiences on the web.
Optimizing HTML5 Games: 10 Years of Learnings
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimizing HTML5 Games: 10 Years of Learnings
Top Content
The open source PlayCanvas game engine is built specifically for the browser, incorporating 10 years of learnings about optimization. In this talk, you will discover the secret sauce that enables PlayCanvas to generate games with lightning fast load times and rock solid frame rates.

Workshops on related topic

React Performance Debugging Masterclass
React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
Building WebApps That Light Up the Internet with QwikCity
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
Next.js 13: Data Fetching Strategies
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
React Performance Debugging
React Advanced Conference 2023React Advanced Conference 2023
148 min
React Performance Debugging
Workshop
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
Deploying React Native Apps in the Cloud
React Summit 2023React Summit 2023
88 min
Deploying React Native Apps in the Cloud
WorkshopFree
Cecelia Martinez
Cecelia Martinez
Deploying React Native apps manually on a local machine can be complex. The differences between Android and iOS require developers to use specific tools and processes for each platform, including hardware requirements for iOS. Manual deployments also make it difficult to manage signing credentials, environment configurations, track releases, and to collaborate as a team.
Appflow is the cloud mobile DevOps platform built by Ionic. Using a service like Appflow to build React Native apps not only provides access to powerful computing resources, it can simplify the deployment process by providing a centralized environment for managing and distributing your app to multiple platforms. This can save time and resources, enable collaboration, as well as improve the overall reliability and scalability of an app.
In this workshop, you’ll deploy a React Native application for delivery to Android and iOS test devices using Appflow. You’ll also learn the steps for publishing to Google Play and Apple App Stores. No previous experience with deploying native applications is required, and you’ll come away with a deeper understanding of the mobile deployment process and best practices for how to use a cloud mobile DevOps platform to ship quickly at scale.