425

January 24th, 2022 ร— #javascript#nodejs#dependencies

Updating Project Dependencies

Wes Bos and Scott Tolinski discuss strategies and best practices for updating dependencies and managing breaking changes in a Node.js project.

or
Topic 0 00:00

Transcript

Announcer

Monday. Monday. Monday.

Announcer

Open wide dev fans, get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest TS web development treats coming in hot. Here is Wes, Barracuda,

Wes Bos

Boss, and Scott

Scott Tolinski

key.

Scott Tolinski

Welcome to Syntax in this Monday. Hey, Steedreet. We're gonna be talking all about updating your project's dependencies All of that fun stuff when it comes to your packages in your projects. My name is Scott Talinski. I'm a developer of Bender Colorado. And with me as always is Wes Bos.

Wes Bos

Excited to talk about updating dependencies.

Scott Tolinski

And I'm excited to talk about 2 of our excellent sponsors today, LogRocket and Magic Bell. The first of which is going to be LogRocket.

Topic 1 00:48

LogRocket sponsor

Scott Tolinski

LogRocket is the perfect place to see all of your errors and exceptions happen as they happen To the users they happen to. That's right. You actually get a video, a scrubbable video replay with console log, network request, and even your Redux store if you're using Redux.

Scott Tolinski

Normal depth. You can have a hosted version or an on premise version. It's really pretty amazing. Check it out at logrocket.comforward/syntax.

Topic 2 01:19

Magic Bell sponsor

Scott Tolinski

Check out all of their little demos and documentation videos. Give it a try. Pop it in your project. I know that we love and use it over here at level up tutorial. So check it out. And, Wes, do You want to talk about Magic Bell? Yeah. We had Magic Bell as a sponsor,

Wes Bos

a couple I don't know. Last year sometime.

Wes Bos

And they're back for some more, and they've got looks like they got a whole bunch of really cool new features as well. So Magic Bell does, notifications for your application. So if you need to notify your user about, something happening in your application, whether that's some their product has shipped or, somebody has followed them or whatever.

Wes Bos

Magic Bell is an entire framework for working with those types of things. They do push notifications, email notifications, in app notifications.

Wes Bos

They have this really cool thing called smart notifications, which I love because, if you're, like, in an app let's say you're in an app and you get a notification about, like, Scott Tylinski has followed you. And you see that, then, like, I don't need an email that also tells me Scott Tylinski has followed me. But if I'm not in the app, Then I should. Or, like, do I need a push notification if I've already seen that? So Magic Bell has this thing called smart notifications, which if they've seen it in one part, then it's not gonna notify you about it in the other, the other parts, which is super super smart. They batch task. You can have preferences.

Wes Bos

This is one of those things that's, like, you think it's so simple to just add a notification little little bell to your, your application, but then you get into all of these little edge cases and all of, like, somebody wants a notification only once a day or I want to, if I've seen it in the app, then don't email them. It just gets very, very complicated. So if you need notifications in your app, check it out atmagicbell.com.

Wes Bos

The free plan gives you a 100 MAU. You know what a MAU is, Scott? Meow.

Wes Bos

It's Mau, monthly active users. That's that's what that means. So you can get a 100, of those for free.

Wes Bos

And if you use the coupon code syntax f m, you're gonna get 10% off for your 1st 12 months. Thank you, Magic Balve, for sponsoring. Nice.

Scott Tolinski

Cool. Let's get into updating project dependencies. We all love dependencies.

Topic 3 03:33

Introduction to updating dependencies

Scott Tolinski

So For for those of you who don't work a ton in JavaScript or maybe you're a new developer, our projects, they rely on other packages to to work. Right? If you're running a React package or React website, then React is going to be one of those packages. We call those dependencies. We depend on them Because they're the packages that we're using in our application. So that's what a dependency is.

Scott Tolinski

And, Wes,

Topic 4 04:02

Definition of dependencies

Wes Bos

take it away. Yeah. I I just did a bunch because, like, I started off the year with, a new gumption for life And I decided I'm going to update everything. So I, uses that tech website was on Gatsby 2. Now it needs to be on Gatsby 4. Personal website was on Gatsby 3, needed to be update updated to Gatsby 4.

