NPM Is Dead

If you've ever been tired of the crappy search features in npm, how slow it is and how difficult it is to find the actual package you want, I highly recommend checking out npmx. Not only is it blazingly fast, but also gives you a ton of additional information that you don't normally get in npm, such as vulnerabilities, deprecated dependencies, and so much more. In this quick video, I want to talk about why npmx is so great, and why I pretty much replaced my entire usage of npm with npmx. Welcome back to WebDev Simplified. My name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner. And the very first thing I want to say is that npmx is just a search repository. I'm not actually using something other than npm to install my packages. For example, if I were to look at React here, you can see that the install scripts that they give me are specifically for npm. Now, if you're using a different package manager, the nice thing is they have all of them here. So, I could use bun, for example, if I wanted or pnpm, whatever you want. You can copy those exact commands over, but essentially this is a replacement for the npm web page, which replaces how the searching works and shows you a bunch of additional information. One of the big problems with npm search is that it's really not that great. Unless you know exactly what you're searching for, you obviously don't usually get good results. For example, if I search for story book, but I put a space in between story and book, you'll notice I can scroll forever and I'm never actually going to find the storybook library, even though it is a massive library. Instead, I need to remove this space because the storybook library doesn't have a space. Now, you can see that this library, which has over 50 million downloads, is finally showing up at the top of the list. This is one of my biggest gripes with npm is it makes it difficult to find packages. If I were to use npmx, though, and I search for storybook. Doesn't matter if I type it all as one word or if I type it as two words. You can see that here it is the second result showing up in my list. We have storybook right there. I have the react version. I have a bunch of stuff related to the storybook library. and none of those other weird libraries are showing up. It's giving me the most popular things that are as close as possible to the thing that I actually searched for. And the reason for this is they're actually using Alolia behind the scenes for their search. Now, if you wanted to use the default mpm registry for your search, you could swap over to using that instead and then you're going to get all the same terrible results that you got before. But the really nice thing is they're using this extra search method, which makes it a little bit quicker to search through their repository and give you much better results. Also, you probably noticed how absolutely quick it is to immediately search for the packages I want because everything is cached, which is really great. Now, for the most part, if your internet is relatively quick, it's not going to matter and npm is not that slow, but it's nice having something a little bit quicker. Now, the real benefit comes in when we actually start looking at the things that you see on the page. Let's, for example, go to the low dash package. This is a really, really popular package. And if we click on this, we get a lot of the same stuff that we got inside of mpm. If I were to do the exact same search over here and I make sure I go to the right one. There we go. You can see we get a lot of the same stuff. We get the ability to look at the code. We get some things related to dependencies, the versions. We have our install command. If you look over here, we have things related to dependencies, the install size. We have our install command right here. We can look through all the different code inside the project if we want to. So, all of that stuff is pretty much the same. We get weekly downloads. We get version numbers. All the stuff you're used to in mpm is all here. The big difference is there's a bunch of additional features on top of it. For example, you'll notice right here that it specifically calls out certain things where dependencies have been flagged as having better alternatives. And if you want, you can just click learn more, and it'll bring you to a page essentially explaining why many people have flagged like, hey, you maybe don't need to use this library. Here's some alternatives that you can use instead. Many popular libraries have alternatives that have been released that are maybe more performant or better for some reason. And they are essentially getting flagged in npmx for you, which is a really nice thing to be able to see. Another thing that I really like is that some of the libraries that have Typescript types built into them, you can click on this docs page right here and it'll actually give you essentially automatically generated docs based on the TypeScript types. Now, it's not working for Load Dash because Load Dash doesn't really have types built into it. You need to install the types manually right here. And that's actually another thing that I really like about npmX is that if you need these types to be installed, it'll give you that command directly inside the command for running load dash. While if we look over here, you can see there's nothing like that inside of npm. It just gives you the normal install command. So that's a really nice thing about npmx is if you need the types, it'll put it into your install command for you and you can just copy that into your project as needed. Now another thing looking back here, if we search for a different library, let's look at castle and we look at the docs. You can see I get essentially fully fledged docs that takes into account the comments, takes into account all the types for every single thing inside this project. And this is really great if you just want to drill through and look at a specific thing instead of opening up the code in GitHub or maybe navigating it to in VS Code. You can do it directly inside of here, which is sometimes all that you need to be able to look up something really quick and simple. Another really nice feature is that they actually have the ability to essentially add likes to things. So there's like a social element to this. If you go to this connect tab here, you can connect to atmosphere, which is like a social media style site. And essentially, it allows you to like different packages and not. And the reason that I say that this is something that's nice is because it's really easy to see what libraries are more popular or less popular just by that like feature. So if we were to go to React for example, you can see this one has 64 likes. So we know it's probably a more popular library. Now the like numbers are really really low cuz the site is not only very new but also not very many people are connecting to this social media aspect of the side of things. I personally don't care about social media and don't use it. So I would never do that. But it's a good way of gauging popularity because weekly downloads only tells you so much since so many downloads are driven by other dependencies of packages. It can be a little bit misleading. So this is one way of just seeing what packages people like and actually enjoy. Now another nice feature is the compare feature. So we can go to compare and I can actually compare this library with for example view. And now I can see how these two different libraries compare to each other. I can see things based on like package install, the install size, what engines they're using, types, everything that you'd want, as well as obviously weekly downloads down here. And you can put as many or as few libraries as you want and really compare exactly how these libraries stack up against each other. So, if you're thinking about different libraries, this is a good view to be able to say, okay, what are the differences between these that I can see in all one really simple page. Another simple but really nice thing I love about this page is that it has keyboard shortcuts for everything. So, I can click C to go to the compare page, comma to go to settings, and so on. So, it's really great for doing a bunch of different things simply with your keyboard. And if you actually want to add keyboard shortcuts like this to your site really easily, I highly recommend checking out my video on the Tanstack hotkeys package. It makes doing this kind of stuff really easy. I'll link it in the cards and description for you. But speaking of settings, actually you can customize the site to based on your themes, like whatever you want it to look like. And also the really important things here is you can make sure it includes those at types install. You can toggle that off if you don't like that. You can also change the dates to relative dates, which is kind of like how npm does things. You can see it says like 2 months ago instead of the actual date. So if you like that, you can toggle that on. And again, if you prefer the mpm search, you can enable that here. And you can also disable that instant search feature. So it doesn't actually start searching. So you can see here as I'm typing, it doesn't actually start searching until I actually click the search button. So you can toggle that on or off depending on what you want. So this is a really nice feature just to have all these different configurations. But really the thing that I like the most about this is when you search for something, it's instantaneously. You can find the exact packages you want. And when you click on the package, it tells you additional information that you don't actually normally get inside of npm. I mean, just this little top bar section right here that tells you if it has types, what different module systems it supports, as well as things like the GitHub issues, the forks, the stars, all those different things you don't normally get inside of npm. So, it's really nice just having that all right here. Now, again, if you want to figure out how you can actually set up keyboard shortcuts inside your project super easily, I highly recommend that you check out my hotkeys video on 10 stack hotkeys. It's going to be linked right over here. With that said, thank you very much for watching and have a good