Progressive Enhancement Overview

[00:00:00]
>> Marcy Sutton: So let's talk about progressive enhancement. I mean, speaking of like thinking you know best for all your users, it is very pervasive and persuasive, I guess, to require JavaScript for everything. I mean we're talking about JavaScript applications, right. So a lot of web apps make that hard choice of if you don't have JavaScript on, you can't use this app.

[00:00:24]
And I think that's okay for a lot of use cases. For a website that has content on it that people are supposed to read, we shouldn't require JavaScript just to read the content, or just to do some things. And people do turn off JavaScript with legitimate reasons, maybe you have network constraints, and this app is just downloading a ton of resources.

[00:00:47]
I've heard people for accessibility reasons turn off JavaScript to get away from animation. That's been a reason why people have turned JavaScript off. People have their reasons, and I think that's okay. I think at the very least, if you do require JavaScript, put a no script tag in your HTML, and say this site requires JavaScript.

[00:01:06]
That's what Gatsby sites do by default. But they do work without JavaScript, and we'll see in a moment. And to really make something that is progressively enhanced means that you're emphasizing the core web page content first. Starting with the HTML part, and then adding these layers of presentation and features on top, as browsers and network connections allow.

[00:01:30]
So if JavaScript's enabled and the scripts download, that means that JavaScript's running so it's gonna take over and re-hydrate that application. But you should have something render to the screen without it turned on. And it reminds me of when I was working on Flash applications, and I didn't have any kind of fallback.

[00:01:48]
And I was like going to a potential client going to show them my like flashy Flash website, and it had no fallback and yeah, guess who was really embarrassed when their site didn't load? I mean, fast forward to now with JavaScript rendering a lot of these applications, it's not just an embarrassing rookie move.

[00:02:05]
It's like somebody not being able to use a website. So we can do things like provide baseline accessible markup. If you're adding ARIA and more interactivity, using JavaScript to add those attributes instead of just having them there by default. And then to make this more realistic because honestly, this does have a cost in terms of engineering and maintenance effort, prioritizing the core user flows of your site.

[00:02:32]
If there's something that is really important for sales and keeping your site running, keeping the lights and the business going, prioritize those, let people check out. Add some kind of server back-end infrastructure, and I know that has a cost too. So just prioritizing, what's the most important part for the user can help you, so you're not trying to do this for absolutely everything.

[00:02:58]
And one of the really big reasons why I started using Gatsby for my site and why I went to work there was that it does this server side rendering by default. So if I run Gatsby build, it will compile my React components into raw JavaScript or sorry, raw HTML.

[00:03:16]
And if I turn JavaScript off, I have pages. I have pages, that's awesome, but I wrote all this stuff with React, how does that work? With the power of Node and Gatsby's infrastructure, they create these server-side rendered pages, and I don't even have to think about it. It's great for performance, it's great if people wanna read my website without JavaScript turned on, which is perfectly reasonable.

[00:03:39]
So we can do that by default at build time, which is pretty cool.