React Advanced

React Advanced Conference 2021

Living on the Edge

Sunil Pai

React Advanced Conference 2022

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 VEdge in five minutes. Right? Okay, 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 like blew up. So yeah. So yeah, you want to build an application but like how, right? Before we start to like talk about all the awesome things that are happening right now in the industry, let's take a step back and look at what like the most basic application would look like or would entail. You would have some clients, you know, some web server that like interact with each other. You had like some, you know, passing Jason around or it got more complicated as you would go to like 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 like all of these like connect to each other and somehow like the more you keep going, the more stuff like you have to learn and the more stuff like you have to add. And the basics of it all is that you have, you know, clients, the client view, the front end, the API, some data access layer, some database and some like error handling and stuff, right? But then it gets a bit confusing because if you're like me and you just like writing front end code and now there's like a bunch of stuff that I need to learn because everyone says it's cool and then now I 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, right? But the thing is, the line 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 3 a.m. tweet and it made me wonder what was he doing up at 3 a.m. and 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 like front end engineers like building full stack applications which I will show you one of my top secret applications and then without having to learn how to, you know, scale a database or learn like some new stuff that they probably won't use only on a one-off project. 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 like having clearly defined roles to having people that build both front end and like both back end applications using APIs and services which brings me to the point of like the JAMstack. Has anyone heard of the JAMstack? Show of hands. Yes. My people are here. That's good. If you haven't heard of it, it's about using JavaScript and like APIs and relying on services to kind of scale. So you know, write your code, write what you can, deploy it, let someone else that has a bigger server and more employees like care about the scaling and all of that. And since we've started like using this new paradigm, we are moving into something else that's really like exciting. The edge. Yeah. I needed to play sound for that. But yeah, we have the edge, right? Which is like this really cool thing that everyone keeps asking, okay, cool. I've heard about this, but like what is the edge? So Neil had to talk about it. I will also just try to like explain it from the concept of like edge computing which exactly means that data structure, I said structure, storage is now being like 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 like this little dot being like data centers where like I can deploy like a serverless function or an edge function now and then you would have, when I deploy this, it doesn't go to like a US East one or like some region and obviously have someone in like Singapore or like Lagos reaching for data from like a place in the US. Now it's going to be on a global network. This is just an example. Different companies have like all of these services like Fastly, Fly.io, Dino is also doing the same thing. This is just Cloudflare's data, I mean the representation of what they have as data centers. And with this improvement comes the simple fact. Everything we do as engineers in some way or the other ties into delivering high quality experiences to the customers like around the world, right? With low latency. I forgot to add this but you know 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 like switching out some old tires for like faster ones, you know, rims that spin, you know, and that's good. So some of the things that we've improved on is moving from something like origin, moving from serverless to like originless which is what I've explained as like deploying functions on the edge, better edge caching and like all of those things and getting like database locations, being more conscious about like where you're storing stuff, where it's being used, how you're delivering it to users and all of those things, right? I have a very quick demo and I'm going to show you something. If you want to like see what the application looks like, scan this. This is my very, very, very secret project that I'm showing you. So yeah, 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 like a simple chat, you know, 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 like with edge technology. So I have like some serverless functions which if you've ever written serverless, wait, has anyone deployed like serverless functions? Show of hands, please. Yes, okay. Thank you. Thank you so much. So yeah, you have like serverless functions basically just like JavaScript deployed on like someone else's server. But in this case, this is deployed over like data layers and data centers like 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 like the ping seconds that it would take for your functions to fire. So this function now, last time I checked, it was like nine milliseconds away from where we are. So that's pretty fast. And if someone, if I sent the same application to someone in Lagos, for example, they would get it at a different, they wouldn't have to like fetch from like data center here in London. So like that's why the edge is cool. And then I have like a very simple thing I'm doing here, which is where I store like comments in like some KV store, 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, I put in like the, oh, thank you. Oh, you're so sweet. So yeah, you put in like the information, like the comments and stuff, I store that in a KV store and the way I'm using Cloudflare as a point of reference, this doesn't mean that the only people that do it, however, like you have like this key value store, like stored over different data centers. So I'm caching where it's, 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 deployed on the edge network as well. And if you scanned the QR code, you should be able to see like 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 Sunil'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 and may the force be with you.


#cloudflare