Packages Management in Pull Requests — The right steps when adding a package

Tomer Ovadia
Nov 7 · 2 min read

We all like adding the cool/latest NPM packages, but do you ever really research about it when you add one? This short post will tackle the most important steps you should drill down into when adding/removing a package. It’s mostly about the actual need and the future of it while considering other solutions.

💬 If you have more questions feel free to contact/comment.


Overview

You are about to:

  1. Add a package
  2. Replace package X with package Y
  3. Delete a package
  4. Update/Adjust a package version

Before doing so, you should cover a case with the following:

1. Package Details:

  1. What is the exact package/s? Search via: https://www.npmjs.com/
  2. Is it an official package?
  3. Version

2. Motivation:

  1. Is it a production or development dependency? (dependencies / devDependencies)
  2. Is usage limited for specific route/page/flow/.. ? or it can be used all over?
  3. Why are you adding/replacing/deleting this package? Provide a reason such as:
  • It is a tool that makes it easy to..
    manipulate arrays
    render head tags..
  • It is redundant since..
    it is not used
    it’s functionality can be achieved natively with X..
  • It is about to be deprecated..
    and the (official) replacement package is..
  • Updating it to version X allows..
    is more performant
    to handle something better ..

3. Impact:

The type of package must be classified by its dependence, purpose or use according to impact on the project.

Concrete examples per type:

  • [Core]: react-redux, axios, react-router-dom
  • [Tool]: react-helmet, node-sass
  • [Development]: eslint, prettier
  • [3rd Party]: rollbar, contentful

4. Size:

We would like to cover the performance impact of having this package in our bundle.

Find the size cost of using it with: https://bundlephobia.com/

  • Note: It is important to look at the size in Minified + Gzipped mode.

5. Trends:

A package is all about trend, popularity (stars 🌟+ forks 🍽), maintenance 🛠, issues ⚠️ and downloads.

Compare package above metrics over time using: https://www.npmtrends.com/

Make sure you add at least 3 packages to compare with, you can use the auto related packages links at the bottom.

6. Add Package Report in your PR

In your PR, add the following report (this is just an example of react package):

To generate this table you can use Tables generator online tool (File-> Load table -> Choose file..) — Make sure you add all the links to the NPM package, bundlephobia and npmtrends too.

If you liked the article, please click the 👏💚 below so other people will see it on Medium!

Tomer Ovadia

Written by

Ninja Software Engineer // Let’s talk about Code. https://github.com/otomer

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade