WTF is the Edge? Edge Compute / Functions

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Talinski and Wes Boss.

Welcome to syntax, the podcast with the tastiest treats rid Out there with for web development, we are gonna do a awesome episode today on WTF is the rid edge. You hear this word thrown around a lot. Edge compute edge functions.

Run it on the edge.

What is the edge? That's what we're going to attempt rid. Attempt to tackle an answer today.

We are sponsored by 3 awesome companies today. Linode rid. Cloud computing, Linux servers hosting, they do everything. LogRocket, JavaScript session replays, and FreshBooks cloud counting. We'll talk about all those awesome sponsors partway through.

With me, as always, is mister Scott Talinski. How are you doing today, Scott? Oh, I'm doing okay. Our our whole family's been sick for, like, 2 weeks now. So, that's been really great. You know, Brooklyn, like, waking up in the middle of the night the past 4, 5 nights a row. She can't breathe. She's got a fever. It's, like, everything. And so, kids are staying home again today for what feels like A long time. Yeah. We

just got through a week of that. And, like, yeah, one of our kids didn't go to school the entire week, and it was just like, everyone ended up Antibiotics, and I got bronchitis and brutal, brutal, brutal. I hate it. Yeah. So it's been a little it's been a little rough this morning, but I'm I'm getting through it. Rid. Cool. We are switching up this recording.

We're trying out Riverside.fm because we're starting to do a little bit more rid Guests on the podcast. And, like, we used to always ask guests to, like, record themselves and send us the audio, Which is okay. Generally, those people know how, but it it's nicer to just have an app do it. So it's just kinda cool. Yeah. Do we have an announcement to make

In regarding that? Yeah.

I I guess we could. Yeah. Because this is this one gonna come out before? Yeah. It is. So Yeah. Rid. On Fridays, we are gonna start what are we calling it? Supper club. Friday supper club. Friday supper club where we're adding another rid weekly podcast. So now we're gonna have 3 episodes a week, and Friday is just gonna be guests. So we're gonna have all kinds of interesting people just to talk to them. So we get rid I I've always wanted to have tons and tons of people on the podcast, but we never really had a good system for it. Like, who should we let on and who should we not? And, like, We we probably get, like, an email every other day of someone that wants to come on, and we could we could do an entire episode every week.

Rid. So it's nice just to have a whole separate day where we have people on and we can chat with them and ask some questions and whatnot. So I'm pretty excited about that. Yeah. Yeah. Me too. And and just so you you know that this isn't going to be, you know, supper club sponsorship hour either. We're we're definitely going to have people

Who are presenting interesting things and not selling you a product or something because I think that's the way it works the best.

Case in point, rid. There was a PR company emailing me for months trying to get Netlify on. And I was like, no. No. No. Absolutely not. And then, rid. What's his name? Jason from Netlify is like, hey. Can we get the edge function guys on? Like or or not. Can we? I'm like, I'm happy to hook you up. Absolutely. I love Netlify.

And so that's the dirty little secret is

don't get a PR company to try to get you on the podcast. It doesn't work. Yeah. It doesn't work. At least For us, I think it probably turns us off from you, especially if we have personal relationships with people there. Like Yeah. It's funny that the PR company would reach out to us when we all Have had so so many emails from all of the folks that never liked. To the CEO. Yeah. But yeah. Yeah.

Yeah.

Yeah. That's, rid I I think that's that's kinda true. And we get people, like, they do, like, a a tour. They're on every single podcast. I hate that. That's awful. I just I just want the the most interesting people. They don't necessarily have to be big names or people to have a book or anything like that. It's just people who are doing interesting stuff or people that can rid. Help on us understand

an aspect of tech that we we don't necessarily know a whole lot about. So pretty Pretty stoked about having some we got tons of really good guests lined up already. Yeah. So you'll get a 3rd syntax in your inbox every single week on Fridays. Rid. And, Yeah. I'm super excited about that. Alright. Well, let's actually get it into the part of the show where we talk about the thing. So, the edge, what is the edge? Why might you want to use it? What are the upsides? What are the downsides? How do you use it? Who offers it? All of those things and more. So I guess for the the the very beginning, we should get into the 101 here. We're talking edge. What does that mean for you, rid. And,

what exactly practically does that mean in the real world? Yeah. This is something that a term gets thrown a lot around a lot, rid. And you often are starting to see it in marketing companies sort of alongside with serverless.

But you're just like like, what does it what does the edge rid. Actually, me.

And the edge in technology, edge compute is running the or processing the request rid. Or processing the, compute as close to the end result as needed. So, rid. The very closest way you can, run something is literally on your user's machine.

And then from there rid on out. If you don't necessarily can do it on the user's machine, then you can do it, maybe on a server that is in the largest city close to them. Rid. And if you can't do it there, maybe you could do it on somewhere. And, that's a little bit different than traditional servers where rid. You just have 1 server or maybe a couple and maybe 1 in Europe and and one in Canada, and then you just you'd run it on that server. So The idea with edge compute is put the processing as close as possible to the user, and we'll talk about why. Obviously, probably speed is the biggest one there, but, we'll talk about why you might wanna do that,

as well as some upsides and downsides to it. Yeah. And we're not So if you if you're not thinking CDN, if we ignore a CDN aspect or any of that stuff, when you sign up for, let's say, an AWS Server. Right? Yeah.