Topic 5 04:26

Wes updated multiple projects

Wes Bos

My course platform had a whole bunch of dependency updates updates that needed to happen.

Wes Bos

The syntax website was on Next. Js ten as well as a whole bunch of other things, and that was updated to Next. Js 12.

Wes Bos

So this I updated 4, like, fairly large websites, and I have put together a sort of a process For for going through these things. And we've joked in the past and half joked and half real of just YOLO updating some of your stuff, which means that you just literally update it all And just hope for the best. And you can you can do that in to a a certain point. But when you Come back to a project you haven't touched in 6 or 8 months. There often is major versions that have been updated, and there's fifteen, 20 things that are all new versions. So, like, what is your process for even approaching that? So I've put together some steps as to what I think, is a is a sane way to approach this type of thing. And I'm curious to see how how Scott does that as well.

Topic 6 05:31

Tools for checking updates

Wes Bos

This is this is more gonna be on like like tools or not sorry, not tools, but like more of methodology. Yes. Right. And in the past we've talked about, an actual project called, npm check updates, n c u.

Wes Bos

And that's specifically what I used to check if there are any updates.

Wes Bos

And if you're using a mono repo, I learned you can do dash dash deep, and it will go through every package JSON and tell you what updates are in there. And then use you just told me that there is something built into PNPM for this as well. Yeah. Yeah. I use PNPM,

Scott Tolinski

And, let's see. It's p n p m up is the command. And if you pass it the hyphen I, lowercase I flag, It will give you an interactive version, which is just like one of those lists where you can hit space bar to fill in the dot and choose which ones you want to update. You passed in a, hyphen capital l, it will give you all latest versions of packages rather than just, like, I think, patch or or minor version updates. I'm not I'm not exactly sure. I always use the l just because I like to see what the newest stuff is even if I'm not going to update to it. But, yeah, I I love these interactive tools, whether it is the yarn version of this thing, p n p m version or n c u. All of them, are are just this is the way I do it. There's also another strategy, which would be, like, there's plugins for Versus code that will tell you if there's a new version in your package dot JSON. And you can do it via package dot JSON. It seems like a little more tedious to me, but if you're the type of person who likes to work in that kind of environment rather than running a script or something. Yeah. You can have, like, a GUI. Yeah. That that seems like a viable option as well. So yeah. So those are the tools. Let's talk about approach. So the first thing I do when I do these is I'll run

Topic 7 07:12

Wes's update workflow

Wes Bos

n c u. I'll see a huge list of everything, and it will tell you what needs to be updated and what versions are there. And it will usually color them, green or red Or yellow.

Wes Bos

And or yellow. And those are associated with SemVer, a semantic versioning.

Wes Bos

And that's those software in SemVer. That's what that's what Node. Js uses or npm uses, is a three point system. So 1.3.1.

Wes Bos

And we've said this before, but really quickly. The, the first point, if you're going from 1 point whatever to 2 point whatever, That's a major version, meaning that there's likely going to be breaking changes in that.

Wes Bos

And then if you're going from 2.0 to 2.1, Then that is a minor update, and that should not have any breaking changes, but it can have new functionality Or at least backwards compatible functionality. Maybe they've changed how they've done something, but the API should still work or they're not gonna take away a method that you're using in a minor update. And then there is a patch release.

Wes Bos

So, 2.2.1.

Wes Bos

Shoot. When we released 2.2.0 something broke or there's a bug in this, like, weird edge case. So we patched it, and it doesn't doesn't change any. It doesn't add functionality. It doesn't break any functionality. It just fixes how it should actually work.

Wes Bos

And that's how most people Should follow it. It's it's definitely not always the case. But in most cases, if you get one of those, patch updates, I'll update all of those first, like, oh, there's a new lodash, unique of 3.5.2.

Topic 8 08:58

Update patch versions

Wes Bos

I'll just update that. That's probably fine. You know? Then I'll go through all of the minor updates, as well, And then I'll leave the major ones, for,

Scott Tolinski

I'll talk about that in just a second. Yeah. I do the same thing. I I do I do the exact same thing. Patch first, minor next. Yeah. Beautiful.

