DEV Community

Cover image for How to choose the right NPM package in 4 steps πŸ“¦
Gleb Krishin
Gleb Krishin

Posted on

How to choose the right NPM package in 4 steps πŸ“¦

Hey, maybe you have been searching for the right library for your needs several times. In this article, I will present my algorithm to find suitable and share appropriate resources. For example, I will try to find a good library for front-end localisation.

Let's find and create a list of libraries πŸ“‹

I post some of them here, but it's good to have more options.

  • react-i18next
  • lingui
  • react-intl
  • react-translated

Resources: bestofjs, openbase, articles on the topic.

Check the documentation πŸ“‘

It's an obvious tip, but not everybody understands what to check. You should understand your business requirements and then go to the doc to see if the libs contain all of the features you need and support a translation format for your project.

Take a look at the project source code 🏒

  1. Try to understand who maintains the project. If even one repo is less popular, it will have a founder who understands the problems of other frameworks in the industry and solves them more efficiently.
  2. Check for the issues, how they are reviewed, and are the community actively collaborates to improve the package.
  3. Check the project insights page. It's a place where you will find more statistical data. Lingui project insights
  4. If you cannot find a needed feature in the documentation, it's possible that authors forgot to add it, or didn't have enough time for it, so it's definitely best to go to the source files and check them.

Create a comparison table ⛳️

It's an excellent way to structure all information into one table.

Name Size (minified + gzipped) Dependecies Typescript Open/Closed issues Last publish
react-i18next 6.7kB 2 8% 8/1044 a month ago
lingui 7.8kB 3 89% 20/693 4 months ago
react-intl 17.8kB 10 77% 12/1686 4 days ago
react-translated 7.8kB 2 0% 3/6 3 years ago

To create this table I used bundlephobia, npmtrends, snyk, github projects page.

Is it easy to integrate? πŸ€“

In our case, for the front-end localisation lib, we will check several points:

  • Is it easy to integrate into your project? Maybe your monorepo already has some localisation dependencies
  • Does it support your front-end framework
  • After the integration, it's good to measure performance changes

Finally πŸŽ‰

You will have a bigger picture of what is going on with your npm packages. Have fun!

Top comments (10)

Collapse
 
techtitans0101 profile image
TechTitans0101

Thanks @dealwith for such informative tips.

Open source is essential for application developers. It is unfortunate that Open Base has shut down. While searching for alternate, came across kandi from Open Weaver. It helps developers find code snippets, packages, libraries and solutions from millions of assets. Thanks to such tools for support to the community. Happy coding!

Collapse
 
kelh93 profile image
Ryan.ke

Helpful, Thanks

Collapse
 
dealwith profile image
Gleb Krishin

No problem!

Collapse
 
darkwiiplayer profile image
π’ŽWii πŸ³οΈβ€βš§οΈ • Edited

How to choose the right NPM package in the real world πŸ“¦ πŸ•š πŸ˜“

This one looks good 😀

πŸ˜‚

Collapse
 
dealwith profile image
Gleb Krishin

Ahahah, yeah funny)

Collapse
 
dhruvjoshi9 profile image
Dhruv Joshi

Such a detailed and helpful blog!!! Thanks!!

Collapse
 
dealwith profile image
Gleb Krishin

Thanks for your feedback!

Collapse
 
dmitriyone profile image
Dmitriy Fenko

Great moments. Thanks

Collapse
 
stefan_n profile image
Stefan Niederhauser

Awesome article, Gleb. I wish we had such a comparison table a while ago when selecting an i18n package specifically for Next.js. Might make a nice side-project to automatically display this data in a tiny overview. Something like npmcompare.com/compare/@lingui/rea..., but this is too bloated imho - and misses bundle size, which was critical in our case.

Collapse
 
dealwith profile image
Gleb Krishin

Agree, it's an excellent idea to have an open source that will generate the data like in the article plus to take something from the sources like npm compare