Or any type of server. Right? Typically, it presents you with the location of that server. That's where that thing lives. And Yeah. The like, in in the real world, that's where that it's a computer running it in the in the world and that's from that location. And what we often don't think about with this stuff is your have data that needs to go you know, the user types in your are you hit enter. That data needs to physically travel the distance from wherever that is to you. Now things like caching and CDN can bring it closer to the user, but your your server very well may be always just living in that distant spot. And believe it or not, Everything feels like it's in instantaneous, but there is some latency there inherent with either just traveling distance or The amount of stops it has to take before it gets to you. But we often don't think about that because everything happens so quickly. Right? Rid. Yeah. Yeah. It's kinda interesting that we've seen

this for years, on CDN World where the CDN will rid like, you got an image, and the the CDN will put that on 6 or 7 servers around the world. And then when you request one of those images, it will rid. Figure out where the closest server that has that images and and and bring it back to you.

You even see that with things like Netflix, where they will literally ISPs rid. We'll literally get a box that they install on their inside of their ISP, and it will do things like cash Netflix shows rid. So that they don't have to do the bandwidth round trip both in terms of speed and in terms of bandwidth.

And now I just like I've been seeing this Edge functions over and over. And in the last year, you're starting to see a lot more, a lot more frequently where okay. Of course, we can do assets that are static or change somewhat frequently, but we can also do computing as close to the person as possible. So rid. Let's talk about some of the upsides first. The biggest one is that, there's time sensitive data that needs to happen inside of rid. For the purpose of this episode, sorry, you should probably be thinking of, edge functions as So you can think of it as like a serverless function. Yeah. The little little little function there. Yeah. Exactly. Like, an example might be, rid. You have a smart plug, and you want to turn that smart plug on or off. Right? There's a little rid Bit of logic that needs to run inside of that function to figure out, okay, is it on? If it is on, then turn it off. If it's not if it's not on, rid. Are there people who have the app open that need to show that that is on and off? And, are there other things that need to happen when this plug rid Turns off, does it is there a rule that needs to trigger? Like, right, like, that that's that's a pretty simple idea of a smart plug. Right? And, generally, I've had several smart plugs, and some of them are fast as heck, where you push the button and, like like, literally, like, rid. 10 milliseconds later, the plug turns off, and on and off. I'm like, wow. That's, like, super responsive. And I've had other ones where you push the button and rid. 400 milliseconds later, that's still half less than half a second, but at 400 milliseconds is a lot. Right? And where where that Logic runs. Does it run on does it literally run on your phone because you're on the same network as the plug? Or does it have to go to Belgium, rid. Run the thing and come back to your home and and turn the plug on and off. So that is when I was doing a little bit of research for a show, that's Kind of where I saw a lot more of the outside of the JavaScript world. That's where I'm seeing a lot more of the, idea of this edge Computing is in the Internet of Things world, as well as in, like we had that show in Heavy Industry as well, where, you have robotics and stuff.

That makes a ton of sense if you think about it because, like you said, it's a small amount of latency, but it is going to not feel, rid. Good. Especially when you compare it to how the light or whatever you're working with feels if it was not smart. Right? You flip a light switch. You expect that light to go on instantly, But then you get into Internet of Things world. You flip the light switch and having to wait 400 milliseconds.

It's gonna feel weird. It's gonna feel not natural. It's not going to I I can tell you that wouldn't necessarily fly in a lot of households with their state. Why why don't we just use the normal one that works? Like I don't need it these extra features if I'm sacrificing that weird

delay totally. You know, like when you go to rid. A website or you get, like, a new piece of tech or, like, you get a new phone. That's probably the biggest one. It's like your old phone. Like, you never thought, ah, this thing is slow, rid. But then you get a new one. You're like, oh, wow. Like, this is super responsive. This feels good. Like, it feels good. And, like, what is that? Well, that's rid. Somebody that actually cares about the the time sensitivity between those types of things, and they've they've done the actual work and and made that even faster. And it's It's definitely noticeable.

Yeah. Totally. What let's go through some of the the other upsides as well. You wanna grab the next one? Yeah. So

well, we've mentioned really that it's it's fast, and that's really where most of the upside come from. Right? So it reduces it's funny that, so So many of the things that we have listed in our our notes here for upsides are, like, the same thing. Reduces latency, fast as hell, close to the user.

So all of those things are really what makes this fast is is really you're closer to the user, so it has to travel less physical distance, but also has to make less stops Elsewhere, sometimes things have to be routed from one thing to the next.

I you know, I'm not actually familiar with any of these cold start issues. So, one of the upsides here that you have listed, West, is that it's 0 cold start.

Would you mind giving an explanation as to what Cold start is and why an edge function might make this better. Yeah. So

we had if you wanna rid. Learn a little bit more about cold start. Go back to the episode where we had Brian LaRue on from begin.com, and he he explains, like, what cold start is and and why It's getting better and better. So, like, let's say you have a Node JS function that simply echoes hello world rid or console logs it and then shuts down. Right? With a cold start, when you run a serverless function, rid. What needs to happen is they need to go and get that code. They often need to set up a container that has the the version of Node. Js That you want inside of it, and then they have to fire that up and they need to run like, you type node index dot j s. That takes rid. A number of milliseconds as well. And then finally, the code is writing running. And if that is all of the work that needs to happen before rid. Your light switch turns on or before a user is redirected or before a notification is sent to your phone, then rid. That could be again, we're talking about speed here. That can be an an actual issue.

