What is npm?
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 your company uses Node.js, you’ve probably heard engineers talking about NPM, Node.js packages, or a package manager. This article will explain these terms from a designer’s perspective, so you get a basic understanding of how packages work and why engineers use them.
Do you want to build stunning apps with npm components? Take npm components and import them to UXPin. Assemble your layout and push it to development. Discover UXPin Merge.
What is NPM (Node Package Manager)?
npm or Node Package Manager is an open-source repository of tools engineers use to develop applications and websites.
npm is two things:
- A repository for publishing open-source projects.
Simplified version: a digital storage and retrieval facility. - A command-line interface (CLI) for interacting with the repository.
Simplified version: a tool to communicate with the storage facility.
What is a Package Manager?
Before we can explain what npm package is, it’s essential to understand the idea of a package manager. Think of a package manager as a toolkit for developers.
Let’s say you’re building an application that uses Stripe for payments. A package manager installs all the code your product will need to communicate with Stripe and process payments.
Instead of writing all that code or copy/pasting it from Stripe’s docs, engineers simply enter a command, and the package manager installs the code dependencies they need from Stripe.
There are millions of these packages for everything you can think of to develop an application–like different types of search functionality, APIs, payments, authentication tools, maps, icons, hosting, and more.
You get public open-source repositories (like npm) where anyone can upload and install packages, as well as private package repositories with restricted access.
What is a Command Line Interface?
A command-line interface (CLI) is a text interface developers use to interact with computer programs. This CLI allows you to execute commands to run background operations necessary for software development.
In the case of npm, the CLI allows you to interact with the package registry. For example, engineers can use commands like npm install followed by the package name to install a specific package.
The npm Registry
The npm website is where engineers can search and learn about packages. This website is just a registry and doesn’t host the packages. Instead, engineers use platforms like GitHub, Packagecloud, AWS CodeArtifact, and others to host and distribute packages.
For example, if we look at the UXPin Merge CLI on NPM, it has displays GitHub as the repository and relevant link. Above that is the command to install the UXPin Merge CLI and its dependencies: npm i @uxpin/merge-cli. The “i” after npm is an abbreviation for “install.” So, typing npm install @uxpin/merge-cli would render the same result.
What are Dependencies?
Packages consist of other packages that engineers call dependencies–we know, confusing, right! These dependencies are packages of code that perform different tasks within the project.
For example, the UXPin Merge CLI uses Typescript and therefore requires the typescript package as a dependency. Typescript is just one of the 41 dependencies UXPin Merge CLI requires.
What are Devdependencies?
Looking at the UXPin Merge CLI’s dependencies, you’ll notice 41 Dependencies and 41 Dev Dependencies (also referred to as devDependencies–one word).
- Dependencies: The packages required to run a piece of software
- Dev Dependencies: The packages needed during the development phase only
Dependencies and devDependencies reside in a separate folder called node_modules, so your packages.json file and project code know where to find them.
What is the package.json File?
There’s a package.json file that provides its metadata and dependencies. When installing the project on your computer, npm will reference the package.json file to install the dependencies and devDependencies.
Instead of installing each dependency individually, you simply type npm install in the command line.
Hosting providers also use the package.json file to install the dependencies (excluding devDependencies) needed to run the project on its servers.
What is package-lock.json?
The package-lock.json specifies the exact version of the package used to build the project. This file locks the dependencies so that when the project is installed, it references the versions used during development rather than the latest release.
Engineers update packages regularly, often changing the way the package works. So, locking your dependencies ensures the project operates as intended.
How to use npm
Here are some common npm commands and what they do:
- npm init: Creates a package.json file for your project. If you’re building an application from scratch, npm init will be one of the first commands you use to include key project information. NPM will automatically update your package.json file whenever you install or remove packages.
- npm install: Installs all of the project dependencies in a package.json file.
- npm install <package-name>: Installs a specific package from the NPM registry and saves it to your node_modules folder. For example, npm install @uxpin/merge-cli will install the Merge CLI.
- npm install <package-name> –save: Installs an NPM package and adds it to the dependencies in your package.json file.
- npm install <package-name> –save-dev: installs an NPM package and adds it to the devDependencies
- npm uninstall <package-name>: Uninstalls a specific package from your project.
- npm doctor: Runs diagnostics on your npm installation to check if it has everything it needs to manage your packages.
- npm update <package-name>: Updates a specific package to the latest version.
These are just a few of the most common npm commands. You can find the complete list in the npm documentation.
Understanding npm as a Designer
npm is simply a toolkit comparable to plugins or app extensions for design tools. You don’t need to know the ins-and-outs of how packages are created, but it may be useful to know a thing or two about it.
First of all, some of code component libraries are shared as npm packages, such as MUI, Ant Design, etc.
How to find component libraries that are distributed as npm packages? Let’s say you search through Adele, UXPin’s library of publicly available Design Systems, for a component library that you can bring in to UXPin. You pick Shopify’s Polaris and notice that it is distributed via npm.
So, you go to the NPM site, look for Shopify’s Polaris, and find it.
UXPin with Merge technology allows you to import UI elements from component libraries via NPM packages. Then, you can use those elements to put together fully-functional prototypes.
UXPin Merge is usually being set up by a developer. But if you lack the development support, you can use our new tool – Merge Component Manager and manage UI components by yourself.
However, if you want to enhance your programming knowledge to collaborate with devs better, then learning about basic code principles (HTML, CSS, Javascript) and component libraries is far more valuable for designers.
Improve Collaboration With UXPin Merge
Merge enhances collaboration between design and development because designers and engineers work with the same component library.
Instead of having a UI kit for designers and code for devs, Merge syncs a repository to UXPin’s editor so design teams can build fully functioning prototypes using code components.
You can sync your company’s design system or a component library like MUI so that you only have to drag and drop UI elements to build interfaces. Request access to Merge.
