Full Stack for Front-Ends Part 2 http/2

[00:00:00]
>> Jem Young: And we implemented a web socket and let's talk about http/2 for a minute. Http/2 is the new standard. If you look in the browser you'll see protocol, it's running http/1.1, which is just a way that all the browser renders got together and all the standard body said this is the way we're gonna make an HTTP request.

[00:00:17] The problem is, HTTP, it's kind of old. It's been around for a long, long time, so they came up with HTTP2. Well actually, first Google came up with a protocol called SPDY, S-P-D-Y. That was like, hey, this is secure, it's fast, it compresses things, all this good jazz.

[00:00:33] But people were like, I don't know about that Google. We don't really trust you and your weird, one off, protocol. But they rolled the best parts of SPDY into HTTP2. And that's now the new standard for the internet. Not a lot of people have implemented it yet, but we're gonna do it today because we wanna run the next gen.

[00:00:49] So by the end of this you'll have a website running running a web socket, running http/2, you got your caching, you got your headers, that's as modern as I can get for you, sort of a service worker which I excluded for this class cuz it's a little bit more advanced.

[00:01:02] So talk http/2. How do we set it up? Nginx, super super easy. In our listen block, we just add http/2 into it. Did it again.
>> Jem Young: There we go. So if you wanna make your connection run http/2, you just throw that in there. It couldn't get any easier in that, it's beautiful.

[00:01:30] [LAUGH] And how simple it is. So why http/2? It is faster than a normal connection. And for as JavaScript developers from our perspective HTTP2 is kind of a game changer. In that HTTP2 is one persisting connection, rather than a bunch of connections. And it's kind of hard to reason about.

[00:01:52] But what's the benefit of one persistent connection where it can make multiple requests, versus a bunch of connections?
>> Speaker 2: Reliability, more reliable connection.
>> Jem Young: Yeah yeah that's true. Yeah you'll have less packets dropped cuz you're using less connections. But in general and this is one of my favorite interview questions that I ask UI engineers, what's the slowest part of processing a web request?

[00:02:22]
>> Speaker 2: It's probably the handshake.
>> Jem Young: It's the handshake, exactly so all those connections, exactly right great answer. It's the handshakes so it's I have to read all the headers for every single request, I have to parse those, the server has to patch those. That's expensive. Why can't we just do that all in one request and save the hand shaking?

[00:02:39] That's what HTTP2 does. It can make request or one connection but multiple file requests in the same one. The benefit of that is we no longer have to midify our job description in one file it's actually slower to do that. So instead of one massive 10 megabyte file.

[00:02:53] Please don't send down 10 megabytes of JavaScript, but if you have one massive 10 megabyte file, instead of doing that, let's just break it into tiny chunks. How about 10, 1 megabyte files? Cuz they can make all those requests at the same time versus before it made those in serial.

[00:03:10] See the difference? That's why it's a little bit faster to use HTTP2 if you can and it does require a bit of thinking on our end because we don't have to compress all things in one file. It's better to do it in multiple files. Akamai is a good demo, cuz it's better o show and not tell.

[00:03:26] So that's HP1 and HTTP2. And what's happening is it's making, I will refresh again. So, this is making all the requests kind of at the same time, or making them one by one by one by one, that is going really fast, with HTTP/2 it makes them all at the same time, which is why it loads the way it does.

[00:03:46] All right? So that's HTTP2.
>> Speaker 3: Any drawbacks for HTTP2? Any drawbacks?
>> Jem Young: Drawbacks? Not all browsers support it currently. You can get into overhead because you're making one connection but a bunch of request. So you're gonna actually overload that one connection if that makes sense. So yeah, if you don't wanna cross 30 files at the same time cuz that will just overwhelm your browser.

[00:04:10] You wanna do them maybe ten at a time, 20 at a time. But lucky for us the browsers take care of that. You don't have to worry about that then. Downsides, don't really know of any, honestly. There probably are some, but for our use case it's better to use HTTP2.

[00:04:24] So, let's go to implement that. And I will show you hopefully the benefits. We get a benefit right now from using it.