Borrowing Is Normal: Npm and How It’s Made Coding Easier

Npm, or node package manager (npm), is a useful tool that lets a coder take ready-to-use solutions for a project written in JavaScript. We explain how it can help drastically reduce development time by “borrowing from other coders’ minds.”

Some terms explained

Frontend and backend

These terms are akin to driving a car. Think about it: you interact with a steering wheel, buttons, check the speedometer, etc. All these external elements are what a front-end coder creates. It could be a website or mobile application interface. The frontend allows you to interact with the core.

The core of every car contains elements you don’t see, such as an engine or a gearbox. Every time you shift a lever or push a pedal, these elements react in order to make the car perform the required action. This is how the backend works. It makes the internal elements, like servers or databases, work so that all you see is the finished product — a website.

That’s exactly what happens when you click something on that website. A front-end element you interact with (a button) sends a signal to a database (the backend) and the website delivers what you need, be it sending an email or moving a map.

JavaScript

JavaScript is a programming language and is part of the core of the Word Wide Web (WWW) that works across all browsers. It’s basic for a lot of interactive elements on websites and applications, such as maps, gifs, currency exchange rates, or weather information updated in real-time. You can read more about JavaScript in this article.

Node.js

Node.js is a non-browser JavaScript execution environment. It allows you to write JavaScript code that uses the server itself — the physical machine that stores the data. Thus, with Node.js, JavaScript becomes a versatile tool both in the frontend and backend.

It can be compared to adding an attachment to a car. While it extends the functionality of the car, for example, putting on tracks or skis instead of regular wheels, the attachment doesn't make the car. (Discover more about Node.js in this article.)

What is npm?

Continuing with the analogy of assembling a car, we need other parts — seats, doors, windows, etc. Naturally, a carmaker doesn’t produce all these components. It may not even make any parts at all; just have them designed, book them, and then turn them into a finished product. It's the same thing you can do to assemble your program, except that you don't have to design every part of a project –  you just take and use it.

This can also be illustrated in a different way. When composing a painting of a person, an artist depicts various elements: head, eyes, shoulders, clothes, some jewelry, etc. A coder does the same – they create a piece that usually consists of a few elements that work together.

An artist typically paints all the elements themselves. But what if they could borrow some of them, let’s say, to paint hair or a ruff (large round collar)? They could find a library with Renaissance-era ruffs, somehow copy it and transfer it to their painting. They end up saving time and getting a better result than if they had done it themselves.

Getting back to JavaScript. Imagine you need to embed a map into a website so that a user could easily find a company’s address. You also need to make this map changeable so that a customer can zoom in or out. You can write code for this map yourself. But you can also take it from somewhere else if someone has already done it and is willing to share.

That’s almost what npm is: it’s a kind of library with ready-made solutions from other coders or a marketplace with ready-to-use pieces of code. These pieces are called packages.

Npm is:

• A library where all these packages are reposed
• A tool for the coder to find and use these packages

The tool is a command-line utility — software that is designed to run a machine — that helps you install the required package, and is embedded into Node.js by default.

In the case of the website map, you browse through specialized map libraries and, sometimes advised by other coders, pick out a suitable one. One of the most popular examples is Google Maps React.

All coders work this way: they use packages in order to not reinvent the wheel and save time and effort. Npm is used by 11 million programmers. The library contains more than a million solutions for many languages.

By the way, tools such as npm exist in other programming languages too, so when starting to learn a language, it’s also useful to study which similar capabilities the given language has. Another fact to keep in mind is that npm is not the only such tool for JS. A few years ago, Facebook created an analog to npm called Yarn to compensate for some of npm’s flaws.

Solutions from npm are open-source, which means they are free. They are all accessible through various websites that function as repositories, but not storage facilities. A repository functions as a catalog that you can browse to find a solution — such as an Amazon web page. In contrast, a repository is where package creators choose to store their packages — for example, an Amazon warehouse. The most popular storage for developers is GitHub. You can learn more about GitHub here. 

How does npm work?

An example with the artist and the ruff schematically explains the gist of npm. But it doesn’t accurately explain how a package is transferred. Our artist would copy an image of the ruff or cut it out and glue it to their work.

In the software world, it happens another way. You open the command-line utility and write a command to install the package you need. Npm takes the package and installs it into your project. You don’t need to copy and paste the code into the program. You only write a command that will install the code for the package you need. As a result, you use solutions that are stored elsewhere, allowing you to reduce the number of lines in your code.

What you can do with npm: some examples

Here are three decisions to illustrate the tasks you can solve with the help of npm.

• The package Moment.js provides the correct date and time formats and the way they are displayed. This is especially useful for products that serve clients across the globe.

• Eslint.js detects and corrects errors in your code. It's a great way to save time and avoid mistakes due to missed commas or quotes.
• Bcrypt.js is responsible for hashing passwords ― transforming them into a set of random characters and numbers. It's an increasingly important task as hacking and phishing attempts continue to rise over the past few years.

Is it difficult to use npm?

No. It’s rather simple.

First, you need to download Node.js. You go to the official website, choose a version you need (for Windows, MacOS, or whatever), download it on your computer, and install it with the help of instructions.

Second, you restart the terminal. Node.js is now operational.

Third, let’s check it out:
Open a code editor or a terminal you’re going to use — for example, Visual Studio ― and input the command:

node -v
npm -v

If everything is OK, after each of the commands you will see the versions of Node.js and npm you have downloaded. The versions may look like v14.15.3 and 6.14.9.

The next step is starting your JavaScript.

The number of commands you need to know to use npm depends on the specificity of your project. Basically, there are simple and short commands for:

• Installing packages you need
• Managing the packages you’ve installed

Looking for the required solution is not difficult, but may take some time. Most coders browse the following two sites: npmjs.com or nodejs.org. They may also ask for advice from coworkers or search other websites.

Another npm benefit: forget about updates or managing them

With time, the artist's painting fades. Software fades too, as it may become outdated and, as a consequence, insecure.

Parts of your projects may also become outdated, which you can avoid by regularly updating them. You can do this by cutting out existing pieces of code and replacing them with new ones. But copy-pasting requires effort, time, and risks you forgetting about it.

With npm, you can update a package through a command-line utility that gives you the ability to get your packages automatically updated. This is especially useful for large projects containing a lot of packages.

However, this begs the following question: are all updates necessary? Doesn’t renewal pose the well-known risk of updates causing operating systems to fail or function incorrectly? (You are right, partly.)

Any package your project is linked to is known as “a dependency”, as the project now depends on it. And yes, an update can make the ruff on the painting red, though it’s supposed to be white.

But there is good news too. All the dependencies in npm are contained in one file, so you can manage all the packages, defining which versions you want to use and which of them need to be updated. If something goes wrong, you know where the code is stored and fix them quickly.

In short

Npm is an example of how modern coding works. Сoders have found effective solutions for many typical tasks, put them together, and created tools to share. That’s of special convenience for newcomers in coding, as they may sometimes struggle with the invention of sophisticated solutions. The existence of more than a million ready-to-use decisions enables a faster, smoother, and much less stressful entry into the profession.

All you need to use tools like npm is an understanding of development basics and a few simple commands to install it. With a few clicks, you expand your palette for more creativity — a good way to free up time to become a true coding artist.