Building full-stack applications on the Edge

Hi, everyone. Wow, thank you all so much. So yeah, I have five minutes. So we're going to get right into it. I'm going to be talking about building full stack applications on the edge in five minutes, right? OK, cool.

First thing, my name is Obina. I'm a weekend filmmaker. So if you see me with a camera around here, just ask for permission of course. I'm up to a lot of things recently, and you can find me on Twitter at Obina Speaks. This is a picture of me before my hair blew up.

So yeah, you want to build an application, but like how? Right? Before we start to talk about all the awesome things that are happening right now in the industry, let's take a step back and look at what the most basic application would look like or would entail. You would have some clients, some web server that interacts with each other. You had like some passing JSON around, or it got more complicated as you would go to adding services. Oh, there goes my phone. Yeah. I like that you all laugh, because, yeah, that's good.

So yeah, services. We have services, and all of these connect to each other. And somehow the more you keep going, the more stuff you have to learn, and the more stuff you have to add. And the basics of it all is that you have the client view, the front end, the APIs, some data access layer, some database, and some error handling and stuff. But then it gets a bit confusing. Because if you're like me, and you're just writing front end code, and now there's a bunch of stuff that I need to learn, because everyone says it's cool, and they're not going to have to learn something else, and there's a new course and there's a new tab, and there's a new tab, you're like, oh, wow. How am I going to build that startup? But the thing is, currently in this industry right now, the line between front end and back end keeps getting blurry. I had this tweet by someone that I lost. But this is actually someone's 3AM tweets. And it made me wonder, what was he doing up at 3AM? Why was he thinking about this thing? Maybe he's building a startup. I don't know. But this is what the line kind of looks like now. You have front end engineers building full stack applications, which I will show you one of my top secret applications. And then without having to learn how to scale a database or learn some new stuff that they probably will use only on a one-off projects.

And I like that this line now is some sort of a jump rope. Because we're entering into a new era of web development. And we've gone from having clearly defined roles to having people that build both front end and back end applications using APIs and services, which brings me to the point of the JAMstack.

Has anyone heard of the JAMstack? A show of hands. Yes. My people are here. That's good. If you haven't heard of it, it's about using JavaScript and APIs and relying on services to scale. So write your code. Write what you can. Deploy it. Let someone else that has a bigger server and more employees care about the scaling and all of that.

And since we've started using this new paradigm, we are moving into something else that's really exciting, the Edge. Dun-nuh-nuh-nuh. Yeah, I needed to play sound for that. But, yeah, we have the Edge, right? Which is this really cool thing that everyone keeps asking, OK, cool, I've heard about this, but what is the Edge? So Neil had to talk about it. I will also just try to explain it from the concept of Edge computing, which exactly means that data structure, I said structure, storage, is now being brought to the place where it is also generated so that you have something cool that looks like this.

So if you want to talk about the Edge or try to understand it, think of these little dots being data centers where I can deploy a serverless function or an Edge function now. And then you would have, when I deploy this, it doesn't go to a US East 1 or some region and obviously have someone in Singapore or Lagos reaching for data from a place in the US. Now, it's going to be on a global network. This is just an example. Different companies have all of these services, like Fastly, Fly.io, Deno. It's also doing the same thing. This is just Cloudflare's data. I mean, the representation of what they have as data centers.

And with these improvements comes the simple facts. Everything we do as engineers, in some way or the other, ties into delivering high-quality experiences to the customers around the world with low latency. I forgot to add this. My website is faster than yours, so yeah. And the thing I love about this industry is that we're never really doing anything new, per se.

We're just switching out some old ties for faster ones, rims that spin, and that's good. So some of the things that we've improved on is moving from serverless to originless, which is why I've explained that's deploying functions on the edge, better edge cashing, and all of those things, and getting database locations, being more conscious about where you're storing stuff, where it's being used, how you're delivering it to users, and all of those things.

I have a very quick demo, and I'm going to show you something. If you want to see what the application looks like, scan this. This is my very, very, very secret project that I'm showing you. Because I mean, you all have been amazing. So if the demo gods will allow me, I'm going to show you something very simple. So I have this application that really looks like this, if you're looking at it from your phones or laptops. This is what it looks like. It's just a simple chat. Add some comment. Leave a comment. Like for a friend. All of those things. I had some of my friends test it out already. And this application is powered with Edge technology.

So I have some serverless functions, which if you've ever written serverless, has anyone deployed serverless functions? Show of hands, please. Yes. OK. Thank you. Thank you so much. So yeah, you have serverless functions, basically just like JavaScript deployed on someone else's server. But in this case, this is deployed over data layers and data centers around the world. So if you're in London now and maybe you deployed to Cloudflare's network, for example, there's this really cool thing on workers.cloudflare.com where you can see the ping seconds that it would take for your functions to fire. So this function, last time I checked, it was like 9 milliseconds away from where we are. So that's pretty fast. And if I sent the same application to someone in Lagos, for example, they wouldn't have to fetch from a data center here in London. So that's why they're just cool. And then I have a very simple thing I'm doing here, which is where I store comments in some kvstore, which is like a key value store. And you know what they don't tell you is that these lights are very hot.

So I'm sweating. But yeah. So I put in like the, oh, thank you. Oh, that was so sweet. So yeah. You put in like the information, like the comments and stuff. I store that in a kvstore.

And the way I'm using Cloudflare as a point of reference, this doesn't mean that only people that do it. However, you have this key value store like stored over different data centers. So I'm caching where the data is created so that it can be retrieved closer to that. But it still replicates itself.

And then I also have like these functions that are deployed on the edge network as well. And if you scanned the QR code, you should be able to see the code is on GitHub. It's open source. Feel free to leave me a comment. My TypeScript is not very good. Don't judge me. But I also have this thing here called a durable object, which is literally, if you listen to Senio's talk, the real-time like collaboration bits of what he did, you would see some use of this bit of code here. And yeah, that's like a bit of the demo I wanted to show. But wait, the final slide is the most important one. Thank you so much for listening.