DevOps.js

DevOps.js Conf 2021

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. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

JAM Stack Deployment Platforms and Performance Comparison

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 try 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 Checkli, I am part of the Outsource team. 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 start talking about the Jamstack. Starting with the new black, this is probably something you hear a lot the latest couple of months about the JavaScript APIs and markup, that's basically the main things about Jamstack. Jamstack is not the framework, Jamstack is an architecture designed to be, or built 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 is that you can get better performance mostly because we build everything in deploy time, not in runtime, so the user does not need to wait the content, the content is already there. We don't use web servers, we ship everything through CDNs, so everything is static. It's more secure because it's a kind of microservice approach and you can also rely on third-party APIs, 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 just 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 Nuxt, 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 is quite easy, it's just a client, a CDN where we ship the files, and microservices that are kind of black boxes. 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 I would like to have SSL support out of the box. 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 sites, 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 add 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 Next app in the static site. So I create the same exactly app and I deploy the same app to different providers. I start with Verso, 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 a static stat from this check where I can see the response time, the time to first byte, et cetera. And what I did with these checks using Checkly is try to run all of them 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, if I am from South Africa. And I put all of these pieces together using JavaScript and I decide 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. This is 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 Rochelle or Netlify, you will see something like this, a nice map where you can see all the regions running checks against this site deployed.
Remember, it's a Naxos.js app deployed in the static mode to the different providers, same application. So I can see how this application performs in the different regions. If I request or I try to measure the performance from US, from Australia, from Japan, from everywhere in the world. So I will get the map with the different dots. Everything green, it's below 200 milliseconds. Between 200 and 500, you will see yellow. And bigger than that, you will see red.

So you have also a list where you can get the fastest time, always talking about the first byte. But in the future, I will be adding more stats and more tools where you can compare them and actually do like an A-B test. So you can go to the Jamstack deploy.com and start checking them. And of course, PRs are welcome. My to-do list, it's trying to bring a better UX at A versus B, like Netlify versus Bursell or Netlify versus Render or whatever. And more tutorials where I can show you how to use them and which are the main features of those providers. And of course, more providers, AWS, Cloudflare, Microsoft Azure, and so on. So that's it. Thank you very much.

If you have questions, you can reach me on Twitter. Any feedback, it's also welcome. So I hope you enjoy the rest of the conference.