There are several ways of searching the npm registry, but I’ve found Yarn’s search to consistently yield the most relevant and highest quality results.
It turns out that Yarn’s search is powered by Algolia, an enterprise-grade hosted search solution used by many legit, tech-savvy companies such as Stripe, Twitch, and Medium. Here’s a quick preview of the search experience if you’ve never used the service before:
The only downside is that a lot of JS developers aren’t aware of just how much better Yarn’s search is over alternatives, such as the default npm search.
An interesting alternative search solution is npms.io, whose open source architecture is backed by CouchDB and Elasticsearch. It takes into account a variety of interesting and very ambitious metrics for each package. The search relevancy empirically feels roughly on par with Yarn’s Algolia-powered search, and the additional metrics don’t really make a noticeable difference.
The speed, consistency, and overall user experience of Yarn’s search is, however, where Algolia’s expertise really shines. It’s simply a pleasure to use yarnpkg.com’s search, and the UX for such a complicated and repetitive process as searching for npm modules is more important than you may think.
It’s also worth mentioning some other contenders:
- npmsearch - interesting project, although I can’t see any advantages over yarn’s search.
- npmjs.com - npm’s official registry search.
- node-modules - by the prolific Mathias Buus, but doesn’t seem up-to-date.
As a side note, I am in no way affiliated with Yarn or Algolia. I just love the JS community and want to get the word out about yarn’s search so more developers start taking advantage of it.
If I’m looking for a React or React Native solution, I generally start by searching the manually curated collection at JS.coach. Its authors have compiled a large, up-to-date list of quality, categorized modules for React, React Native, React VR, Webpack, Babel, and PostCSS.
If you’re a React developer and are interested in publishing your own React modules, JS.coach makes it easy to submit your own packages for inclusion. I’m not sure but would love to hear if anything analogous exists for Vue, Angular, and other popular frameworks.
Another useful curated resource is awesomelists.top, which allows you to search over 400 Awesome GitHub lists with categories ranging from awesome node.js modules to awesome react modules and everything in-between. I tend to use awesome lists sparingly or as a starting point when researching a new topic, because while they are indeed awesome, they tend to be a bit overwhelming.
This browser extension lets you quickly explore npm dependencies on GitHub and GitLab repos by displaying links and descriptions for each dependency at the bottom of any repository containing a
NPM Hub is an invaluable add-on to GitHub that I use constantly and really couldn’t live without.
Anytime I find a module I really like or am considering adding as a dependency, I’ll take a look at its dependencies and dev-dependencies which npmhub shows prominently on its GitHub repo. This both gives me a good idea of the quality of the module and is also a great way of discovering interesting new modules that I may want to use in the future.
We’ve covered a few different ways of finding awesome npm modules. Now let’s discuss how to go about actually evaluating those modules as potential dependencies.
Evaluating an npm module for quality is an important vetting step before actually deciding to add it to your project as a dependency. This is really more of a gut feel that you develop over time after looking through and using hundreds or thousands of modules, but here are some of the most important things to consider when learning to evaluate npm modules quickly:
- How many stars does the module’s source repo have? Popular repos have a much better chance of being dependable, as they’ve already proved their worth to other developers.
- How many downloads does it have? E.g., are people actually using the module?
- How long ago was the module published? How long ago was it updated? You’ll find a lot of quality modules that are a few years old which may just work fine, but there may be newer options available that are better maintained.
- How many open issues and PRs does the project have? E.g., is it well-maintained? A popular project with a ton of open issues all saying “X doesn’t work” would be a huge red flag that this module isn’t being actively maintained. If it’s a solid base and an important enough dependency, you may consider forking the repo and updating it yourself, as this is one of the easiest ways of getting into open source.
- Is the author someone you recognize / respect? This mental list will grow over time as you consume more npm modules.
- Does the module include unit tests and reasonable documentation?
- Does the module include a license that is compatible with your project? Use this handy reference to double-check the legal conditions before deciding to add a module as a dependency, especially if you’re working on a commercial project.
- What npm dependencies does the package have? Is this a really large, bloated dependency, or has thought & care been put into keeping it small & focused? This is one area where npmhub really helps.
- Does the module support your target JS environment? This is a newer and unfortunate consideration which deals with multiple JS module formats and language features that likely won’t be resolved anytime soon. Transpilers like babel and various toolchains like webpack can help with this, but you may run into issues trying to use newer ES6+ modules in non-ES6+ environments like older versions of node or browsers. This issue gives a pretty good meta breakdown around transpiling
This is just the tip of the iceberg when it comes to the art of evaluating npm modules, and over time these guidelines will turn into a blurry heuristic that you will use to choose better module dependencies at-a-glance. Please keep in mind that these are meant to be general guidelines, not concrete rules. There are a lot of modules out there that don’t have a lot of stars, for example, but are very well engineered and would make reliable dependencies. Every module starts out with zero stars 😉
I hope you’ve found this guide helpful, even if it’s just for one tip that you weren’t aware of before. Here’s a summary of some of the key points:
- Use yarn search for finding general npm modules.
- Use JS.coach for finding quality react & react native modules.
- Use npmhub for quickly exploring npm dependencies on GitHub.
- Evaluating an npm module for quality is an important vetting step before adding it to your project as a dependency.
Have any tips & tricks that I left out? Let me know by sharing them in the comments! ❤️
Before you go…
If you liked this article, click the 👏 below, and share it with others so they can enjoy it as well.