We're all living on it. But what exactly is The Edge?

Click the video above to play

Slides

Transcript

Hi everybody and welcome to Moar Serverless. I'm really excited to be the first speaker of the day. I'm really honoured to be here, thank you so much!

The title of my talk is "We're all living on it. But what exactly is The Edge?" But before we get to that, a little bit about me. I'm Salma. If you've seen me around the internet before you might know me as whitepanther, or if you use a screen reader white-p4-enth-3r. I'm still trying to find ways to make screen readers read out it as whitepanther! And I help developers build stuff learn things and love what they do. I'm a Staff Developer Experience Engineer at Netlify, and if you haven't heard of Netlify it's a modern web development platform that offers you a huge range of developer tools to build, test and ship your websites projects and products really really quickly.

I work with developers at all experience levels to enable and empower everyone to build a better web, and I do that by writing guides and tutorials for the Netlify blog, speaking at events and conferences like this, speaking on podcasts and all that fun stuff. And I also stream live coding on Twitch. I stream front end development, CSS, JavaScript, Jamstack, accessibility and YOLO deploying unfinished websites. I also maintain a variety of open source projects from fun stuff to serious stuff, and you can find them on my GitHub profile and get involved if that's your bag.

So, back to today. We're all living on it. But what exactly is The Edge? More and more cloud hosting providers and software as a service platforms are offering serverless functions — at The Edge. But what is The Edge? What are Edge Functions? And why does it matter?

We're going to answer these questions today by looking at serverless functions, serverless and Jamstack, The Edge, and finally Edge Functions on Netlify. But — first question to set the scene. What is a serverless function?

Now, I like to break things down as much as possible when getting technical. So the actual first question we're going to answer is what is a function? Now, a function is a bit of code that does something. hHere is a small JavaScript function. it's called print message, and it simply prints out the message “I am a function” to the logs, the terminal etc.

So that's a function. But what about serverless? What do we mean by serverless? However, we can't talk about serverless without answering — what is a server? So a server is a computer that can store and run bits of code. And those bits of code are the functions we talked about just now. Servers can be physical servers — that's hardware existing in time and space — or virtual servers — software on a physical machine — and these mimic the functionality of physical servers.

So when we say serverLESS do we actually mean no servers? No, we don't! When we talk about traditional servers, we talk about managed servers — like this. Here is a server room storing a bunch of physical servers, and despite being “managed”, you might notice that the cable management is poor.

Back end code, for example code that reads and writes information to a database, needs a running server to run. And before the dawn of serverless and “The Cloud” in around 2008 to 2010, in order to run any code that required a server, you had to store and run that code on your own physical servers or computers, like in this image, and maintain manage and scale them yourself. For small projects, you could get away with hosting your code in your bedroom or in a server room like this, but this doesn't scale when you have thousands of website visitors around the world, generating potentially millions of requests. And what do we mean by scale? More requests equals more resources, which means more servers.

To get around this, larger businesses required a group of networked — or connected — physical servers to ensure a fast experience for users. And the cost of running these physical servers could get expensive very quickly. Think about popular times for online shopping such as Christmas. E-commerce websites that run on physical servers need to respond to demand. If there aren't enough servers to handle all that traffic, the site will become slow unresponsive and people won't be able to check out. I've actually seen some websites operate a virtual queuing system in times like this where you actually can't access the website until there's enough server resource available. And that's going to lose you and your business some sales.

So the solution to all of that un-ideal nonsense has moved us from relying on managed physical servers to embracing cloud servers. Serverless doesn't mean no servers. It means you don't manage the servers yourself. You use servers as a service. And here's what they might look like. And yes! The cloud servers are still physical servers somewhere in the world, in a fixed location. You just don't need to worry about them. They're managed by somebody else.

AWS provides serverless functions, also known as AWS Lambda. And if you've used AWS in the past you may be aware that you can choose which location or region to run your serverless functions from, such as US West, US East, Paris or Ireland. And we'll come back to why locations of servers are important later when we start to talk about The Edge.

So why is serverless good? Serverless functions are backend as a service. On-demand servers have removed limitations and constraints from the traditional managed server model allowing you as developers to build and scale applications by only thinking about the bits of code that you need to run. This means that everyone from hobby developers to large businesses can execute back-end code on demand without having to manage maintain and scale their own servers and manage their own cables.

