The Strange World of NPM Site Alternatives

Like many web developers, I work day to day within the javascript ecosystem. For those who aren't aware, NPM is the primary package manager for javascript developers. While in the early days, it was primarly for NodeJS and backend use (with Bower acting as the frontend equivalent), it is now used consistantly across the stack. I use NPM at least 100 times a day; Not just for installing and managing packages but for managing scripts, git hooks and test suites. npm run dev, npm run test and npm run test:changes are all so frequently typed that I can access them in my terminal consistently within 2-3 presses of the up key.

An on-going joke is that NPM doesn't stand for anything. So common is this joke, that on NPMs own website, it changes to a randomly selected, open sourced, non-serious option every time you click the header.

This is all to say that, NPM is a giant in the world of Javascript. NPM has a few main competitors. The most commonly used ones are Yarn (The longstanding popular alternative as of 2022), PNPM (The new kid on the block) and Bit (Which is less of a package manager and more of code component engine).

I'm not actually talking about competition for the main NPM service today. While they all have their own benifits, NPM has cemented itself as the primary package manager for the time being (especially now it is owned by Microsoft through Github), Today I want to talk about alternatives to the NPM Website. npmjs.com

Why do alternatives to npmjs.com exist?

To begin, let's talk about why these alternatives exist. npmjs.com's built in search is bad for finding new packages. Most devs I speak to day to day don't use it. More often than not, people use Google to search for packages knowing that the top link will be to a Github repo or a NPM package page. In the long run, searching this way is much faster and provides better results. To back up this point I did try posting a poll on twitter. While it didn't get much of a response, it is telling that 100% of respondants said they use Google rather than NPM search when looking for new packages.

Michael Walter Van Der Velden

@mikevdev

So I'm currently writing a blog post about how developers find new JavaScript packages. Quick 6 hour poll anyone? #webdev #javascript #ttpescript #Developers #GitHub How do you find new js packages?

npmjs.com search bar 0%

Google 100%

Linked to by colleagues 0%

Other (please reply) 0%

2 0 link to tweet May 29, 2022, 1:18 PM

This really shouldn't be the case. Google is designed for indexing webpages, not code. Yet, npmjs.com rarely supplies a top result that I end up using. As far as I can tell, this is because the built in npm search works based on package title, package description and creator supplied tags (which many package devs don't even add). What makes this especially frustrating, is that if a package name matches your search term exactly, then it will (inconsistently) just open that package's page rather than performing a search.

Essentially, npmjs.com has been designed to help you find what you're looking for but only if you already know what it is and just need to check the readme/check the usage instructions again. Conversely in my experience, you go looking for a package when you have a problem you need to solve and don't already have a solution to.

The package pages themselves are pretty decent. They render markdown from the package's readme.md file, have a copyable NPM install link, and some stats including weekly downloads, version, and last publish date. It's just a shame that getting to this page is as bad as it is.

So what are the other options?

There are a couple of other options available, each with their own pros and cons. Some simply attempt to improve the experience without much in the way of extra features where as others want to reinvent how we search for NPM modules entirely.

Openbase

Openbase is a YCombinator backed, algolia powered, multi-language package search site. It has fast realtime search with handpicked package categories and a package review system. It also keeps track of connected github repos and uses this to track regularity of commits and open PRs. Openbase has been built with the idea that more information is always better and it certainly delivers on that promise. Personally though, It can at times feel like too much data.

Openbase does have a few issue. The search box clears itself every time you tab away from the page and some of the animations can be a little obnoxious. My biggest issue though, is that if you don't wait a couple of seconds before hitting enter, you can end up with entirely incorrect results.

The package pages themselves are extreemly slow with my average page load sitting a 6-7 seconds and an average time to first paint at 3-4 seconds. Google lighthouse supported that this really could be better.

If you like data, it's a good option. The search itself is powerful if a little buggy. I just wish that more work had been put into presentation and core functionality before they added a reviewer reward token system.

npm.io

To start, I'm not entirely comfortable with npm.io's choice of name. It feels almost like it's attempting to trick people into clicking on it's site rather than the official npmjs.com. I do appreciate the clean asthetic inspired by the Google home page but again, I wish there was some acknowledgment that this isn't that NPM.

It has "realtime" search suggestions that come up a few seconds after you stop typing using quite slow background fetch requests (no socket connections here). Once you actually hit go, the search is very quick. To the point that I wondered if the suggestions were actually preloading the search and package page contents on my machine. When I checked the search api endpoint however, I was pleasantly surprised to find that was not the case.

In terms of actual search, it feels better than npmjs.com and the results do seem to include my search terms more frequently. It's difficult to tell if it's actually better though. The package pages on npm.io are much cleaner but are missing even the basic stats from npmjs.com. I regularly found myself looking for a link through to the npmjs.com package page and being unable to find it, further supporting my theory that this site wasn't made with the purest of intentions. Given my suspisions, I did check for tracking or mining scripts and all I could find was a regular old single Google Analytics script (without a privacy policy though so not at all GDPR complient).

Overall though, I did enjoy using npm.io. It felt responsive and lightweight. I just wish they were more upfront about who they are; Who owns the site; etc.

npms.io

npms.io is another system that prides itself on being lightweight. Built by a Portuguese software development studio called Moxy. The site is probably the most performant npmjs.com alternative that I've used and will probably be the one I go to in future.

Search suggestions appear quickly and are often relevant. Search is very responsive and is clearly making use of precomputed couchbase views if their search hint is anything to go by. Probably my favourite feature is the quality score given to each package right on the search page. They have a clear breakdown of how this is calculated and it makes a lot of sense.

It's very clear that npms.io is not trying to replace npmjs.com given that it's search results link to the npmjs.com package page rather than reinventing the wheel. They know what part of the flow needs improving and have stuck to improving just that.

The search has the ability to filter based on a few different qualifiers much like how google opperates for websites, this is really nicely documented and presented. It also works really well.

The design of the site feel very css framework-y but then this is a site for developers and doesn't need to be beautiful if it works. I'd rather have fast than beautiful in this case.

Going back the introduction of this article, npms.io feels like a search engine designed from the ground up to be good at seaching npm packages and doesn't concern itself with anything else. I respect that.

Wrapping Up

I think it's clear which was my favourite but at the end of the day this all comes down to personal preference. There's no one way to do search and different people want different things. That being said, Microsoft, please improve the built in search.

If you see any others, do let me know and I might do an adendum. If any of the site authors from the above sites see this, I can only apologise. I'm happy to correct anything that I've said that's incorrect.

To everyone else, I hope you enjoyed this little dive into npmjs.com alternatives.