In this tutorial, prepare to witness the ultimate scrap of edge function providers. In 2023 there are a plethora of different serverless function providers that you can use for your cloud computing needs. To entice you into using their service, all providers offer some form of FREE tier so money is not an issue. What you will find out in this article, is out of these options, which one is the best for frontend developers?
In this article, I will compare the three most popular providers in order to answer the question, who is the ultimate winner? If you want to learn which provider will meet your needs, read on 🔥🔥🔥
What are edge functions?
Edge functions have been slowly gaining popularity over the last few years and as more interest increases, a plethora of edge function providers have popped up!
If you were not aware, an Edge-based function is a bit of code that lives in the cloud that you can access via an HTTP request. Edge functions can be a lot cheaper to run compared to APIs that are always on. As Edge functions are only spun up when needed, they use less CPU time. Less CPU time means cheaper costs compared to using a dedicated server which always needs to be up and running.
Another point worth mentioning is that you should not mix serverless functions and edge functions up. Serverless functions are very similar, however, the location of where that function is triggered is very different. An edge function runs on the edge, meaning the code will be copied into a bunch of nodes that are dotted around the globe. The benefit of this is that the distance a request needs to make from a browser to the function will be shorter, making your app run faster!
Serverless functions have been around a lot longer compared to edge functions. Where the serverless function differed is that all functions are located in the same data centre in a region that’s chosen by the implementor. This is why serverless tends to be a little slower, as requests have to travel further! If you have yet to get on the edge bandwagon, now is your chance!
Broadly speaking we have two categories of edge function providers. We have the enterprise players, the AWS, the Azure and the GCPs of the world. Yes, these providers all offer edge functions, but they also offer a whole much more. I have personally used all of these services in my work life, they are great, however, sometimes you need to be Stephen Hawking's brainier brother just to master some of the basics. I once undertook a one-week course in order to get Azure certified and the course didn't even cover serverless functions
As a front-end developer and someone who likes to hack around with things on a weekly basis, the issue I have with these full platform providers for small projects is that they often take too long to set up, the learning curve can be very steep and finally if you click the wrong button, you can end up paying a lot of money accidentally.
The second category of edge function providers tends to be more aimed at front-end developers. These providers all offer CLIs to allow you to create and deploy functions quickly. To incentive potenial new users, all these providers offer free tiers and bar none they all promise to make your life simpler... so let us prove this
I want to try and determine which is the GOLD standard when it comes to frontend-focused edge function providers. I will compare pricing, sign-up, local deployment, deployment and whatever else I think you might find it valuable to know about so stick around to see which providers have made the list. To get started we will look at Cloudflare workers!
Cloudflare Workers
I have been using Cloudflare for my CDN of choice for about a decade. As time has progressed Cloudflare has added more capabilities to its offering, which in 2018 includes a functions-as-a-service model within its edge computing network. Cloudflare Workers make use of Cloudflare's legendary CDN network. This means that the functions you create within Cloudflare will be globally distributed over 200 locations throughout the world within their edge network. Cloudflare Workers will execute quickly as they work on the V8 engine. This engine is much quicker compared to running a function using NodeJs with a traditional JavaScript runtime.
Setting up a function using the CLI
Getting started: To create an edge function within Cloudflare, you can log into their portal here. After signing in, you can set up a new worker from within their dashboard. In order to create a function locally, work on it and then deploy it, you will need to use the Cloudflare CLI tool, Wrangler. Some Wrangler commands you need to know about are shown below:
You can see a working Cloudflare worker example on my GitHub here.
Positives: My favourite feature within Cloudflare workers is the ability to edit functions within the Cloudflare UI. When it comes to creating and testing an API, being able to update the function in a browser can save you lots of time. Granted, in production updating an API like is risky, however, in development, it is very handy! Cloudflare also provides an HTTP testing tool, similar to Postman within the UI. Combining the editor and the testing tool means that you can build functions anywhere in the world!
Negatives: I found the UI to be pretty buggy. Several times some of the buttons broke and I had to refresh the page. The online code editor didn't work properly. It didn't recognise my keyboard input correctly, so I could only copy and paste code as a workaround.
Pricing: Cloudflare has two options, a free plan and a paid plan. The free plan provides access to Workers and Worker VK. The paid plan will cost you a minimum of $5 USD per month. You can find more details about Cloudflare's pricing modal here. Pit pf the offering, Cloudflare is arguably the cheapest when you need to scale, however, as you will still the pricing/features are not a like-for-like deal!
Netlify Functions
Netlify is a great all-in-one platform because it not only offers edge functions, it also provides hosting, serverless functions, A/B testing, member management, forms as well as lots more that we won't cover here. Netlify released its edge function service in 2018. The interesting thing about Netlify is that it's a service that is built off of AWS. When you create a function in Netlify it is built on top of AWS Lambda
The aim of Netlify is to help front-end developers release code with as little friction as possible. I must admit it achieves this pretty well, I mean why else would you use Netlify which is built on AWS, rather than use AWS directly?
Getting started: To get started you can create an account from the Netlify website. In terms of code, you can check out an example of how you can structure a Netlify edge function yourself from my GitHub here.
To build an API, you have two options. The first is to make a change locally, push it via Git, wait for deployment and then test. This workflow is obviously not very optimal as it wastes a lot of time. The other option is to run the function locally either using a package called netlify-lambda, or, with the Netlify CLI tool. If you just want to work with Edge functions I recommend you use the Netlify CLI tool which you can install with this command:
In terms of function development, you will need to build a function within an NPM-based project. Edde functions need to be created within a folder called edge-function by default. You can change this within netlify.toml though!
Positives: The best thing about Netlify is that it offers more features that are really targeted to Javascript development compared to the rest. Asides from functions, you get free SSL support, A/B testing, free hosting for up to 500 websites, configurable continuous deployments using a file called netlify.toml and a lot more
Negatives: I think one of the limitations of Netlify edge functions is that they feel like they are a bolt-on to their normal web hosting, rather than its own feature.
You get very limited features for edge functions within UI. You get access to a log and that's about it! You cant see your function code easily, you can not edit the function from within the Netlify UI, and you can not even see the end-point URLS!
Pricing: Netlify offers free and paid plans. As part of the free plan, you get 3 million edge requests a month. This scales up to 15 million a month in the paid-for tier. In terms of serverless function support, you get 125,000 invocations per month/or a max of 100 hours per month. The paid tier starts from $25 per month to up the limit to 2M requests and 1000k hours. It is then possible to buy extra requests for around $40 for each 1M of additional requests you might need.
Vercel functions
Vercel the maker of the mighty Next.js also offers a hosting service that comes with edge function support. Like Netlify, this service is a wrapper on top of AWS. While Vercel has considerably fewer overall capabilities compared to Netlify, it offers both serverless and edge functions. Currently, the Vercel edge feature is still very new as it was released in June 2020
Getting started: To create an account, head over to Vercel. The Vercel user interface while having fewer features compared to Netlify has a nice UI which is easy to use.
In order to build and deploy functions with Vercel you can use the Vercel CLI tool. You can see an example of a Vercel function in my GitHub here. When you set up your project, in order for Vercel to pick up your function, you need to make sure you create a folder called api folder and you can add all of your functions here. An example of how to create a function is shown below:
To set up a new function using the CLI tool and publish it to Vercel, you can use these commands:
Positives: Easy to set up and get running. Nice UI. Feels like the UI has been built with functions in mind.
Negatives: You can view your function code in Vessel, but, you can not edit it. In terms of web hosting, Vercel has far fewer features compared to Netlify.
Pricing: Vercel has three pricing tiers, Hobby (FREE), Pro ($20) and Enterprise ($$$$$). In terms of price, you get 1 million Edge middleware invocations for both free and pro.
Happy Coding 🤘