With serverless there's less stress. No security and software upgrades. You don't need any physical space and you can outsource the overheads and focus on building your product. Serverless is cost effective. When you run a serverless function, you pay only for the processing required whilst the code is running — not for persistently running servers and the maintenance that comes with it. You also don't need to worry about scaling, which means increasing the number of servers available when your website traffic grows. It's all taken care of for you by the service provider. And what I love the most is that most cloud providers come with generous free plans so you can usually run hobby projects that use serverless functions at little to no enough financial cost. So you can try things out before you start investing in your next big idea.

Now let's talk about serverless and Jamstack. It might feel like a little side step but it will lead us right on to The Edge. Serverless is a complementary technology to Jamstack, meaning that the technologies work really nicely together and help enhance and enrich your projects. They go hand in hand as the emoji suggests. Let's look at another definition: what is Jamstack? You might know Jamstack as using static site generators to ship static sites. But as the web continues to evolve and make more and more things possible the definition of Jamstack is also evolving. My colleague Phil Hawksworth recently released a post on the Netlify blog in which he discussed a refreshed Jamstack definition.

The key takeaway is that Jamstack is an architectural approach that decouples or separates the web experience layer — the front end — from data and business logic — all the back-end stuff. Using serverless functions with your front-end code is a perfect example of this architecture, and one of the key technologies that powered Jamstack architecture from the beginning was the CDN, or content delivery network. A CDN is a network of servers distributed around the world, working together to serve cached static and pre-built content to users from the closest server location possible. Keep this in mind and it will become important in a moment.

Traditionally requests for web pages were processed by a managed server, which we talked about earlier and this is an a fixed location. A user makes a request from a web browser. The server receives that request runs the business logic, builds and bundles the HTML documents and all the resources in real-time, and sends it back to the browser. There are several factors that can make this slow, resulting in a bad user experience. If the business logic is complex, if the return bundle is large, and if the request is being made far away from the physical server in a fixed location, for example, halfway around the world, that's going to make the experience slow. In contrast, when using a static site generator combined with Netlify, your HTML pages are served as pre-built static assets from the content delivery network. This removes the build and bundling process saving you a lot of time.

A CDN is also known as an edge network, referring to the servers that sits on the edge of multiple networks, which act as bridges to route traffic between networks across the CDN. When somebody visits your pre-generated site on Netlify they get back the pre-built pages straight away from the closest CDN server node location, and there's no build to run. As a result, people around the world get a fast experience on sites served by a CDN.

Serverless functions have historically been restricted to running on servers in specific locations, take for example AWS US West. For me, in the UK, making a request to US West takes longer than making a request to one of the European regions, due to the physical distance the request has to travel. If you're using serverless functions in your product, in order to make your website fast for everyone globally, you need high availability on servers around the world coupled with an intelligent network which knows how to route requests to the closest location to the user. And this is now possible with edge functions.

Edge functions are serverless functions powered by the edge network, which means that you can run serverless functions at the closest location to a request anywhere in the world. You might also hear this technology referred to as edge computing and with this, you as developers can collectively make the web faster and more accessible to more people, which could potentially change lives. And with the wide adoption of edge computing, we may also begin to see a reduction in carbon emissions as a result of data being served quicker over a shorter physical distance. And as someone currently surviving another heat wave in the Uk who doesn't have air conditioning — I would appreciate that very much!

In April this year, Netlify released Edge Functions, and you can now add edge functions to any new or existing project on Netlify. Netlify Edge Functions are very much like serverless functions. You can write them using JavaScript or TypeScript, but instead of using Node.js under the hood, they are powered by Deno — an open source runtime built on web standards. With Netlify Edge Functions, you can transform HTTP requests and responses, stream server-rendered content, and even run full server-side rendered applications at the edge.

So what does an edge function look like? Here is a hello world example. An edge function is a function — just a bit of code that does something, and this hello world example is written in JavaScript, but you can also use TypeScript if you prefer. Here we export a default async function and we return a new HTTP response with a string “Hello, world,”.

