 Okay, all right, so I'm Sebastian and I'm going to be talking about a little thing called Server push HTTP to server push anybody or used it I'm like super excited about it and I have been for many many years So that's the problem. Nobody's using it Yes, so I've managed to you know start using it but it took me two years of building a CDN and A lot of other things along the way to get to this point and Now you're starting to find out that people are like should we still have it because there's not a lot of adoption And it's like a really hard thing to use, but there's good news actually any node developers here Okay, so Node.js has just shipped with a stable version of HTTP to and it includes server push support It was sort of experimental for like half a year or something in like eight and nine and Pretty much stable API. It'll it'll probably go like LTS in a couple of months like it's targeted for October we'll see So you can play with this, but that still leaves like front-end developers like myself That sort of a struggle of how do you use this to bundle my apps or what do I do this on the front-end site? Because I'm not using node on the front-end site. I'm just writing code that runs in a browser So what's this node stuff about and I'll show you how I think we can use this so The main problem of front-end developer performance is that resources Just take forever to load like you've got a lot of resources and they keep getting bigger and bigger And it's more and more files and that's just going to continue happening and When you're in the real world, you have to think old round trip time RTT. I'll just abbreviated in the rest of the slides So round trip time is solved fundamentally by CDNs, right? That's just the brute force you put your server everywhere in the world close to everybody in the world And it's fantastic. It just magically solves it where that magic is an extremely expensive multi-billion-dollar operation. Okay, cool So it happens that that's pretty much free now for everyone. Thanks to companies like Cloudflare and everyone else But you know, maybe there's other ways to solve that as well like using software and algorithms So in a traditional website, you know, you've got like your product page and it loads like a product image And you know, you've got to throw your styles and your JavaScript and Obviously a favicon fav icon still don't know how to pronounce that in like 20 years So what happens is the browser does something like this. It's like this long arduous journey So sort of symbolized Like a round trip like no, sorry a trip as a single What's this called again in English? hourglass nice Yeah, so pretend it takes an hour to reach your server because you don't have a CDN And you live on like what is that Mars then that's 45 minutes So so you're round trip time you're doing like one two three four, you know boing boing boing boing I Then at work level something like this happens. I know like the Have like this awesome TLS 1.3, which might reduce this a little bit and Kavya the round trip time for DNS might be totally different than the one to your web server because it's doing like a totally separate lookup Unless you happen to be using a let's say a CDN that has DNS but still So you're doing a bunch of round trips To initially set up your connection to the web server then your browser goes and get this product page for me Okay, so it has to send that hence another round trip or like another trip The browser that's our server then returns headers and can start pushing data Okay, so now you've now the browser has received the data for the entire html page then it figures out in that html There's a reference to photos. There's a reference to styles. There's a reference to apps you know CSS JavaScript and other kinds of stuff and Each time it has to make another request. So again has to wait for that response and in the traditional sense It'll start setting up all these parallel connections, which is this weird hack to sort of get around the head of line blocking Which is like, you know, you want to send a request, but you want to actually send like 10 requests So you the browser sets up like a reasonable amount of connections, which is sort of six or eight or whatever It's really expensive because each time it sets up a new connection It has to do at least part of that setup the original setup at least part of that has to repeat it The server has to maintain more connections So it's really expensive in terms of memory and CPU on the server side on the client side your battery drains Everybody's unhappy I mean, I am unhappy as a web developer. So my solution is server push the server to just tell the client This is all the stuff you need go away That works something like this HTTP 2 has a thing called push promise, which is like like a response But more like a request actually because the server sort of sends this thing saying like hey, you're gonna request this thing Trust me. I promise you So it pushes a promise for a future request So the first time you set up a connection just like the olden days You get your product page and then the server just says like oh before you get this product thing I'm just gonna tell you that you'll also want this this this and this and then it's gonna return to product page And then the client starts parsing this and it's like happy happy and meanwhile the browser just continues pushing this data Pushes the headers to the response to the request that was promised by the push, right good Yeah, so the server just keeps pushing all this data until the very end and There is never a you know additional roundtrip Which is the optimal case all roundtrip times eliminated who needs a CDN anymore, right? I mean this thing still could use CDN. So whatever. It's just still some need But you know, it's largely gone which is cool and this is just using Actually, this is the point where I should mention like some algorithm that has some name and it's some computer science you think but I don't care What happens is that if you have low latency you can ramp up the speed at which you push all this data Whereas if you have a long latency like low like really strong delays each time you sort of the browser sends a bunch of data It'll sort of back off and go like, okay. Okay. Have you received it? Are you okay, buddy? Right? It'll go like are you okay browser? Is this too much? Or actually it's like waiting for the entire network to catch up and acknowledge that all the data has been delivered before it starts Pushing more data otherwise packets just get dropped It's sending too much at some point somebody has to give and it'll just drop packets And then you'll never know that you have to extend them again. It'll take a long time So if you have a little latency you still get some benefit from like ramping up faster but eventually you get sort of a High bandwidth on the single connection and the idea with HB2 is actually you maintain that single connection for as long as you Can because you only have one so it's much cheaper and maintaining like six connections Right where you're trying to like cut those connections back to free resources on the server, right? But HB2 you're trying to maintain that connection for as long as you can and in fact with HB2 Just cool stuff you can send like different domains on the same connection and all that stuff So so there's there's there's still a lot of benefit to only doing this once even if it's expensive You just do this once and everything else you just push and you eliminate all the round trips So how do I want to do this? Well, I have a thing called push manifest So this is not like an official thing. This is just like a sebb thing. There's something I came up with randomly, but it works pretty well So this is what it looks like. It's really simple But I think it works pretty well. So here this is like a HTTP method So if you get index HTML you push app.js If you get app.js you push Live.js, etc, etc, etc So you could expand on this and say if you get index HTML make this an array and say, oh, you know Also push my favicon or push my styles CSS or whatever, right? So you can expand on that and you can see it's recursive. So You know whatever engine parses this would figure out that when I'm getting index HTML I should push app.js as well as live.js obviously because it's gonna be the next logical thing So the goal is something that you know sort of a pearl thing make easy things easy and hard things possible I do that by making making the whole thing based on JSON, which everything knows how to use Make it declarative. So it's not like running code. It's just saying what should happen and it is neutral for any tools or servers to implement this and I've sort of put this up on GitLab because I'm a hipster and I was using GitLab two years ago before Microsoft acquired GitHub So this is GitLab for those not yet familiar you will soon find out So I will do a little demo of this. I just didn't prepare a whole more slides than that now Mostly the same thing. So it's really simple You can you can use like wildcards and just go like oh just push all my CSS and CSS This is like the ultimate footgun by the way for performance Like if you have like your node modules folder on your thing You can imagine the horrors that await the browser when it receives like 10,000 JS files glorious So yeah, there's a bunch of stuff here But like so you can do things like you can you can put URLs in there You can put like you can capture things from the original request URL and then sort of like so This is this is sort of where it gets the declarativeness, right? So you can you can sort of take parts of the URL and then have a simple rule that handles infinite complexity So they can be nested you can imagine that you you probably might not even want to do all this Tricky wildcards and pattern matching stuff. You might just want to just generate this with a tool I don't have such a tool, but I would be very interested in working on it When I get around to it, you know, there's other stuff you can sort of make it more verbose You can assign priorities Which is gonna maybe tell the server which order to send these things in so maybe like send the CSS files Before you send the giant video file, right? So et cetera et cetera. So you can imagine what this does, I hope and Do sort of demonstrate it a little bit further. Let me show you a little demo. So here's actually Here's the website that I've been working on for my little CDN thing So the content is a little outdated, but the technology is cool. So what it does is it's got a little Login page and it loads pretty quick. You see but it's actually loads from Any number of servers. I don't even know which last month I was saying this comes from a server in my house Now I don't know anymore because it's coming from my CDN with multiple pops So that's pretty cool But it still loads pretty fast, right? And the reason for that is that it's all being pushed So there's only a single request happening. How do I prove that? Well, I can clone the repository and run it Locally and you'll see that if I run server like if I run deploy it'll upload it to my CDN And if I just run a server, is it like a local copy of the CDN that just runs locally? It's like having GitHub pages or Netlify locally on your computer and it's just a static site and It looks something like this So I have my little manifest here So this other stuff is like a server configuration thing But the manifest part is this array that when it's highlighted Can you sort of make out that contrast on the projector as being front flip? No Anyway, so this manifest thing here It's got two rules one is an index HTML and one is app HTML the Two entry points because there's like a static home page and then there's like a dashboard And so the login page and everything below it is going to be app HTML It's like a single page app and your index HTML is just a very simple like one page You know, this is the this is the project kind of thing So there's no JavaScript on the home page, but there's a lot of JavaScript on the dashboard And for instance if we look at app HTML like that's all it is Okay, so it loads app.js app CSS favicon and app.js itself This is not transpiled right. This is just a bunch of static imports and that works in like every browser. I care about So you've got your you know components and they've all gotten JavaScript files and then they will call other JavaScript files etc all the way down and The way that the manifest does that is it just had a couple of push rules has three rules here So it'll push styles anything in the app fonts and configuration See this file names, okay And then it'll push all files like star star slash star is like a like a wild card like crazy glob Like just everything from the fonts images and scripts directories And then it just makes sure that it doesn't push any source maps Because that just like takes a bandwidth that you don't need in production, right? But I like to have them for development. So when I open up the dev tools, it'll load them, you know independently I don't care about performance at that point And if I run this locally so npm run Server, okay So this is spinning up like node.js and static site server like you're all familiar with the various static site servers So this one spins up this public directory with my assets that we just walked through on Like a local host I'm not left-handed. I can't do this Okay, and when we open this Page loads Okay, so we got everything here load it pretty instantly because it's a really simple page and here It's easier to look at it as like a Blobotex like that. So what happened is that we got one request our get slash like this is the home page, right? and then everything else was just pushed simply pushed and the server just sort of managed to not make a single additional request because That's memory that sequence that I said like first it'll just request and then before it returns the html It'll just send all these push promises. So then it returns the body to the request but Well, while the browser is parsing that it already knows not to request all these other things because it's expecting them to be sent automatically and Meanwhile, the server just pushing all that stuff automatically behind the scenes So it's sort of maximizing, you know all your CPU cores and your bandwidth and all that cool stuff And this is like super optimized without doing anything. There's no transpilation required. There's no crazy configurations It's like a wild card in a in a manifest, right? So that's pretty sweet. What happens if we click on like that inner page, right? We had like this is your index HTML What about that app HTML? That was a little bit more complex So when we load that or it instantly loads and there's like a little bit more going on here There's a lot of JavaScript files here. So let's zoom out further camera man And there's a lot more files That was the previous stuff that was being sent the one of the block that's highlighted and then here We've got this inner page to sign up link that I clicked on Right. So we've got a single request and then everything else is push push push push push push push push So Everything is push. So not a single round trip. Goodbye CDNs. Goodbye So Yeah, it works you can use server to HP to serve a push now Works pretty well. So, I mean, there's a bunch of questions around this like what if you refresh the page? It's gonna push all that stuff again. Yeah, there's other things. I'll do another talk about that once I implement a couple more things This is potentially much easier and much better performance than anything people do today with webpack or browser fire or Whatever you want to use broccoli or something Yeah, so this works, I don't know this was sort of my presentation. I don't really have a ending punchline thing, you know Okay, thank you. Any Any questions at all or anything? Oh, so actually, you know one of the things that I Think are important. Is that this format itself? It's not really like an RFC, but it's still just a simple spec. It's not something that's Proprietary it is is nothing tying it to the implementation that I did mine is just one implementation thereof So you could imagine something like so for instance the the workers that we talked about that cloudflare web web workers Like the edge servers worker type of cool stuff Or if you think of like like fastly another CDN that has this varnish configuration language thing So in either of those cases this cloudflare support server push Anyone know yeah, yeah, yeah cool cool So so when you have a CDN that supports server push It's still really hard to configure that because they use some you know Some some some some some some some API you have to learn that so it'd be nice if there was a tool where you could Sort of write your rules and a simple JSON declarative thing and it just generates the code that you Push or wherever or to your you know Object storage bucket, let's say To any of these things that that's up that actually host at the end You know at the at the at the edge, right? So it would be cool if you could have these rules in a neutral thing and then have sort of translators That's what I feel would be cool. So you Actually, I mean I should spend a couple of days doing that like just for different platforms Just implement different translators because right now it's like yeah My platform is the only one that supports it because I yeah, and it looks kind of like stupid So I think it would be a cool I mean because I still don't know what the point of all the service workers at the edge thing is everyone supports it now And it's really like cool techno technologically But I don't see the killer app and I think this could be something really, you know Practical and valuable and and relatively easy to do Because you could generate the manifest from like a webpack kind of tool That's already part of your code like a plug-in could you know like you have these analysis plugins? And you have plugins that do like like a like what's that old browser manifest cash thing? What's it called in you? Yeah, so like there's like some cash manifesting in the browser right cash manifest. Is that the name? App cash. Thank you. Thank you. Yes So we have these tools that already generate stuff like that And then you could just generate something like this and I have this then translate into like any edge platform For instance, and it would be like nice decoupling of all of everyone else's implementations So that's sort of what I hope to achieve with this. I guess, yeah, okay. Any other question? Yeah Yeah, so I Sort of been using it on a couple of different sites I think last year I tried it on the JS con of Asia website also that might I'm not sure that's still running on that But in the repository you might find it you might still find like a configuration file But actually like so the one I just showed is is a is you know like everything on the project is open source So you could find this at comments host slash website. I mean check out the manifest thing Oh, there might be links to it there Or maybe not okay So check out website so get lab comm slash comments host slash website and that loads in a bit You'll find like a config file here. That's just like a sample This is just a very very simple So there's like one folder with the source code in it and it's not really transpiled It's just being copied into a public folder and then all you find here is a manifest That contains these simple rules and so you can just play with that tweak it a bit see what works see what doesn't Yeah, take a look. Let me know. Let me know please. Okay. Any more question? Okay, we're gonna wrap it up. Oh Joey I Made I convinced them to pay me No, no, no, nothing of this is true to clarify so last month I had these servers and I was like telling people I'm really poor I can't afford this anymore I only had one and then a bunch of people step forward and graciously funded You know the acquisition of you know further hardware of which I have a few here to deliver to some of the generous donors in the audience and a few of them have already been shipped out and I've spent a lot of time just like sort of automating the configuration and you know, I Remapped the DNS stuff a bunch times. I went over to KL to set it up manually You know, I've had a pretty good doing all this, but I don't pay anyone to do anything. Okay. I can't Yeah, so my service is built on a web server that implements this So but the service is really just like like a static site hosting thing That just happens to use the static site service that I wrote which supports the spec that I did on H2P2 That I implemented last year Goes all the way down. Yeah Okay, yeah, that's that's it. I need any more pressing point Time for one or or not. No, we have no more time. Everybody wants to go home. Cool. All right. Thank you again