Progressive Web Applications and Offline Challenge 2: Solution
This course has been updated! We now recommend you take the Build Progressive Web Apps (PWAs) from Scratch course.
Transcript from the "Challenge 2: Solution" Lesson
>> 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: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: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: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.
>> 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.