And cold start is something that people are working on, and There's this idea of having warm images, meaning that, like, you okay. Like, 5 minutes ago, I ran that serverless function. That thing is rid. Still warm, meaning it's still running. And if there were to get a second request, within 5, 10, 15 minutes, rid. Then that's it. Okay. I still have this thing all set up. I don't need to do the setup. There's no cold start. I can just run the actual code. But at a certain time, that's the whole idea with serverless functions is that, oh, nobody's using this code base right now. There's no sense rid. In using compute power to keep this thing running, we're gonna we're gonna, spin it down. That's a word we say often is we're gonna stop it. We're gonna spin it down. Rid. And then if somebody comes along in in 6 months, this is often if you go to Heroku as well or things like that. If you're the first rid person visiting that website in the like, that day or or in a week. Sometimes the 1st time you visit it, it takes rid. A second or 2 to actually get going. And that cold start is something that people worry about a lot because it can be an actual issue. Rid. So the upside to, using edge functions is that there is no cold start because it runs in an environment that is rid. Quite a bit pared down, and we'll come we'll hit that when we we hit a downside. So, generally, with most things in in computing, the more rid Restricted the environment that you run it in, the faster it is going to be.

And and that's the idea with this. And rid. People talk about if cold starters actually issue or not. So, I'll leave that up to them, but, that is one of the big benefits that is touted amongst edge functions.

Yeah. That's cool. And you also, have here that there's privacy concerns too, or it can help with privacy concerns.

Because what I'm what I'm guessing here is that what it's it's traveling less places less distance. It's only going to the to the edge. So, therefore, you can run it in the same location as where the user is. That means that that that information is not having to travel outside of wherever you are, whether that information is encrypted or not. So I I guess that's I I I don't know how much of a thing that actually is, but I guess if you're dealing with more Of, IoT based stuff seems like that would be a much bigger deal than sending

an encrypted website. Right? Yeah. Well, if rid. If you're running any sort of, business where the information you are processing is highly sensitive, rid. It can be really frustrating because, like, let's say, the IRS in the in the US or the CRA in Canada, the people that work on these apps, rid. They can't just go flip that thing on. It's probably a little easier in the US. But in Canada or especially other countries, you don't necessarily have rid. Those things available to you, and it's hilarious trying to book something on government of Canada website because they literally just they just limit the amount of people that can do something at once Because they don't have the they can't scale up to, I don't know, 10,000,000 people wanting to do something on one day, and then a week later, 0 people wanna do it. Right? And rid. Serverless and edge compute is really good at that, but you can't also just, like, send all of your traffic to the US and let let the rid. You guys spy on all of our our data. Right? That's a that's a major issue. So often, you have to keep your data running rid. Inside the same country because you have a pepeda or personal information or or whatever acts that are running in your country. So that's That's a big one for people is being able to take advantage of it, but still run it within the same country. It was really interesting that it's somebody's

Job, Wes, to to handle the scaling of things like the IRS's website, where, like, you know That the usage of the IRS's website has a huge peak and then, you know, falls off dramatically. Yeah. But I've never I've never been on it once where it didn't work. So somebody's job out there is to scale things like that that are are so uneven in which they they get traffic. I know that's, like, a lot of things. Right? You have a launch date, whatever. But I would imagine for something like the IRS or anything like that, that would be very dramatic and interesting to see. Oh, yeah. It that was It was a major thing with, with COVID because Oh, yeah. People needed to book vaccines rid. Scenes or get testing. And, like, the

the demand of it just went up and down and up and down and up and down and, Like, let alone scaling people, but the infrastructure in order to be able to book things and whatnot was was huge. Well, you might want to check out one of our sponsors today, which is Linode, The cloud computing that developers

trust. Do you want to talk about Linode, Wes? Yeah.

Rid has a whole bunch of documentation on edge computing architecture and the different services on there. So Linode has the option to, rid. Run, computing in all kinds of different clouds. They have servers all over the world, and and if you need to do it, then they are able to do that.

Rid. So they have a whole documentation on their website. It says Edge Computing explained how does it work? You can read through it. Rid It says edge devices add flexibility in computing by virtue of many communication pro protocol options, which include Bluetooth, low energy, cellular, Ethernet, NFC, RFID, Zigbee, Z Wave. So they obviously do that, but they do All kinds of stuff. Virtual private servers, Kubernetes, shared CPU, high memory applications, GPU, managed databases, MySQL, Block storage, object storage, you name it. So check it out. For your next host, go to linode.comforward/syntax.

That'll give you a $100 And free credit, which is pretty sweet. Thank you, Linode, for sponsoring.

Alright. Next one. We did the upsides here. So we've learned that it's fast, it's more private, of closer to the user. All of those things. What are some downsides of edge functions? Why aren't we running everything in the edge all the time?

Rid. Yeah. So we said earlier that the more constraint constrained that a Environment is generally the faster that it actually runs. So there's a reason why your heart monitor is not running Node. Js, it. And it's using low level, probably c or something like that or even, what what are the other low level languages?

Rid.

Rust o level language, like assembly code or or things like that. You know, like, they're not running these compiled languages on there. And The reason they're doing that is because they are smaller, faster. They can work with less dependencies. Right? And then at the other side of things, you have Full environments like JavaScript where, it's much more involved. You have to have a whole browser or Node. Js and v eight running, but it's much easier to write, rid. To write JavaScript. Right? So the idea with Edge Functions is that they run All of the ones that I've seen, they all run-in JavaScript. I'm sure there's environments for other ones as well, but they don't give you the full Node. Js API.

They give you a subset of JavaScript APIs where they're saying, okay, This is a constrained environment.

