Progressive Web Applications and Offline Challenge 2: Solution

Transcript from the "Challenge 2: Solution" Lesson

[00:00:00]
>> Mike North: So we're going to implement our enhanced client side rendering, and i wanna show you how to use Chromes performance tab to get kind of get a handle on our start and end point. So we can see exactly how much we are improving our app. And the first thing we will do is load our app as usual.

[00:00:22] We're just waiting for it to build, okay? So here we go. And I've got my Performance tab open here. I'm just gonna click this reload button. And you can see that tells us it's profiling and you don't have to touch anything it'll stop when it when it's ready.

[00:00:39] And if we open this up a little bit we can get a handle as to like whats going on here. So actually let me, let me do it with a clean cache. So I'm gonna hit shift and refresh and it's actually gonna start profiling again. This time we're downloading, we should be downloading fresh JavaScript, we are.

[00:01:01] There's my orange bar there. We're not serving it out of the HTTP cache anymore. This is a fresh download. And if we look at screenshots,
>> Mike North: I guess, let's see. Maybe I need to do it one more time because I didn't have that checked. They change this stuff a little from version to version.

[00:01:28] Okay, so, I don't believe that. Okay, so this important to note, does everyone see how like, my network tab on the bottom, that is expanding and contracting. I'm just scrolling up and down. But the screenshots are not. So if you ever want to line up network activity with the screenshots and the timeline above, make sure that these little ticks for time are as lined up as you can make them, which would be like this is pretty close over here, seeing the whole thing here.

[00:02:13] I was wondering why we were downloading. It looked like this like we were rendering here, before the JavaScript is landing, not possible. This is a real situation. Here's our download, and if we looked here, you could probably see some parse time, this is booting the app up, and so on.

[00:02:32] And then finally, we get something on the screen. So we wanna show something that is a little bit better than this. And to be honest, we're serving off of localhost, we're not throttling our network connection. We probably should to get a good reading here. One more time for good measure.

[00:02:45] And now I'm dangerously in between developers and lunch.
>> Speaker 2: While he loads that, one thing I will say is it might be in your heart, you're gonna think I can pinch to zoom in cuz that's what you do on everything. That is not how it works on Chrome.

[00:03:01] So you probably can't see his hand, but it is a scroll up and scroll down motion which you will likely never actually internalize, so.
>> Mike North: [LAUGH] So yeah, good, thanks, thanks for that color. [LAUGH] So this is over a 3G connection, so we've throttled the network down. I just did that in the Network tab here, regular 3G.

[00:03:26] And when we look at performance we can see that like this is us downloading the JavaScript, some of this little CPU spike has to do with it being parsed and the app booting and only at about the 4 or 3.8 second mark are we seeing something show up on the screen.

[00:03:43] So let's do better than that. I'm going to go to my elements tab just like I showed you. This root element, this is sort of the container for our application. Most modern web UI frameworks, they sort of have a target div or target element inside which your app is rendered.

[00:04:03] React, Ember, Vue, Angular 2, they all do this. So we're gonna grab the contents of this thing. Edit as html, actually first I'll delete this that the URL specific content just so we can make it as easy as possible. Right there there's the home. Get rid of that so here's what we want present for loading.

[00:04:28] Edit as html I'll copy it and then we'll go over here into our EJS and inside this root, which initially was empty, I'm gonna put all of that HTML there. Now we can clean it up. You can see there's, this is the result of place holders so React can do it's proper bookkeeping and identify between these two comments is a value that I can replace.

[00:04:54] Not yet optimized but you can see our apps not it is re-rendered if we expect element sorry view source is what we want to do we can see like where before after all of this css we would have seen an empty root. Now we can see like this is that one line of HTML just pasted everything there.

[00:05:14] It's not pretty but it works. And one more performance, run holding down shift and refresh, so I go and fetch the JavaScript again, so we can see the difference
>> Mike North: Much, much better, we're actually below the one second mark on 3G, that's pretty fantastic. And we could put a spinner in there, and it would feel like this is a much faster loading app, four seconds versus less than a second.

[00:05:45] I mean that's like more than a night and day difference, it's like a different app here. So that is enhanced client-side rendering. This is very closely connected to a concept we'll talk about tomorrow called the App Shell architecture. It's the idea of a stateless portion of your app and statefull content that's rendered within it.

[00:06:09] I want you to put a mental bookmark here because we're going to come back to it. This will be a very familiar concept that we're going to reuse.
>> Speaker 3: What was that called again?
>> Mike North: Later on. App Shell. App Shell Architecture. So if you read through progressive web apps on Google's web essentials documentation, this is one of the two architectural patterns that they advocate for.

[00:06:33] And that is enhanced client side rendering, a massive improvement. Like we took our first paint down to like 20% of what it once was.