Progressive Enhancement

[00:00:00]
>> And so, I know that we've gone through all this. And some of you might be thinking, well, who builds web apps this way, right? Because after all, every sort of modern text that you'll see always talks about build tools and that kind of thing. And to be honest, progressive enhancement is very much a thing that continues to exist to this day, even though it's not talked about a lot, right?

[00:00:19]
Code rewrites are very sexy. But the truth is when you're dealing with enterprise systems, it's just not realistic to stop everything, as we talked about before, and write new features. But dropping in the CDN with Vue, having it progressively enhance. That all works. We're not gonna cover it at this point because we're going to move into build tools, but a lot of these things we're seeing here, they can be just abstracted into .js files, right?

[00:00:42]
You can actually modularize your code, you can do a lot actually, and make a fairly robust app. It doesn't have to all live inside of this single object that I've shown you all, that's just a way for us to keep it all as a mental model. But eventually you can break it out, import JS into here, it can still scale pretty darn well.

[00:01:02]
And so this image here, which I love, it's like the cake, that then you get the frosting, then you get the candles, right? And so the credit here is Tiffany Tse, this is her blog post on What is Progressive Enhancement and Why Should You Care? So definitely something that I do think modern web developers need to consider when it comes to the realities of upgrading their code base.

[00:01:22]
And so this is a smashing article magazine by Sarah Dresner, who used to be on the Vue core team. And this is a great one because the title of this is Replacing jQuery with Vue.js, No Build Step Necessary. And this is also a very valid way of using Vue.

[00:01:37]
It's like, if you know that only one page in your entire app because you're statically generating it so that everything's on the server side, but only one could use some interactivity. Don't even need jQuery anymore, you could literally just drop Vue, because I believe the CDN side is either roughly the same, if Vue is not slightly lower at this point, but that is actually a viable option now.

[00:01:55]
You don't need to even approach Vue as a framework, it can be just little bits of interactivity that are sprinkled in and out. And finally, again, people are always skeptical. They're like, well, who's actually done it this way? Well, GitLab did it this way. GitLab used to actually be a Ruby on Rails app.

[00:02:11]
It was if anyone's worked with Ruby on Rails, you know that, especially back then integrating node-based tool chains into that was extremely painful. Again, and also they needed to ship features, right? And this was before they went public. They had customers they needed to meet their needs, so they couldn't stop everything and go, yeah, Rails is kind of outdated.

[00:02:31]
We really would love to use the framework, so let's stop building stuff. They couldn't do that. So what did they do? I'm trying to remember actually which page it was. I knew someone who was on the team that did this. Let's just, for example, they had the sign in page.

[00:02:43]
And they said on the sign in page, let's add Vue as a CDN, and let's just add interactivity. And once they proved that that worked well, they went, okay, next one, what's something we can hit that's fairly low impact performance wise that we can do? I think there was another one that they did, and basically that's what they did.

[00:02:58]
They slowly added new features to the customer base while progressively migrating their app to Vue. And then eventually when they had, basically, the tipping point of, they had so much code in Vue that it made sense to like, let's take a couple of weeks to refactor our code to actually use the node tooling to bring it all in.

[00:03:18]
That's when they actually did that. But they proved their case rather than trying to just tell product, hey, just stop. We have this wonderful idea that if anyone has done ever a massive app refactoring, it often doesn't go quite as planned. And then deadlines get pushed, but they were able to realistic do that.

[00:03:34]
And so this is how GitLab is now running on Vue now. And so the reason I wanted to emphasize this method is because it's something that I think is often overlooked when people are thinking about recommending solutions to clients. And it's something that I want people to know about.

[00:03:48]
So whenever you're working for someone or you think that this could be a good approach, you now know that this is here for you.