The reason we do that is because you may only do these types of things which are fast. And if you need to do other things that are regular JavaScript and then that that take longer, then you have rid to do that in a serverless function or a server rendered.

We'll talk a lot about what they're used for and examples in in just a second as well. So, rid. I've talked about this with CloudFlare Workers in the past. That's, probably one of the biggest implementation of edge functions out there Mhmm. Is that Cloud rid workers, they have their own custom JavaScript engine, and it's intentionally pared down so that They run as fast as possible. But the downside to that is that you you can't do literally every possible thing that you want. You can't npm install a 1,000 packages and And set up everything that you want.

You just have access to a certain amount of APIs. And what APIs are though? Let me let me ready. I'll send you the the list here, Scott, so you can see. So what APIs do they have? They've got console, lot log, a to b and b to a.

Those are used For, base 64 encoding and decoding, those are built into the browser.

Rid. The whole fetch API, which is great because often what edge functions are used for is for intercepting a request, massaging that data, caching something, fetching some data, and then sending or sending a response from that, rid. Text encoding APIs performance, web crypto API, which is for generating, random user IDs, Not for many Bitcoin, WebSocket API, timing timers, streams.

And then they also I thought this is really interesting.

Rid. Generally, all of them offer those ones I just said. And then they all some of them have, like, custom APIs added on top. Netlify built theirs in Dino. Did you see that, Scott?

I didn't see that. No. But I have you know, we it's funny because we did mention in our, rid Like, recap of the year that Dino didn't seem like it had gotten any movement, and I I'm the one who said that. So I'll take, rid. Responsibility, if that's not true. And, what I have seen over the past, like, 2 or 3 months is maybe more No. Then I had seen, like, all of last year. Yeah. I was just seeing something this morning about speeding up Prettier with Dino, and I was like, oh, man. This is kind of neat. So hey. Dino's popping up here and there. Yeah. It was amazing because,

I was like, why would they use Dino for this? And rid. The reason is because Deno is a server environment that has implemented all of the web APIs. So the idea behind These cloud functions is that you can just use standard web APIs, not node APIs, not browser APIs, but web APIs, which are rid Fetch and encoding and crypto and whatnot, and Deno has implemented all those. And on top of that, you can use TypeScript Without any sort of build step either. So I was like, oh, that's that's actually a really good use case for Dino. So, I was also notified by some people on Twitter that, Supabase is has edge functions, and they are also running on Deno,

which is really interesting to me. Yeah. Yeah. Super base.

Soup. I always wanna call it super base. Super base. Super.

Super.

Okay.

Rid. Yeah. So okay. I also have in here for downsides, Wes, that it costs more. Now I haven't seen any sort of real world calculator or anything like this. Do you know rid. Ex exactly if it does cost a significant amount more, or is it, like, compared to serverless? Because it you've done a lot more with serverless than I have. Yeah. I rid. Don't know.

I don't know. I haven't run any edge functions myself. We'll go into some use cases in just a second, but rid. I would assume so because, you are now running that code in different environments, And it's a little bit more intensive to actually have to distribute that rather than just put it on 1 single server in Virginia.

It now needs to be available on, rid. I don't know. I'm not sure how many, servers they have around the world, these different companies, but they're often dozens of them around the world. Right? Yeah, totally. I should also say for the APIs, Netlify is generally this is the same and other ones, they will give you a set of APIs that are specific to that environment that allow you to deal with cookies.

Rid. Nullify gives you a geolocation. I know Cloudflare gives you that as well, which is really nice. And then I know Cloudflare Workers has an entire Streaming API that's used to rewrite HTML if you need it. So, that is some of the downsides. Another downside is There's a 1 meg limit on your functions.

So again, you can't go npm installing anything you want. You can use dependencies in them rid. Because and same with Cloudflare Workers.

But which ones you can use is sort of limited on. Do they use rid Standard web APIs that are available in these, or do they use Node. Js, APIs in almost I don't I would say in 80% of the use cases, they use a Node. Js API or a browser API, and and those aren't available in this environment. This is sort of like this rid. 3rd environment that we're talking about here, I call it a worker environment because if you think about, in the browser, you have what are those? Service workers. Service workers is like a third environment. Right? It's not a browser. You have no browser APIs. You have no Node. Js APIs, rid. You just have a subset, which is web APIs available to you in that. There is a 1.2nd response time limit on a lot of these.

Rid So the response time varies. That 1.5 seconds is on Vercel's, edge functions. So, again, if you need to do anything that is Larger than that, then that's probably not the use case for what an edge function is. Yeah. So that does go back to the point of what we were saying earlier.

It it's not for, like, long running processes. It's not for the types of things that you're running your whole server on. It's more or less Use case for functions. Yeah. Yeah. Exactly.

So if you're experimenting with any of these new technologies like edge functions or any of this stuff, You might want to utilize a service that helps you diagnose issues. Now this actually is one of our sponsors today, which is LogRocket. And let's say you had An edge function that was failing, you're hitting it with a request.

That function is coming back with some bad data, or something along those lines. You could use LogRocket to see a video session replay of the user using your application, And it allows you to even see the network tab for when the user did that thing, meaning that you could diagnose issues on your production site from the network tab In LogRocket to see exactly why that data isn't coming back the way you expected because some sometimes, you know, you think it's all working, and then you forgot something here or there. And next thing you know, Your data is not working right, and your users are having a bad experience. Well, LogRocket is here to save you from users having bad experiences by making rid. It full of visibility into understanding exactly what's going on at any given point in your application from performance metric tracking to There is an exception in the video scrollable replay. It's so very cool. So check it out at logrocket.comforward/syntax, and you'll get 14 days for free. Thanks so much for LogRocket for sponsoring.

