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 🏢
- 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.
- Check for the issues, how they are reviewed, and are the community actively collaborates to improve the package.
- Check the project insights page. It's a place where you will find more statistical data.
- 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)
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!
Helpful, Thanks
No problem!
How to choose the right NPM package in the real world 📦 🕚 😓
😂
Ahahah, yeah funny)
Such a detailed and helpful blog!!! Thanks!!
Thanks for your feedback!
Great moments. Thanks
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.
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