Topic 9 09:13

Update minor versions

Wes Bos

Then I'll go through and upgrade groups minor groups at the same time. So I won't update everything every single thing at once. That is a minor update.

Wes Bos

I will update groups at a time. So Interesting.

Wes Bos

Gatsby and all of its Gatsby plug ins. I'll do it. You can do a dash dash filter on your NCU, and you can update anything that has Gatsby in the word, and that will update all the dependencies, ESLint and all of the ESLint plugins. I'll update all of those at once if they're all minor. And then finally, once I'm done that I'll go through any any other minor stuff that that hasn't been updated.

Wes Bos

Number 3 is update major dependencies. So these are things that have done a full version bump. Now you're getting into, something might break here. This we have to really pay attention to this type of thing. So, Gatsby 3 to 4 was a big one. ESLint 6 to 7 or 7 to 8, A major version of Babble, major version of of React.

Topic 10 09:59

Update major versions

Wes Bos

You can you can kind of expect That if you are doing a full version bump, that something might break. Or a lot of places like React, they will deprecate but not remove functionality in a major version.

Wes Bos

And then the next major version, they'll remove it. So, if let's say React wanted to remove useEffect, we're on React 18 right now. React 19 would not remove useEffect, But it would start throwing warnings saying, hey. Pretty soon, this is gonna be removed. They're not they're not removing his effect, but that's just an example.

Topic 11 10:35

Deprecation before breaking changes

Wes Bos

And then in React 20. They would totally remove it, once everyone's had enough time. And usually, you get at least,

Scott Tolinski

like, a year, 2 years to to catch up to those things before you actually have to to upgrading and and actually change how your code works. Yeah. And then honestly, it depends, like, what the repo is. Right? Because I I do know that, like, some things are more likely to break than others. For instance, like, Mongoose is like a pretty mature package. If If it's going from a major version to another major version, you can probably guess there will be breaking changes there, especially because it's some very semantic versioning where You know that a major update is for breaking changes, but, like, if you have, like, ES Lint or something, I have no problem yellowing a full version update of ESLint because it's, like, really low stakes. Right? So I do like to calculate the stakes. And also if there is, like, a high stake one before I before I make any sort of change or modification to those packages, I will go straight up to their change logs and look in the releases section. Releases of the GitHub repo. If you've never if you've never seen it before, you go to any repo. You can look at the releases section. I think the link is just right there on the Just under the about, there's a releases. A lot of packages will say, here's the releases, and they'll typically have a change log or at least at least an ability to look at some of the PRs to see what exactly went in there. And so major big packages, I'm definitely checking out that first. Yeah, that's exactly what I did. So it's funny you say Mongoose. That's the one that I just upgraded

Wes Bos

on Friday myself. They went from a major version to another major version, and we have to do some of them yet. Is it is it a bit is it a breaking? Is it a big thing? It was a little bit. There was no breaking changes at the end of the day, but I needed to also update the version of, it was actually the other way around is that my host is updating the version of MongoDB that's running on the server. So I needed to update mongoose so that, it worked with the newer version. So I sort of just, like, prepared myself for that upgrade that's coming in a couple weeks.

Topic 12 12:27

Check changelogs for breaking changes

Wes Bos

What are breaking changes, and they will almost always have a bulleted list of usually obtuse APIs that nobody ever uses.

Topic 13 13:12

Search codebase for breaking changes

Wes Bos

And you just go through each of those bullet points, and you can almost always just search in your your course platform or not course in your code base And say, did I use this? Did I use this? Did I use this? And then when you hit something that you did use, it'll say, we don't no longer use this. If you need to use this like, for an example, I was using, in Mongoose, I was using dot count, and they changed that to either dot estimate entries or dot count entries.

Wes Bos

And there was a little bit of like if you need to filter based on non index fields use this one, otherwise use this one. So you just got to kind of read through it, update your code base, make sure it still works, and then you're you're good to go. As I'm doing this, I will be doing git commits for every like, upgrade Gatsby, upgrade Mongoose, upgrade ESLint, and that allows you to sort of batch these updates.

Topic 14 14:07

Commit after each update

Wes Bos

Should anything go wrong, you can always roll back