Okay. So, we have a little bit of upsides, downsides, what the heck they are. Now let's say, Why might you use them if they're not for a full on server long running process here? What's the use case in which you would want to use an edge function? Yeah. I think Vercel rid. Does the best

job at explaining them, and they roll them out as middleware, Meaning that and and this is also if you go back to the show on Cloudflare Workers where you explain what those are. Cloudflare Workers are often used as middleware. So what do we mean by that? So generally, a edge function will intercept a request. You've got your server on one end. You've got your user clicking a button on the other end. And in between your user clicking the button, sending the request all the way to your server, You can jump in between, and intercept that request and do some work at any given time. And it could be the end rid. Result or it could be simply just grab it, do some stuff and pass it pass it along. So you're probably familiar with middleware rid. From, Expressland where, you have an endpoint and you have your initial request, and you can run code in rid. Those massage data, pass it along, whatever you need. So, let's go through a huge list of possible use cases. This is I've collected these from rid All the different vendors of Edge Functions as well as I asked on Twitter, like, what do you use them for? Mhmm. And it seems to be, like, one of the biggest use cases are, Redirects. Complex redirects.

So if you have, somebody coming to a URL and look, let's say on this podcast, go to syntax.fmforward/ rid. Free shirt or something like that. And you needed to right? Like, what needs to happen when somebody hits that Europe? Okay. Well, if they're rid. From Canada, then you gotta, redirect them to the Canadian website. And if they're from the US, then you need to redirect them to the US website. And, rid. Maybe you say, okay. Well, that that's a lead gen. You need to mark them in your Salesforce software as as a possible lead. And, rid. You say, okay. Well, if they're logged in, then I need to do something else with that or pass them additional information. And there's there's often a lot of like, oh, my gosh. There's a lot of checking That needs to happen before you even actually redirect that person based on who they are, where they lived, if they're logged in, if they purchased, all the kinds of stuff like that. Right? So with an edge function, you can intercept that URL, and you don't have to put all that logic in, rid. Like a route in your application, you can just throw that in an edge function and keep all that logic nice and tidy in a single, rid. Edge function. And then from there,

you can redirect the the actual user. That's neat. I've actually done a little bit of stuff like that before, especially when you get into Complex redirects and DNS isn't isn't cutting cutting it for you. That seems like a a good option for something like that. Absolutely.

Rid. Other things, there's edge rendering or or server components. So somebody hits a hits a URL, if you want to render out, rid. It says React server components. This could be literally anything that renders on the server.

If there is no rid. Heavy dependencies on like, if it's just JavaScript at the end of the day, it will run-in an edge function, and much of your client side stuff will run, rid in that use case because there's I'm sure you hit the issues with, like, oh, you have a browser API, and you gotta still take care of that.

Rid. But if you have a server component that needs to be rendered, you can do that on the fly.

That could be very handy because we've talked about in the past, rid. If you wanna be able to render out a component based on if somebody's logged in or not, you could do that in an edge function as well. You can go as far as You could render your entire website in an edge function, given that you hit those, restraints.

What's the word? Constraints? Constraints.

Yes.

What are content rewrites? So if you want to be able to, rid. This is one that I've used myself in in Cloudflare Workers.

I have a, like, a hosted cloud app where it has like screenshots and whatnot. Right. And if some of the features they took out and some of the design I don't like, I can literally just intercept that request, and then rewrite the HTML. You can fetch the actual HTML that the user would it be returned.

And then you have the HTML and you could do things like find and replace, add in your own JavaScript, tweak the CSS, rid. Replace every instance of their blue with your yellow or would literally anything anything that you want and you're right in between them.

And that would be rather fast because you simply just need to fetch the end result and then stream the text into the user's browser as you rid. Are receiving it and replacing

the the stuff that you want. Yeah. It seems like this I mean, a good use case is for anything that it. Needs to step in between some of the bigger work and what the user's doing. Like, you also have a a b testing listed here, which for those of you who don't know, a b testing is rid. Where you're serving up 2 different versions of a feature component or even an entire site or design to different people based on percentages. So that way, you can track things like interaction From one design to the next design, you see this, like, all the time with, like, Netflix is, like, constantly serving up different interfaces to users, but also different thumbnails.

Rid. I'm very confident that their team has, like, some solid math on which of the thumbnails that make a title more likely to be clicked and, like, what the difference there is. So rid. If you wanna have AB testing, this could kind of step in the way and say, oh, you know, this build, we're gonna send a certain percentage of the users to 1 build and a certain percentage of users to another build. Rid. That way, we can track to see which of these builds has better interaction, or is used in a a way that's more like what we would want to have used. Rid. Another good use case is authentication.

So if you want to allow or deny access to a specific resource, Whether that's an image or a JSON endpoint or just a logged in user, authentication is a huge use case for these it. Edge functions that you've sort of, again, jump in the middle, check if they're logged in,

and you can go ahead from from there on out. Yeah. It's funny. Okay. So you have one that you have geolocation written on here, and I was sort of sitting here like, I wonder what geo how you would use this with geolocation, but it does look like you had a tweet along with this.

Just tried conditionally loading a script via geolocation.

Pretty useful for stuff like cookie consent where laws differ. Now that is interesting. I have not even thought about that. So I was, like, going through my brain, like, what could you possibly use geolocation here for? Rid. And this this could very well be a good use case. Right? Yeah. Exactly. Like, you don't

