What are JavaScript packages and dependencies?

A question you're likely to have as you start to build things with JavaScript is "do I have to do all of this from scratch?!"

The good news: nope! One of the best things about the JavaScript ecosystem is that there are a lot of generous developers who are willing to share their code with you. Some do it for practice, others for notoriety (companies often release code publicly as part of a marketing effort), and some to demonstrate their skills to get jobs.

In most cases, it's likely that someone has already written the code that you need and has even shared it publicly! In this post, we're going to talk about how to find this code, but also, demystify some of the names that you might hear for this type of code.

What are dependencies?

It's likely that you've come across the term "dependencies," but may not be entirely clear what that means. A dependency is some third-party code that your application depends on. Just like a child depends on its parent, your application depends on other people's code.

A piece of code becomes a true dependency when your own application cannot function without it. For example, if you implement a feature in your application to send email and require a third-party dependency to help you perform the send, without it, sending email won't work in your app!

"Dependency" is a bit of an open-ended term. Making something a dependency of your app can happen in a lot of different ways. Typically, code officially becomes a dependency when you either copy and paste it from a third-party website or more commonly when you install a package.

What are packages?

The term "package" is used to describe code that's been made publicly available. A package can contain a single file or many files of code. Generally speaking, a package helps you to add some functionality to your application.

For example, a package created here at Clever Beagle is the seeder package. This package helps developers building their app with Pup to create test data in their application's database (often referred to as "seeding the database"). If you visit that link to the package's GitHub repository, you'll notice that it has seven files and one folder containing two other files.

Together, all of these files make up the package. A good analogy for this in the real-world is a folder containing a bunch of documents for purchasing a house. Your ownership of the house depends on those documents being signed and similarly, each of those documents depends on the other.

Where do packages live?

In the example above, I linked you to a GitHub repository. GitHub is a website for hosting code publicly and privately, using a "version control system" or "source control management" tool called Git. That's a fancy way of saying "a tool for keeping track of historical changes to your code." GitHub is a commercial website that uses Git as the underlying mechanism for transferring code to and from its website.

This isn't the only place the code for this package lives. It also lives on another website called NPM.

What gives? Well, this is where things get interesting! NPM (short for Node Package Manager) is a package manager and a package repository for JavaScript code.

There are two parts here: the first is the website where the packages are listed to the public which is the repository part. The second is the CLI (command line interface) that you install on your computer which is the manager part.

The website or repository part is used for searching and browsing the different packages that are available, and the CLI is used for installing, updating, and removing packages from your project.

What's the difference between GitHub and NPM?

This may be confusing. Does the code live in two places? Technically, yes! But for different reasons.

The code on GitHub is primarily used as a way for you to "backup" or host your code online. So, for example, if you move from one computer to another, you can easily download the code from GitHub without any issues, or, share it with a friend or colleague you work with.

By design, GitHub is also known as a "social coding" website, and has features that make it easy to bookmark or "star" repositories that you may be interested in later.

On NPM, we host a copy that's accessible via the NPM command line interface. This is known as "publishing to NPM." Once your code is published to NPM, other developers can install it in their project by running a command in their terminal like:

Terminal

npm install @cleverbeagle/seeder --save

When this is run from the same folder where the rest of your app code lives (often referred to as the "root" of your project), NPM will download the code for the @cleverbeagle/seeder package into a folder located at the root of your project called node_modules.

If you open this folder up, you're likely to see a lot of different folders, each one representing some package that you've either installed directly, or, one of the packages you depend on has installed as it's own dependency (one package can import another package in its own code).

This can be a bit confusing. To clarify, the @cleverbeagle/seeder package has its own dependency on another package called faker. When you run npm install @cleverbeagle/seeder, behind the scenes, NPM will also install the faker package as it's declared as a dependency of seeder.

Each folder contains the exact same code that the author of the package published to NPM (more often than not, this is identical to the list of files you see on GitHub).

Bringing it all together

So how does this all fit together?

Well, that's where your project comes in! Like we hinted at earlier, there are lots of packages that you can install in your application to add functionality. As an example, let's set up a simple project that relies on the NPM package express. Express is a popular JavaScript framework for creating web applications.

This requires that you've installed Node.js and NPM on your computer. These can be installed together by heading over to the Node.js website and downloading the "LTS" installer. After you've completed this, NPM will be installed on your computer and you can complete the steps below.

First, on your computer, open up your Terminal or Command Line and create a new project folder:

Terminal

cd ~ && mkdir app-example && cd app-example

This will change to the "root" of your machine (your home or user folder), create a new folder called app-example, and then change the current directory in the terminal to be app-example.

Next, we want to initialize our project to have a package.json file like we hinted at before. To make this quick, we can just force the creation:

Terminal

npm init -f

This will create a new file in your project called package.json and populate it with a basic structure that the NPM command line interface (CLI) will recognize. Next, we want to install the express package using the following:

Terminal

npm i --save express

This will download the code for the express package to your computer and store it in the node_modules directory at the root of your project (because this doesn't exist yet, NPM will automatically create it for you).

Next, we're going to create a file at the root of the project called index.js and add the following code:

index.js

const express = require("express");

const app = express();

app.get("/", (request, response) => {
  response.send("Hello!");
});

app.listen(3000, () => {
  console.log("Running the app at http://localhost:3000!");
});

This will create a very simple web application using Express. Once you've created this file, head back over to your terminal and type the following:

Terminal

node index.js

If everything works, you should see "Running the app at http://localhost:3000!" printed in your terminal. Next, we want to visit that URL in a web browser. Open up your web browser of choice and head to http://localhost:3000. You should see a "Hello!" printed on screen!

Wrapping up

There you have it! While there are a lot of different names used to refer to packages, when it comes to JavaScript they're not too difficult to use. Because NPM has existed for awhile and is so popular, you can find pretty much anything you need for your project on there.

Adding packages as dependencies in your project is a great way to speed up development, saving yourself a ton of time and stress of creating functionality from scratch. While there are times when "rolling your own" (developer jargon for implementing your own functionality instead of using a package) makes sense, more often than not, using a package and getting back to feature development is best.

Happy coding!