Progressive Web Applications and Offline Progressive Web Applications and Offline

Challenge 2: Enhanced Client-side Rendering

Check out a free preview of the full Progressive Web Applications and Offline course:
The "Challenge 2: Enhanced Client-side Rendering" Lesson is part of the full, Progressive Web Applications and Offline course featured in this preview video. Here's what you'd learn in this lesson:

In this challenge, students integrate an enhanced client-side techniques in the course demo application.

Get Unlimited Access Now

Transcript from the "Challenge 2: Enhanced Client-side Rendering" Lesson

[00:00:00]
>> Mike North: Thankfully, we're not going to get into server-side rendering for an exercise. It is not a small project. There's really no way to do it, at least with React, in 30 minutes, but we're going to do our enhanced client-side rendering. So here's what I want us to do, in index type EJS in the body, I want us to have something that has the nav bar or the menu bar at the top and the footer.

[00:00:27] And you may just strip away everything that looks like it's URL specific. So you might see on the root of the app, you might see something with a class called home, that's home specific content. So if you just looked at the home or the route URL of the app and delete that home dev and everything inside it, you'll be left with basically all of the URL agnostic UI.

[00:00:57] And optionally, you can go to the site spinkit, which is, these are some great CSS only spinners, and you can wire that up and put that in place of where that home used to be. So we have a nice little spinner while we wait for the client side stuff to download.

[00:01:15] Lastly, because I'm only gonna give you about ten minutes for this, I wanna show you how you can really easily grab HTML here. So I've got my elements tab here. I'm gonna click on. I heard that Steve, you were thinking it. So if I right click on this, I can see that there's an edit as HTML option.

[00:01:38] And what we end up with is a nice big text area. So you can copy this. Maybe Google for HTML beautifier or something like that to sort out this jumbled thing. But it should be a good indication of what you want there. Make sure it's only stuff that is inside.

[00:01:56] It should really be the root element, so that you don't add in extra script tags or anything like that. But everything inside root should work, and this is that home thing, so you basically delete that. Grab what's in root,
>> Mike North: And you should be pretty much good to go.

[00:02:15] All right, so ten minutes for this. And I do want you to look at the Performance tab here. And have the Performance tab open, reload, and you'll see that snapshot, like the film strip of images look much better than it did before. You should get below two seconds.