Deploy Your App and Data on the Edge - Greg Brimble
00:00.00
Kent
Hey everyone this is your friend kent seedods and this is the remix podcast and I am joined by Greg Brimble say hi Greg it's going great. We're just it's beautiful day out here in Utah where are you coming from Greg.
00:08.44
Greg
Hello. How's it going.
00:17.62
Greg
I'm in London where it's quite dark now but all good. It is seven thirty yeah
00:19.25
Kent
Ah, yeah, what what time is it for you. So like 6 seven thirty yeah Yeah well there you got was was it a sunny day or like 1 of those rare occasions. Yeah.
00:30.36
Greg
Ah, pretty pretty mixed here in the U k.
00:35.76
Kent
Yeah, we've got a couple of sunny days and my wife is up skiing right now and I'm just like I don't know if today's a good day. We haven't had it snow in a while. Yeah yeah, well, um, you should come out to Utah. Um, yeah.
00:39.61
Greg
I am so incredibly jealous I've been wanting to go skiing for a few years now but haven't been able to get away.
00:52.21
Greg
I'd love to. Ah.
00:54.10
Kent
Maybe maybe for remix conf. We haven't officially announced it but anybody listening can can know that remix conf is coming um in ah in may so not really ski season but but we're gonna do a fun activity in Utah anyway, so it should be a lot of fun.
01:10.37
Greg
Sounds good.
01:13.11
Kent
Ah, So anyway, um, I mean you're welcome to come now if you want to like yeah to kind of skiing when it when it's git skiing. Um, So yeah, great for those of you who. For the listeners who don't know you I think it'd be good for them to get to know you could you introduce yourself and be as personal a professional as you like.
01:31.70
Greg
Sure so I'm a software engineer working at Cliflare um, specifically on the cloudflare pages team and pretty new I only started there in August September sort of time last year so still getting up to speed with everything and but so far it's being great and. Yeah, one of the things that we recently did was um, bring remix support to cloudflare pages that's sort of how I got involved in all this sort of stuff.
01:57.28
Kent
Yeah, yeah, that's excellent I have deployed um remix to cloudflare workers and if I understand it right? Pages is like a collection of workers sort of is that a an accurate understanding or is it totally wrong.
02:12.44
Greg
So so and cloudflare workers for those that don't already know is the and serverless platform that C Cloudveflare has built on top of its big global network so we originally had a Cdn product and but had to have a bunch of machines around the world for that. And then we realized we could put them to use by letting people run their own code on it and that's what cloudflare workers is and cloudflare pages is um, a product that we built on sort of a prototype which was workers sites and that was and the ability for people to build and and deploy jamstack sites on.
02:33.38
Kent
Yeah I.
02:51.28
Greg
On this edge and serverless platform that we had the cloudflare workers so pages is a managed product so we handle doing builds for you and and deploy these static assets to our edge and we introduced. Functions earlier and last year it's in open beta at the moment and that's what remix is using and that is basically combining the power of workers and that server sorry that edge run code with the static assets that you're building as part of your pages project. So and you can run and.
03:13.82
Kent
Then.
03:28.11
Greg
And host a full stack app with with cloudflare pages.
03:29.80
Kent
I got it and um is ah with cloududflare pages is durable objects and Kv are are they included in the pages Umbrella or are they like individual products that you just integrate with each other.
03:43.80
Greg
So and the cloudflare pages functions stuff is just using Cloudflare workers so you get everything that workers has and just comes with it and so you are able to use Kv. And durable objects and other things like html rewrite or and anything else that we have there. Yeah.
04:00.10
Kent
I got it? Yeah cool and 1 1 thing that kind of blew my mind. Um, ah recently when I was learning about conflare workers in general and just like the concept was that um for a long time most of us have been. Um. Working with an origin server and then a Cdn and then our user and what cloudflare workers is and pages and all of that is putting putting something between the user and the Cdn and so um, that that is unusual like that we we don't typically run code um on that side of the cdn. Um, but we can still benefit from a lot of the the Cdn itself because you have apis to access the cdn and cache things directly in the Cdn as well, right.
04:47.10
Greg
Yeah, exactly. So um, when workers are first came around. We were originally using the service worker spec which was and the ability that browsers gave you to run codes sort of in between the. Ah, user the client and the server and so we sort of took that model and just put it on our network and then that was where workers source started and and because of that we sort of. Adopted all of the other web api spec stuff things like request and response and which I know that remix is very very fond of and so yeah, that sort of is where the model started and then we realized that you're able to actually get rid of the.
05:22.94
Kent
Yeah.
05:34.81
Greg
Origin that you have in a lot of cases where you can just deploy everything to the edge including all your static assets and your um, ah runtime code and just deliver everything straight from the edge which is just fantastic for performance and for the users who actually use your app.
05:49.55
Kent
It yeah precisely and I think this model is very similar to serverless. Um, so that serverless architecture that people often think about, but the the big distinction that people miss or I missed at the start. Was that serverless you have to choose a region and technically cloudflare you also choose a region. The region is just earth and so it's it's deployed in ah I think it's over 250 regions throughout the world. Um, and I was looking at the stats just http://yesterdaycloudflare.com/network. And you've got 95% of the internet connected world within fifty milliseconds of a cloudflare server like what.
06:34.70
Greg
Yeah, mental and my follow up to that is I think it's twenty twenty milliseconds with it for 80% of users. It's completely ridiculous. The speed. Um, yeah, the the opportunities that sort of affords you and lets you just completely rearchitect.
06:41.36
Kent
Yeah, yeah, Wow. Yeah.
06:52.21
Greg
How you're building Apps you no longer need to and sort of consider long-term and long-term and slow server-side stuff if you're able to run it so close to your users and you can just build completely different. Arc.
07:10.30
Kent
I Yeah precisely like the performance characteristics completely change I often will tell people the story of like how we got to where we are right now with our current architecture and I'll tell you about that here in just one second how you pos it.
07:10.19
Greg
Differently architected apps.
07:27.76
Kent
And so what I often will say is like we used to just have an origin server and the user hits that directly and that would take a long time so you'd have like this white screen and so we're like hey let's put things on a Cdn to make it faster and we'll just give the user a loading spinner. So at least we're like giving them something useful um or like marginally more useful I guess than a ah white screen with the favocon that's loading. Um, but because of the modern infrastructure now the performance characteristics just completely change. And so we no longer need to worry about users seeing a white screen for multiple seconds and instead they're seeing a white screen for a hundred milliseconds maybe or or less and so when when that's how long they're looking at that white screen. Do you really need. Flash a loading spinner at that point. No no, you totally don't and so because of the modern infrastructure enabling this you can change the way that you build apps and now you can eliminate a bunch of things that are like not great for user experience.
08:36.50
Greg
Definitely um, and remix is is one of the frameworks that we're seeing sort of take advantage of having um these edge platforms that you can deploy to. We've seen it and with a couple others like when we launched functions we saw feltkit and now seeing and quick this new framework coming into play. And they're all sort of reimagining and how you're building apps now that we have this different paradigm this different way that you can deploy and one of the biggest things that we serve and trying to figure out really is data at the edge. It's it's still, um, quite.
09:07.52
Kent
I yeah.
09:11.69
Greg
Complicated and and can be quite challenging to think about it in different ways. So obviously the sort of traditional way would be. You'd have some database cluster somewhere and probably alongside your origin and they're pretty quick to speak to each other. But then you put a Cdn in front and you have to load things from the client and it all gets quite a lot of latency in there.
09:27.48
Kent
I yeah.
09:29.47
Greg
But now our edge platforms have and data built into them So you're able to put and that just alongside your serverless code and it's lightning fast reads and writes for that. But you maybe need to sort of structure your data models in a slightly different way to um, allow for this new sort of paradigm. So like.
09:46.38
Kent
And.
09:48.53
Greg
Our key value data store is and the and most mature data product that we have and I think that came out maybe I don't 2018 sort a time and um, that's great, but it's key value. So It's not relational in in and. Like tables and columns and all this sort of stuff that people are maybe most useful most used to and working with so it just requires a little bit of and education and rethinking about how you can change the structure of your data to fit into this this new paradigm.
10:19.91
Kent
So yeah, yeah, and I think that um, not only can people adapt but also the technology will adapt as well to to the needs of people and um with with serverless we already got used to the idea that my application code runs separate from. My database these are going to run in 2 completely different server services because serverless I like I don't have a long running process and so we need to have a long running process somewhere where somebody does that we connect to in some way and even like from my app connecting to the the server. I can't create a long runningnning process there either and so yeah, learning to adapt to that sort of thing and there are other um companies as well like fly io allows you to have read replicas of your postgres database all over the world and. And so yeah, it's it's a really exciting time. But I think we may have glazed over the importance of having your data at the edge as well. Um, where like it's awesome that I can respond to the user in twenty milliseconds or something but um. If I have to spend ah you know three hundred milliseconds going across the world to go get the user's data then I'm I'm a little bit better I'm certainly a little bit better but not a whole lot better. Um that when when that's the situation. So having your data on the edge is pretty critical as well.
11:50.85
Greg
Definitely and it um it changes how the the failure points of the traditional ones. So if you had a single database cluster and back with your origin and but that failed then you just went completely hard down but now. Because we have this sort of Edge Network we've had to redesign how this data is being and located and and stored so and it's accessible from every single pop that we have around the world. Ah, every single place of presence or pointed presence. Whatever that stands for and so um.
12:19.70
Kent
And.
12:24.72
Greg
You you end up with like really immediate rights and sorry reads from ah pretty much anywhere for the data that you're fetching.
12:32.16
Kent
It Yep exactly And that's what most apps are doing most of the time is is reads. So.
12:39.61
Greg
Definitely like if you've got some blog or something and you're hosting your and content in say Kv Almost always what you're doing is you're reading that data very rarely. Do you actually update it. So Kv is a perfect example of somewhere and of of storing. Blog content in in in something like habi.
12:57.42
Kent
Yeah, precisely. Yeah, um, and the other interesting thing that ah kind of feeds into this as well that people often talk about well hey regions are a feature like we had this this Twitter thread the other day about this like. Regions are a feature of of of web infrastructure because of data laws and like where you store your data like you know some countries will not allow you to store their users' data or citizens of their I don't know how the laws work it's stupid. But um, the the fact is like that. You need to have local data storage for certain countries and cloudfre workers or cloudflare. Um, these data solutions already have support for lots of that like regional data storage as well. Can you talk about that a bit and.
13:50.61
Greg
Yeah, sure so and durable objects is the the one that you're going for there and this is our ah and really fast Singleton isolates at it's our um.
14:10.15
Kent
I can cut this out So take the time you need.
14:12.40
Greg
Yes, thank you um. Ah, durable objects are are really fast database primitives that let you and read write data with consistency which is something that our Kv storage was lacking and additionally we let you lock them to a specific jurisdiction. So right now we have support for the Eu. Which is exactly what you're talking about so gdpr are data protection regulations in the eu and some of that mandates that maybe the data for a european citizen their personal information or whatever needs to be kept inside that region and it's a growing trend. We're seeing and different countries talking about adopting. Similar sorts of legislation for and for their various regions. So and we're definitely going to be adding support for additional and jurisdictions for durable objects. But and this sort of edge data model where you're able to define rules about how. Ah, where where it's allowed to be stored and executed is great for and all of your compliance that you need as a business but it also means that we're able to give as much performance as we possibly can for the users that are accessing it because it's still available anywhere within that.
15:35.86
Kent
That yeah precisely and so like I just remember in that Twitter conversation. There were people bringing this up as like a ah big problem with data at the edge as if it was like.
15:35.98
Greg
And your region or whatever.
15:51.67
Kent
An unsolved problem and so I wanted to make sure that we address that nope this is. We've thought about this like this is in fact, the things are better when we're talking about basically as far as the developers concern. It's Regionless. You don't think about the regions but you can configure it such that the region. Ah, it is taken into account. So um, yeah, so data at the edge. Um the app renders at the edge your app now renders within 20 to 150 milliseconds that leads to a pretty sweet. Ah, user experience like go go to almost any website and you're going at least a second and a half before you you see anything respond on the server. Um, yeah, if there's some pretty awesome performance characteristics. Um, do you have any other. Like any other things that you wanted to call it specifically about caudflare pages and and the data story. There.
16:54.33
Greg
And yeah, well, we're still sort of and like the serverless and side to cloudflare pages is still being worked on like functions is just in open Beta So We are still working on and. Things like automatically deploying your durable objects right? Now. It's a little bit manual whilst we're sort of figuring out and all the connectivity stuff but and we're going to improve on the sort of developer experience for all of the and data things for sure. Um, but we have a lot of other things that help developers sort of build. These apps quickly and and in performant ways. So and we have integrations with github and gitlab that let you just sort of connect up a repo and then deploy um things like preview deployments and rollbacks that let you test out changes before they're going live to users and we now have a. Ah, local development cli so that lets you test and work things out locally before you push it up. So Yeah I think pages is a really exciting like I work on the team. So I'm biased. But I really enjoy it and I think with support for.
17:59.54
Kent
Jo.
18:06.53
Greg
Remix and and other Frameworks it's becoming a really promising place to deploy your app.
18:11.26
Kent
So yeah, that's Awesome. So What would you say are some of the constraints or limitations I'm thinking of the fact that it's not a full node environment and so you may not have access to some of the things that you typically do and um. So you need to do things ah differently than people may be used to But what are some of the constraints and and um, unique or like what makes cloudflare workers and pages unique in that way.
18:42.87
Greg
So you're right that it's constrained in that it's not a full node environment and so perhaps people aren't don't have the tools and the libraries that they sort of just expect to work. Perhaps there's a little bit of work that they have to do to make that happen whether that's polyfilling in. Ah, node built-ins which is a possibility and or whether it's um, rewriting things to just use fetch rather than like Xml Http request or whatever. Um, but the the benefit that you get from. It is just the ridiculously fast and. Ah, ah, runtimes so and we don't have cold starts for workers anymore. They're all able to execute within the time it takes to do your like tls handshake. It's um, history. It's it's just it's ridiculous. So you just don't need to. Um.
19:20.80
Kent
Yeah in.
19:29.86
Kent
What.
19:38.42
Greg
Worry about performance in the same way and a few of the things that we're sort of looking at is and building in cache support for remix so that even once you've done your page rendering and we can make it even faster by then putting it into the cache and serving it from there rather than have to do the re-rendering.
19:55.32
Kent
Yeah, yeah.
19:55.82
Greg
Even though, that's still quick. So and there's performance improvements that we will continue to see and I think yeah workers is just a great platform to sort of get started with if you've ever written any Javascript. It's really easy because it's already just using the sort of same um web. Spec platform that you're used to.
20:16.11
Kent
It? Yeah yeah, it's it's brilliant. Actually I love that the service worker was the original design decision there. Um, let's talk a little bit about price because I've had a number of people talk to me about like oh yeah, well I mean. If you're Amazon and have billions of dollars then sure you can build your site like this but I'm I'm not so I'm going to stick with my serverless thing or something what is the ah like can you talk a little bit about the cost of something like cloudflare pages right.
20:47.91
Greg
Sure So um, pages just static stuff I think we have unlimited requests and unlimited Bandwidth just because we're cloudflare we Cdn That's like what we do we we can deliver content really easily. It's pretty much no skin of our back. So and I think we just charge for and.
20:57.57
Kent
You know? yeah.
21:06.16
Greg
Number of builds and you get pretty generous free tier for that. But when you start to introduce this server-side stuff and we do start to charge for these serverless invocations. So I think workers gives you 100000 requests per day for free and then. Beyond that I think it's ¢15 per million requests. So it's like I don't know who's who's been saying they've got scaling problems but um, it's a very very affordable way to deploy your app. Certainly.
21:29.49
Kent
Um.
21:38.60
Kent
Man Amazon's going to start looking at this and be like whoo. We could save a little bit of money that is nuts holy like most of the time like you get a kind of generous free tier and then once you start paying. It's like boom this huge bill.
21:54.37
Greg
Um, yeah.
21:57.62
Kent
Um I have that problem with cloudinary right now actually is cloudinary is great I but I desperately wish that I had used cloudflare images instead because um, yeah, once you start paying it is extremely expensive and and the reason actually this is also relevant to. Cloudflare's images um is they charge for egress. Um, and I have fifty million or five hundred million or five hundred thousand half a million ah page views ah a month and so it's ah, a lot of image requests. Um, even though apparently it's supposed to be on their Cdn and Cdns are supposed to be cheap or whatever. Apparently that is not enough for them. They need to just take a lot of my money. So um, actually ah, probably be good to define egress and why cloudflare doesn't. Charge for that. Um, for cloud for images. Can you you speak to that at all because like that images are actually a really significant part of building web apps. So I think it's pretty relevant here too.
22:59.63
Greg
Yeah, um, so I can't speak officially on the company or anything like that. But um, certainly they have been making and ah they've been trying to call out companies which are charging for egress and and like you say it's It's one of the biggest. Unexpected costs that developers see and where they deploy their app and then and it all is going well until you hit the front page of Hacker news and then all of a sudden you have all of these requests and they're consuming that Bandwidth cap that you've got on your account or whatever it is and but.
23:19.34
Kent
And.
23:33.51
Kent
Yeah.
23:37.32
Greg
Because it was sort of the first thing that cloudflare really tried to do as a company I think build out this massive Cdn. It's just something that we've gotten really good at and and I think we have relationships with like internet companies around the world and all the sort of stuff that let us do it really affordably and we just don't think that that should be the um. Point at which we're we're charging people. It should be for the work that we do and and for that it's workers but because it's so performant for us and we're able to charge little and and so you will see and some charges if you do get just a ridiculous number of requests and things. But.
23:59.32
Kent
No I.
24:14.67
Greg
It's ah, really very affordable and something like images and we do have a couple of image products. We have image resizing and cloudflare images and I happen to have worked on both a little bit before as well. So can talk a little bit more about that if you like but and we start to see some people even roll their own.
24:27.85
Kent
Yeah.
24:33.81
Greg
Ah, image ah features inside like with wasm so and with coll collaboratra workers. You're able to deploy a wasm binary alongside your worker and call that so we've seen people generating images with like rust or something like that something really high-performant.
24:48.16
Kent
Oh my God Yeah oh my goodness like what a world we live in and know the the it's interesting.
24:51.00
Greg
And then use that to generate like social images for their blog or whatever. So yeah, it's very very cool. It's crazy.
25:02.80
Kent
I was you know we were probably both around when wasm was starting to become a thing that people were talking about and and when it became standardized and I remember some people were like Javascript's dead go for wasm like writing in any language that's not Javascript and I was like dad I'll never happen. Um, like. for for uis anyway like yeah I don't know maybe some people will make that work. But what I didn't expect was that wasm was going to be a huge thing for the backend like this. Um and and there are some people using it for frontend too. I think figma did some rest thing for their frontend and. So. There's absolutely situations where it's useful in the ui um, or in the browser. But yeah, I'm really blown away by the cool things you can do with wasm on platforms like cloud for workers. It's just it's really really cool.
25:52.40
Greg
Yeah I think um, the sort of reason it maybe didn't take off quite so much like I don't know like I was pretty I was pretty excited with the whole wasm stuff and I did think it was gonna be a big thing. Um, but. Ah, we've only seen it in limited cases in in frontend like you say like like figmas the the go to example and I think they have enough complexity and enough need for that performance that it's worth the sort of overhead glue that they need and to connect up into Javascript. So.
26:10.90
Kent
And.
26:25.00
Greg
There is a little bit of overhead there where you have to sort of make calls from your javascript to your wasm. Um, and you see that in workers. So It's not you don't get it just immediately and there is a little piece. Ah a price to pay there but and for something that is really high performance and like. Dealing with massive arrays such as images. It's something that's worth it and rather than implementing it row in script Exactly yeah.
26:47.76
Kent
Totally well and especially when you can cache the result as well, right? and so it's like it would be impossible to prebuild all of these images at every resolution that you could possibly imagine but it's pretty darn fast. Um, just maybe not fast enough for every request and so we can you know generate it when it's first requested cache it and now it's like lightning fast every time. Um, yeah, yeah, precisely cool. So this has been really enlightening Greg I I really think that this is the future of building websites where you know.
27:10.75
Greg
Yeah spot on.
27:23.69
Kent
Deploy your app and your data to the edge and you can get some really awesome performance characteristics and when you get that then you can throw away all of the extra stuff you were doing on your own to make up for how slow your app was before that just has awesome implications. So I'm super excited about this What would you say is 1 thing that people could do to make their user experience better. Oh no.
27:45.41
Greg
You kind of stole my line there to be honest I think trying try deploying to the edge is probably and what I'd say So if you've got a remix app already like just change the the the deployment target pretty easy to do and with that sort of agnostic platform that you've got. But if you haven't just yeah, sign up for pages or workers and give it a go I think you'll be surprised at how much of that and sort of legacy architecture that you've already got you can do away with and with this sort of New Edge architecture stuff.
28:20.63
Kent
I absolutely and like it blows my mind. How cheap it is like that's hilarious ah pennies pennies for million requests like that. What like that? awesome.
28:24.84
Greg
Ah.
28:32.98
Greg
Yep, it's um, pretty powerful stuff. So no worries about getting and slashed audit or whatever.
28:37.45
Kent
Yeah, yeah, yeah, exactly awesome hey Greg thank you so much. What is the best place or best way for people to keep up with what you're doing so.
28:47.50
Greg
I'm pretty active in the remix and discord in the cliflare channel and in clyflare developers Discord and I'm at Greg Brimble on Twitter.
28:50.43
Kent
Thank you.
28:56.32
Kent
This awesome hey this is super ah, interesting informative I I'm wrapping it up but it occurred to me like I I didn't ask was there anything else. We didn't talk about that. You were like oh I Really want to talk about this on the remix podcast.
29:09.37
Greg
Ah, you've pretty much got it for episode one? yeah.
29:12.77
Kent
All right doing very good. We'll have you on again in the future Then thank you so much and we'll talk to everybody in the future bye.