have to show Those annoying cookie banners in countries that do not have cookie banners as a law, like Canada does not have that as a law. So stop showing me your damn cookie banners. I don't care.

You know? Yeah. Yeah. I hear you. Frustrating. So, again, they'll give you a header. Rid. And in that case, you can just you could immediately set the cookie of don't show the the cookie banner. And then that, again, that logic doesn't have to go Inside of your actual application because you just stick it in an edge function, yeah, where it will be processed faster than it would be. Exactly. Localization. Rid. And globalization is another big one. So you want to be able to translate things on the fly or for example, I have a, a coupon banner based on what Country, the user is actually in. You could you could throw that in there as you want. Browser support is a big one. You can detect the user's browser on the fly and either render out an older version of the website or none at all or or a little banner.

Rid Again, that's not that's one more thing that doesn't have to go inside of your these seem really nice to me because rid. I have a lot of these things in my application, and they are in middlewares. Mhmm.

But being able to stick them in an edge function of just their own thing. Again, they run faster closer to the user. They have all that information.

Seems really nice.

Yeah. I'm interested in How you implement these into your application. So maybe we can talk a little bit about that as well.

And so okay.

Rid Are you good with the amount of use cases here that we I'm just gonna go through the tweet I asked on on Twitter. Like, what do you use edge compute function for? Lot of people say caching as well.

So again, if you hit an endpoint, specifically, like, Cloudflare has, Along with their functions, they also have their key value store.

So let's say, for example, you are proxying an API and And you're only allowed to hit that API like the syntax API. You're only allowed to hit it once every minute or so. Right? And if somebody were to fetch a list of episodes, rid. Likely, if someone were to try to fetch a list of episodes the next minute, those are going to be the same. And it doesn't make sense to have to rid. Hit the database, query query them all, render out the show notes, and turn them. So you could just put in your own caching layer right in between there, rid. And just say, oh, well, somebody requested shows that JSON.

Let me just pull that out of my cache instead of having to do all the rid. Intensive work, and that could possibly save you money in the long run because you're not having to

run that compute over and over again. Now there's also So, I mean, that gets me, like, thinking about, like, authentication. Right? Whether that is just, like, straight up the users data that's cached or when it's been authenticated.

If you were going to, like, authenticate on the cloud function or the edge function, right, you're gonna authenticate in the edge function.

Rid. It would how would you you personally thinking about this, like, how would you authenticate the user and then send along the user authenticated data with that request going to your normal server. Like, how would that work authentication

with the edge? I think, like, rid. There's 2 things you could check if they are authenticated, and then either return a four zero whatever or not.

And then the other one would be you can simply just set the cookies of that request so you can continue on to your application.

So kind of seems interesting, and that's especially helpful if you are, if your serverless function is rid. On many different servers. Right? Because, you know, you got to think about the user is hitting 1 computer for the 1st request And then another computer for the 2nd request. And if you want to be able to check if they're logged in between those 2, that could be pretty handy as well. Rid. Yeah. We are I should say we're gonna have some folks on from, probably from Netlify, maybe from a couple others, rid. To talk about, like, what the use cases are because it's pretty new to me as well. I've not implemented them in in any fashion, but I've just been, like, again, seeing them over and over again. I went down the rabbit hole and watched a bunch of videos

for them. Yeah. I know know my wheels are turning a little bit. It's like, where where could I even just try these out in my application just to give it a try? And you might be thinking like, okay, Wes. Like, All the stuff you're saying, I could just do that in a serverless function. Right. Yeah. And

or even just on a regular server full function. Right? And I don't see see the whole benefit. I I think the benefit to this comes where, again, the speed and location at Which these run is very important to your end game of your application. Interesting.

Okay. Cool. So let's talk a little bit about How you would implement these things in your application.

So we have different services, and I would say you're almost always gonna be using someone's flavor of I mean, by flavor, I mean, someone specific. You have Netlify's edge functions. You would have Begins Edge functions begin as Edge functions, right? I would assume maybe. I don't think so. Yeah, maybe they don't. Maybe that was a bad assumption. So I believe,

and And I'm not sure if this is totally true that so there is LambdaEdge Functions, which is part of AWS. Mhmm.

And rid. Like most of the serverless offerings, they are built on top of Lambda or whatever Google's version or Microsoft version is of this specific thing. Generally, the AWS stuff is the best.

And then things like Vercel and Netlify. I I don't know if this is totally true or not, but I'm assuming that they are built on top of it because they add easier integrations, easier deploy rid.

Shit, code sharing, environmental variable sharing, not having to use the awful AWS console to do anything, rid. Like, especially like, if you're using Next. Js and all of a sudden you want to run a little bit of middleware, rid. That's the middleware index. Js when you deploy to Vercel will run on an edge function.

Rid. And it's pretty, pretty sweet to be able to just, like, say, alright, this is a middleware. This must run before you actually hit this API endpoint or the render of this page.

Let go ahead and run this,

code. Cool. So it does feel like the workflow is very similar to how you would work with it serverless anyways.

So if you're the type of person who's running serverless functions, you're basically just having a as The different API for JavaScript or slightly different, I'd say, available API for you. And

is that is that accurate? Rid. Yeah. Yeah, exactly. As you have to make sure that you're not using any of the APIs that are not allowed. I was just reading the Vercel docs on this. It says A static page will deliver the same content to all visitors no matter where in the world they are, and it will be fast as it's cached by the CDN.

