Scaling and maintaining applications can be a pain, especially when thinking of how to build to get the user experience to a level that you are proud of. With all these shifting parts to consider, it is important to abstract parts of your applications to global reliable services. In this talk, we will discuss some of the services that Cloudflare provides, and the role they play in improving the overall developer and user experience.
Building full-stack applications on the Edge
AI Generated Video Summary
This Talk explores building full stack applications on the edge and the blurring line between front end and back end development. It discusses the benefits of using the JAMstack and APIs for scalable web development. The Talk also highlights the improvements in edge technology, such as serverless functions and efficient data storage, and the deployment of functions and durable objects on the edge network. Overall, the Talk emphasizes the importance of delivering high-quality experiences with low latency through edge computing.
1. Introduction to Building Full Stack Applications
I'm going to be talking about building full stack applications on the edge in five minutes. Let's take a step back and look at what the most basic application would look like or would entail. The line between front end and back end keeps getting blurry. Front end engineers are now building full stack applications without having to learn how to scale a database or learn some new stuff.
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.
2. Exploring JAMstack and the Edge
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.
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.
3. Improvements and Edge Technology
We're improving by moving from serverless to originless, deploying functions on the edge, better edge cashing, and being more conscious about database locations and content delivery. I'll show you a simple chat application powered by Edge technology. It uses serverless functions deployed globally, providing low latency and efficient data storage. The application stores comments in a key value store. These lights are very hot.
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.
4. Edge Network Deployment and Durable Object
I store comments and information in a kvstore. Using Cloudflare as a point of reference, the data is cached closer to where it is created. I also have functions deployed on the edge network and a durable object for real-time collaboration. The final slide is the most important one. Thank you for listening.
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.