Scott Tolinski

that specific changes. Yeah. I always create a new branch for updates, commit in between each of those those runs. But oh, this is another area. I do wanna say that TypeScript can really save your bacon too. Because if there already major API changes and everything is fully typed, TypeScript is gonna yell at you. It's gonna say, hey.

Topic 15 14:30

TypeScript prevents breaking changes

Wes Bos

This is no longer a method or whatever that error ends up being. Yeah. Yeah. Or you're you're passing a string here. It's no longer supported to pass a string. You have to pass an object with a value prop inside of it. Something weird that, you know? And that's another huge up huge benefit for TypeScript.

Scott Tolinski

Totally.

Wes Bos

Finally, after that, once I've done all those major dependencies. I'll upgrade any stand alone stuff.

Wes Bos

You have to do some research on like, for example, I had to update a, I had to actually update my database version. So this is not a dependency, but it's what's actually running on my database side.

Topic 16 14:55

Update other dependencies

Wes Bos

You sometimes need to regen some some, API keys. So a lot of times, I know I know Stripe does this. I know Sanity does this. A lot of, really good companies will version, their APIs to associate with, API keys.

Wes Bos

So if you are upgrading to a new version of a package. Sometimes you'll have to regen a new set of API keys for that as well to go along with it.

Topic 17 15:27

Regenerate API keys if needed

Wes Bos

And you need to make sure that you're updating those API keys at the same time that you're running a build or wherever it's being used.

Topic 18 15:45

Test thoroughly after updating

Wes Bos

What else? Test, test, test. So if you've got tests for your codebase. Obviously run those. Those are save your baking huge because you can automatically catch those things. If not, run the thing, click around, Make sure everything is good. Like Scott says, you have to, like, know, like, is this major or minor? Am I updating my database or my checkout flow? Those are major for me. Or am I updating a dev tool or like a tiny little format money function where something something may break but it's not the end of the world. Right? So those are it's important to know if these are major or minor.

Topic 19 16:19

Monitor errors after deploying

Wes Bos

Watch your error logging. Specifically, I have Sentry in my front end and my back end, and I will just kinda have it open. And and Sometimes something will break and you'll see it spike in your sentry and you can say, oh, okay.

Wes Bos

Very clear to me that, that was a that was a botched update and you can roll it back. That's a really nice feature of a lot of these immutable hosts is that you can Just roll back to a working version. Oh, yeah.

Topic 20 16:50

Fix issues going forward

Wes Bos

You don't have to necessarily roll back a git commit. You can just

Scott Tolinski

Fix forward, I think, is the word that a lot of people do. They say, don't roll back, fix forward. And even better, you if you have TypeScript, you can have TypeScript deny the build On your your you need to go to build it. You can run TypeScript first and say, hey, Mark. Part of your your build pipeline.

Wes Bos

Last thing I have here is is just pray.

Topic 21 17:10

Hope for the best

Wes Bos

This kind of comes back to the Yolo update as, just hope that everything thing goes because that's the one thing about using all these dependencies in Node. Js world is that You don't always know what has changed under the hood unless you read every single line of code down the 50 dependency tree lines you have to know. And There was an issue the other day where a popular open source maintainer just kinda nuked his packages and broke a lot of stuff.

Wes Bos

But luckily, those were major version updates. And anybody who YOLO updated and didn't check what happened in the major version update.

Wes Bos

Kind of on you. Kind of on you. Yeah, totally. Yeah. All right. That's that's my tips that I have for updating a major

Scott Tolinski

major Node. Js project. Hopefully, those are helpful. Anything else to add there, Scott? No. It's funny. We have We've kinda independently came up with the the exact same general workflow for these things without you know, it's not like we sit here and discuss this beforehand. But No. I really end up doing all the same things you do in that. I think that's a good sign that what we're doing is is both practical and reasonable. So Totally. Yeah. Totally. Alright. Well, thanks for tuning in. Catch you on Wednesday. Peace.

Scott Tolinski

Peace.

Scott Tolinski

Head on over to syntax.fm for a full archive of all of our shows.

Scott Tolinski

And don't forget to subscribe in your podcast player or drop a review if you like this show.

Share