But this approach may not be viable if you want to deliver personalized content depending on, for example, where in the world the user is located.

To give the user personalized experience, you can take advantage of server side rendering to create dynamic content on each request of your site's page. This will enable you to offer different rid. Content to different people based on the location, authenticate them, or configure a language of your site. That makes sense. Like, we talked about it earlier. We've had CDNs for static stuff for so long. Rid. Now this is kind of like a CDN for server rendered assets.

We can go along. It's kind of rid. Kinda neat that you can do this, and they're making it much faster because, like, the downside to generating it on every single request is it can be slow, Especially if that server is very far from your actual user. Mhmm. So bringing that compute closer to the end user is sort of the idea behind all of this. Cool. So, Wes,

did you get those taxes done? How how how did that work out for you? FreshBooks

Sure. It did. I'm I'm so in such good shape that, I've already done my q one, remittances for for my HST, which is our what do you call what do you do you have a special name for your tax that like, you you buy something for a dollar and it's, like, a dollar 13 or whatever? Sales tax. Rid. Sales tax. Yeah. So, like, we call it HST here in Ontario. That's rid. It's different in every state there too as well. Right? What percentage is it in in Colorado?

Honestly, I don't know. Oh my gosh.

Rid. Yeah. Well, I mean,

it's I remember what it was in Michigan, or at least I did at the time.

Colorado.

I know we have, like, super low property taxes, but let me see about sales tax. I don't know if we have low sales tax. I know we have low property tax, but 2.9%.

You kidding me? It's 13%.

Oh, depending on local municipalities, tax rate could be as high as 11.8

Denver's is 8.8.

Okay. Okay.

That's 13%. It used to be 15 when I was a kid. Anyways, I have to collect that rid. Based on if you're Canadian, I have to collect the, HST and GST and PST based on, like, what per province you live in, That would actually be a really good use case for Edge Functions is displaying the user's localized sales tax on a server rendered page.

It. Yeah. Oh, I like that little pop noise. Yeah. Boom. So

that's a pain in the butt. And then I also any time I pay out sales tax rid to any of the vendors because I buy stuff, then I get that back because I'm a business. Huge pain in the butt. FreshBooks makes it so so easy.

I just rid Have to put in all my expenses, log all the HST.

I have them auto put in from my credit card. It is awesome. Rid. And then my accountant can just pop into my FreshBooks, grab all that information, and then he knows whether I have to pay out or get back HST depending on if I rid collected or spent more, in that quarter. It's awesome. Check it out. Freshbooks.comforward/

syntax. It's gonna get you a 30 day free trial. Thank You, FreshBooks, for sponsoring. Sick. Okay. So some of this stuff we've already covered a little bit. Like, what what are what are edge functions not used for? They're not used for A a long running process, anything that needs the entire Node JS API, anything that's going to take a long time.

Actually, it's interesting that it might be, like, a neat case for Wasm. If you have a function that's, like, slightly taking too long, rewrite it in

another language. Could you do Swazza? Yeah. I wonder if you could put Wazza in a in an edge function, Yeah. Be kind of cool. Or, like, At the very least, like an edge function could kick off a process.

Like, for example, like an image. If somebody requests an image, rid. You don't have a smaller version of that. I don't think you can stick around and wait for the image to be compressed and resized.

So in that case, you could just rid. Forward them to the original image. But you could also kick off a little sub process, maybe in a serverless function to say, alright. Well, this one didn't get resized, but the next one, go ahead and resize it and compress it and whatnot so that the next person that hits this one, We can serve them up a cache version of it, and that's sort of an approach in Edge functions as you just kick off asynchronous work That will unfortunately, not for this time, but or or we'll email you when it's ready or send you a notification when it's ready. But We're not gonna stick around in this request and wait for that work to be done.

Interesting. Okay. So what companies offer this? Cloudflare.

We have Cloudflare workers, Netlify Edge Functions.

We have a Supabase using Deno, Vercel, AWS, Lambda.

I'm sure there's others. Right? The the big one that Netlify landed at the other day, couple months ago, Vercel rid. Rolled it out with Next. Js Middleware.

You're going to start seeing, I think, a lot more companies start to roll this out now that they've got their, rid. Now that they've got their serverless function story in place, now they're starting to offer up edge functions, which is pretty interesting. So the one, like, like, kind of like thing about them is that you rid. Some they're all a little bit different, and I don't know that if you were to code, like, a Netlify Edge function that you'd be able to easily Probably it'll probably be easy, but I don't think it would be a a straight cut over to some of the other vendors. Right? Like, you'd have to it's not just straight no JS where you can run it wherever you want. Rid. And, again, that's the sort of you give that up in exchange for being able to run this as fast as you possibly can.

Yeah. Hey. I found, just googling around just now, I found a host called Azion, a z I o n, .com, And they advertise a lot of cloud. And you know what? This actually, this landing page is pretty decent for understanding cloud functions and, like, a kind of an overview way Or edge functions where it says, you know, the cloud is not enough. Here's why the cloud is not enough. And then talks quite a bit about that and what their services provide Some use cases for it. So this is actually a really pretty nice landing page for Edge caching.

Yeah. Getting a little information in here.

Rid The entire Edge network. Oh, this is cool. They have they have, 3,300, rid. ASN is directly connected. ASN is, like an ISP. Right? Like every single host like Like, Linode would have an ASN number, and, Cloudflare would have a ASN number, and Your ISP from your that you get your Internet from will have an ASN number.

So they are connecting directly to those company, and Seems they have some decently big clients. So interesting.