So you might be thinking well Salma, that edge function code looks suspiciously similar to a serverless function. Why would I use edge functions in production instead of using standard serverless functions on Netlify? So whilst Netlify serverless functions are great for providing API endpoints and serving responses, the super cool thing about Netlify Edge Functions is that you have the power to modify requests and responses on the fly before they are returned to the front end. Edge functions are also faster than serverless functions. Compared to Node environments, Deno starts up and is ready to run code much quicker. And all this happens at the edge — at the closest location to the user. And you'll see how this becomes very powerful when we go through some examples. The TL;DR is that you can do a lot of stuff on the edge that you would usually do with client-side javascript, and if you know me you know that i love to ship as little client-side javascript to the browser as possible.

So let's take a look at how you can add edge functions to your projects on Netlify in just three steps. Step one is to add edge function files to your projects. Step two is to associate those edge functions with URLs, and step three — you just deploy your project to netlify as usual.

So step one. Let's add an edge function file to an existing project. Heere's an existing project that you might have on Netlify. If you're already using Netlify functions, you'll have a Netlify directory, and inside that a functions directory. Edge functions live in an edge functions directory right next to functions. And I don't know how many more times I can say functions today and say it correctly! Here's the edge function we wrote earlier — hello world — and there it is living in the edge functions directory in our existing project.

So step two is to associate your functions with URLs. If you've got a project on Netlify, you've most probably got a netlify.toml file, and the netlify.toml file is a configuration file that specifies how Netlify builds and deploys your site, including redirects, branch settings and more. It's version-controlled and allows new team members to get a setup with no config required. Here's a netlify.toml file that's already got a redirect set up, redirecting from a nice clean short url to a terrible url that is too long. And to associate edge function files with URLs, we add edge functions entries to the netlify.toml file, and each edge function will have a separate entry. So you add the path that you'd like the edge function to run on — this one is just slash hello — and then we point to the name of the file inside the edge functions directory, which is hello edge.

So step three is to deploy your project to Netlify as usual. If you've set up automatic deploys via git, you can use git push to have Netlify build and deploy your site automatically, or you can build your project locally and then deploy it with Netlify using the Netlify CLI. And here's our edge function live, and if you've got keen fingers you can actually go to this URL right now in your browser to see it in action. And I'll tell you more about that website in a moment.

So there you have it! Edge functions on Netlify in three steps. But just now I mentioned the Netlify CLI. So what's that? In order to make edge functions worth it for developers, we need good ways to develop and test locally for the edge. We can't YOLO deploy this. And that's exactly what you get with the Netlify CLI. Install the Netlify CLI globally via npm, and then you can either associate an existing local project on netlify using netlify link in the project directory, or you can create a new project in your Netlify account using Netlify init. Finally, you can run Netlify dev to spin up a local development environment, and your edge functions will run locally —even with geolocation data, and we'll get to that in a moment. And top tip! You can also save some keystrokes and use ntl, which is a built-in alias. I love telling people about that, it's my favourite.

Okay, so that's hello world covered. So let's look at some more real-world examples of how you can use Netlify Edge Functions. Let's return to our hello world edge function. This is a small function that returns a response object. Now, if you're familiar with HTTP you'll be pleased to know that this response is the standard web API response, and when working with edge functions you're building with web standards and open APIs because of Deno, and there's relatively little new syntax to learn, and you can work with the response object in the usual ways such as setting the content type headers and more. Edge functions receive two arguments which you can make use of in your code. The first argument is the request object, which again is the standard request object representing the incoming HTTP request, and you can use all the native web API functionality on the request object, such as setting request headers and parsing the request URL for parameters.

Here we modify the response based on the event parameter in a URL. So we get the URL object from the request, and if we find the query parameter event equals “moar” in the URL, we return “Hello, Moar serverless!” or we return “Hello, everyone else!” if we don't find it. This is a perfect example of being able to modify an incoming request before you send the response back to the user without needing to use client-side javascript to parse the URL in the browser after the fact.

The second argument is the context object, which is specific to netlify and has some pretty powerful features. The context object exposes Netlify-specific APIs, and currently you can work with cookies, access geolocation and IP information, return data as json, write to logs, the next method will serve the next requests in the HTTP chain, and you can also rewrite incoming requests to another same site URL and get site information.

So let's use the geolocation API to modify a returned response depending on your location. So let's make sure we add the context as a second argument of the edge function, and let's grab the location information from context.geo. Let's be ruthless and say you're only allowed to access this content this hello message from the UK, like so. If the location.country.code equals GB, and we can even modify the HTTP status code to return when the request is not coming from the UK to tell the browser that this content is not available for legal reasons. And hopefully if you take anything away from this talk today is that you remember what HTTP status code 451 means. I like that one for some reason.

As a front-end developer I don't think I've ever had these capabilities so readily accessible before, and I would have no idea how to configure physical servers and traditional backends to modify a response at the server level and based on the user's location. With Netlify Edge Functions it's right in front of me, and it's using the web APIs I'm already familiar, with plus some extra magic from the Netlify context.

Now for some more magic. Let's take a look at how we can use cookies to create a personalized experience without JavaScript. Let's say you have an online shop where you sell two categories of products — corgis and food — and you want to modify what someone sees based on what they're most interested in, to hopefully encourage people to buy more things that they like. Here's a really basic example. Say someone clicks on an item from the food category which navigates to a URL that contains the string food. Here's some lovely pizza, notice food in the URL.

With edge functions we can parse the URL, and set a cookie based on what the user clicked on. So here we grab the url from the request. If the path name contains food we set the prefers cookie to food, and if the path name contains corgi we set the prefers cookie to corgis. Next, when we load the home page, we can read the prefers cookie and either modify the products that the user sees at the top of the page by sorting the data, or by using context.rewrite to redirect to a special food homepage or a special corgi home page. So I clicked on a pizza, the prefers food cookie was set, and now when I navigate to the homepage, the URL is rewritten to the home page for food, and all I see is food. Now I'm hungry, sorry if you are too.

This no-js personalization idea is from Jason Lengstord, who was the creator of the food and corgis website. He goes one step further and sets the cookies based on a scoring and waiting system, but go check out the code on GitHub, and try out the personalization on the site. Personalization without JavaScript is a dream and that's just one of the things you can do with edge functions.

If you're excited and curious there are so many more examples to look at over on edge functions examples dot Netlify dot app, which is the site that I showed you hello on earlier. We've got loads of examples — it's a growing list. There's inspiration for how you might put things into your products, there's atomic examples without trying to sway you any way with opinionated code, and you can also look at the code examples on GitHub as well as on the site, and you can also deploy the whole site to your Netlify account to iterate and experiment.

And there's more! You can use edge functions in any project whether you're using a front-end framework or not and actually my favourite way to use edge functions is without a framework at all, and Netlify also uses edge functions to power some of the more advanced features in a growing list of popular front-end frameworks including Astro, Eleventy, Next.js, SvelteKit, Remix and more. Remember when I talked about rendering full server-side rendered applications at the edge? You can do that now. You can also find more information in the Netlify documentation about the frameworks that you can run on the edge.

So let's recap. Serverless functions are bits of back-end code, run on servers in a fixed location that you don't have to worry about managing. An edge network is a group of connected servers that sit on the edge of multiple networks to route traffic between networks across a content delivery network or CDN. Combine serverless functions with an edge network and you get edge functions — serverless functions at the edge, and they give you the power to run code on demand at the closest location to a request, and intercept requests anywhere in the world. This is making the web faster and more accessible to more people around the world and is empowering developers to create more performant front ends by moving computation from the client to the Netlify Edge Functions today in your existing projects on Netlfy. Edge functions run on Deno, which is open source and they use standard web APIs and the Netlify context API. It just takes three steps to get started with Netlify Edge Functions. Add files, associate your files with URLs, and deploy your project as usual. We've got a library of examples for you to fork deploy and experiment with, and you can use the Netlify CLI to develop and test edge functions locally.

We've got loads more information on the docs about the apis and how you can get started and I also have a video on youtube where I explored edge functions during the launch in April and kind of did a lot of what I'm doing here today. So my name's Salma or white panther or white p4-enth-3r, and I help developers build stuff, learn things and love what they do. If you want to find out more about me and see what i do you can visit whitep4nth3r.com to learn more. Thank you for watching and have a great day at Moar Serverless!