Npm basics and useful packages
When you start working with any framework there are many nuances that make you feel overwhelmed. In this article, I’m going to explain how to use one of the most important parts of the JavaScript family of frameworks, the package manager, and also give you some awesome package suggestions so you can use them in your next project.
Many programming languages use packages to build and scale websites, software, and other digital products. These packages allow engineers to extend a project’s functionality without writing and maintaining additional code.
If you use Node.js, you’ve probably heard about NPM, which is the package manager for projects using javascript as the main language. You can look for and find packages to use in your project on the npm site and there you will find instructions to install them.
Now before selecting a package there are several factors that you have to take into account. First, you need to understand what you want to accomplish, that way it will be easier to look for a package that fits your needs. Second, you have to check if the package that is the most likely to get selected is compatible with your framework and the versions that you have in the code, sometimes the packages only support a specific version of node and that can cause problems, especially with older codebases. Third, you have to check how well-supported the package is, you can look at the last time it was updated, if there are any known vulnerabilities, how many downloads it has, and how well-known in the community that package is. This will save you a lot of headaches when it comes to implementing your package in your application, but sometimes the only package you find for the functionality that you need was updated 5 years ago, in that case just be aware that you might encounter some issues and that there could be little to no support on that package.
Now that we have a clear understanding of what packages are, let’s talk about where they are declared to be used in the application. This is done in a file called package.json, this file contains all the packages that are going to be used in the application and the environments that they are going to be available in, some packages are only needed for testing, others just for development, and others have to be available for the application regardless of the environment. In this file you can also specify the version of the package that you need, this is a highly recommended practice for a production application because you don’t want to break your code because when it was deployed to production a new version of a package introduced a code-breaking change without you even noticing. There are also many other things that you can configure in the package.json file but we are not going to talk about them here.
After you have all your packages in your package.json file you have to run the command npm install to download the code into your project, that code will be saved in the node modules folder, and from there will be available for you to use. When the installation is finished, then a new file will be created in your root directory called package-lock.json, this file will contain all the packages installed, not only the ones you selected but all the dependencies for every package in your application. This file is a great source to see which package versions you installed for your project and put it in the package.json file to “lock them in”. One important aspect to remember about the lock file is that it should never be modified by hand, if you want a specific version of a package to be installed in your application you should specify it in the package.json file and run the install command again.
Now that you know the basics of packages, I’m going to give you some useful ones for you to consider using on your current or future projects.
- AGgrid: This package is a fully-featured and highly customizable data grid. You can use it to create very robust tables to display your data with a lot of features like customizable filters, selective ordering, and a search bar
- Fontawesome: Font Awesome is a suite of pictographic icons to put easily scalable vector graphics on your websites. There are many modules to these icons but the most popular ones are @fortawesome/react-fontawesome and @fortawesome/free-solid-svg-icons.
- Material UI: It includes a collection of components that are ready for use in production right out of the box. The main package is @mui/material
- Tippy: is the complete tooltip, popover, dropdown, and menu solution for the web. It provides the logic and optional styling of elements that “pop out” from the flow of the document and float next to a target element.
- AGcharts: is a fully-featured and highly customizable charting library to simplify their inclusion in your websites.
- Dayjs: is a library that parses, validates, manipulates, and displays dates and times for modern browsers.
- Finalform: this package will let you create forms and customize mostly every aspect of them, from callbacks for any action that happens in the form, to complex validations for the fields.
- Formik: Similar to final form it will let you create highly customizable forms with mostly the same functionality.
- I18next: is a very popular internationalization framework for browsers, it can also be used as a central location for all the text that goes in your application (also known as single language).
- Lodash: a package thwith manyther packages in it for manipulating different things in your application, like arrays or files.
- Quill: A highly customizable rich text editor for your websites.
- Styled components: A way to wrap and extend CSS functionality into react components. It allows you to pass values as props and use conditionals to select the CSS code.
- Yup: This package can be used with any form package to create validation schemas, static or dynamic, for the fields in the form.
- React-chartjs-2: Another charting library to create charts in an easy way
- React-beautiful-dnd: This library allows you to create draggable components in your react application. It is created by Jira and is very useful to create boards for working with teams.
Thank you for reading all the way through, I hope you found this article useful and that some of the packages described will help you to create or improve your applications. If you liked the article give it a clap and check out my other articles.