Cool. Cool. Cool. Yeah. It's it seems that it. When I when I started dipping into it, it seemed like like the big boys were coming out. Like like I watched a couple of videos from IBM rid. And, like, Red Hat had some stuff on it and, like, it seems like this. Okay. Wow. This is This is getting past my little React website and into some, like, wow. This infrastructure.

You know?

Yeah. Infrastructure. It's infrastructure week.

Rid.

Cool. Yeah. Well, I think that's it for edge functions. Do you have anything else? No. No. Let's move on to some sick picks.

I'm amazed that we can do an hour on edge functions because I was like, oh, I should just be hasty or tasty, but there's a lot to talk about. There's a lot to talk about, and I think a lot of there's a lot of confusion around it When it's useful, when it's not useful, who it's even for. Like, are you building a portfolio with edge functions? Yeah. You know, those types of questions.

So yeah. Okay. This is the part of the show that we talk about sick picks. There are things that we pick that are sick. Sick as in, that we like them, not sick as in bad.

So, Wes, I have a sick pick today for a podcast that I've been finding to be pretty interesting.

And you might find this to be interesting too. This seems like it's something that's up West's alley.

It's called patented, the history of inventions, And it's they do about, like, 45 minutes on the history of specific inventions.

And I found every episode that I've listened to to be rid Extremely informed.

Like, I don't know if you've noticed this trend, but there's definitely a trend in podcast lately where, the it'll be like Wondery Wondery's podcast about Things you didn't know. And here's, like, 2 people who know nothing about the thing they're talking about talking about it. Does this Like, any functions? Whatever. Let's Do our quick Google search and then share some biased opinions and what like, I really hate that word. It's, like, all about the entertainment product aspect of it where they're at. You know? But this is I found to be very, extremely well researched, and he brings a subject on, or a guest on who who's like a subject matter expert, but not like a, You know, quote unquote influencer subject matter expert, like a literal expert, talking about various things. Like, I listen to one about the invention of the space suit, And, they did a lot of talking about not only materials, but designs and things that didn't work and constraints that they had to work in. They designed the first ones, and they went to the moon and moon dust got in the zippers so then then they round 2 they were like we have to design them without zippers in these certain spots like it was really pretty interesting There's 1 on the treadmill, the the atomic bomb, steam engines, military drones, breakfast cereal, Tanks, the the number 0, the origins of the number 0. But it's been fascinating, and it's well researched, which is always a good thing for me.

Not, sensationalized or anything like that. Just straight up info.

Wow. Awesome.

I am going to sick pick something that I sick picked, rid. I think 2, three and a half years ago, and that is precut parchment paper sheets. So I'm back to talk About pre cut parchment paper again, because we at three and a half years ago, I sick picked this, and I bought a pack of 500 for, like, 20 rid.

$25 on Amazon.

And if you don't know, parchment paper, when you put something in the oven, you're roasting some vegetables or making cookies or whatever you want, putting parchment paper down, cutting it with a little roll. It curls up. It's not perfect size.

Such a pain in the butt. So you get standard size sheets. Cookie sheets. We call them cookie sheets here in Canada. We called sheet sheet pans. Baking sheet. Yeah. Baking sheet. Rid. 12 by 16 is your standard, like, household.

It's called the half sheet.

And, man, it's the best. You just use you pull 1 out, Throw it on. It lays nice and flat and you crumple it up. And I learned they are, you could put them in the green bin here in Canada, which I did not know, which is amazing. I should look that up. I didn't know you could do that. Yeah.

Obviously, check your your local municipality.

Rid. But I was I've been throwing them in the garbage, so sorry about that, turtles.

They are so good. Just like it's rid. There's just so many things in my life that I'm like, I'm so glad I did this, and I need to keep telling people about it. So I I posted on Instagram. Everyone's like, oh my goodness. I need this. And, rid. People say, oh, I I switched to precut parchment, like, 2 years ago when you first talked about it, and It's been a game changer for me. So let me tell you, if you are still using rolls of parchment paper, finish that one up and then buy

The precut stuff on Amazon because it is the best. Yeah. Cool. Well, that's fun. Shameless plugs. Wes, do you have Anything to shamelessly plug. I should mention, by the way, I did get those parchment sheets, and they are as fantastic as you have been talking about.

That's the best. Rid. Westboss.comforward/courses.

A list of all the courses that I offer if you want to learn a thing or two about JavaScript, rid. HTML, CSS, web development, general databases, you name it. Got all kinds of really good stuff there, free and paid.

Send your friends there as well if they are learning JavaScript from scratch. Westboss.comforward/courses.

Use coupon code syntax $10 off. Sick.

Rid. I'm going to shamelessly plug level up tutorials.com.

I have a new course out on rid. Browser APIs where we dive into some interesting APIs in the browser. Now, obviously, we can't cover them all, but we do get some practical ones where you're looking at device sensors and things like that, but then also some really fancy brand new ones like the file system API.

We build in this course A in in 2 videos, we build basically something that allows you to explore your own file system in browser, Open up a file. And then in our case, we open up an SVG file. We modify that file in a text area in the browser, and we click save On a save button in the browser, and it saves your local file.

It's pretty amazing, and I was kind of shocked at just how easy and approachable all of this was. So If you wanna learn that type of thing and more, check out level up tutorials.com.

Sign up to become a pro and get access to all of that and more. Beautiful. Alright. Thanks, everybody, rid for tuning in. We'll catch you on

Friday.

Peace.

Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player Or drop a review if you like this show.

Rid.