DEV Community

Cover image for 73 Awesome NPM Packages for Productivity πŸš€πŸŒ±
Madza
Madza Subscriber

Posted on • Edited on • Originally published at blog.madza.dev

73 Awesome NPM Packages for Productivity πŸš€πŸŒ±

Nowadays in our busy schedules and tight deadlines, it's critical to choose tools that increase productivity.

Here I have compiled a list of some of my favorite NPM packages. I've also sorted them into categories, so the information is more structured and it's easier to navigate.

Surely, you don't have to install and learn them all. In most cases picking one from each category should be enough. I wanted to provide alternatives, so each reader can find something. Enjoy!


πŸ’» Frontend frameworks

1.React

React uses a virtual DOM to manage sections of a page as individual components, allowing you to refresh a component without refreshing the entire page. Often used with React-dom and React-router-dom.

2.Vue

Vue was built by combining the best approaches from React and others, focusing on features that made writing Web apps faster, easier, and more pleasant. Great documentation. Often used with Vue-router and Vuex.

3.Svelte

Svelte is a new way to build web applications. It's a compiler that takes your declarative components and converts them into efficient JavaScript that surgically updates the DOM.

Other notable frameworks include Angular, Ember, Backbone, Preact and many others. You can do wonders with any of them, the golden rule is to learn modern JS (ES6 and above) well before.

🎨 Styling frameworks

4.Bootstrap

World’s most popular framework for building responsive, mobile-first sites. Intuitive and powerful, tho relatively bulky in size. Many modern UI kits are based on it like React Bootstrap or Reactstrap.

5.Tailwind

A low-level, utility-first CSS framework for rapid UI development. Built from the ground-up to be super customizable.

6.Styled-components

CSS-in-JS tool that bridges the gap between components and styling, offering numerous features to get you up and running in styling components in a functional and reusable way.

Other great solutions include Foundation, Bulma, Materialize and Ant Design. If you prefer to write Vanilla CSS, you can use some CSS extension language like SASS, to extend its features.

πŸ”² Backend frameworks

7.Express

Fast, unopinionated, minimalist web framework for Node.js. It is relatively minimal with many features available as plugins. Often referred to as a standard server framework for Node.js.

8.Hapi

Hapi was originally used for the Express framework. With Hapi you can build powerful, scalable applications, with minimal overhead and full out-of-the-box functionality.

9.Sails

Sails is the most popular MVC framework for Node.js with support for the requirements of modern apps: data-driven APIs with a scalable, service-oriented architecture.

Same as for frontend frameworks, there are lots of backend alternatives as well like Adonis and Koa. Pick one that suits your needs and learn it well.

πŸ”— CORS and requests

10.Cors

Node.js middleware for providing a Connect/Express middleware that can be used to enable cross-origin resource sharing with various options.

11.Axios

A promise-based HTTP client for the browser and Node.js. It's easy to set-up, intuitive, and simplifies a lot of stuff compared to JS built-in Fetch API.

12.Body-parser

Body parsing middleware, that extracts the entire body portion of an incoming request stream and exposes it on req.body as something easier to interface with.

🧩 API services

13.Restify

A Node.js web service framework optimized for building semantically correct RESTful web services ready for production use at scale. Restify optimizes for introspection and performance.

14.GraphQL

A query language for APIs and a runtime for fulfilling those queries with your existing data. Provides a complete description of the data in your API, gives clients the power to ask for exactly what they need.

🀝 Web sockets

15.Socket.io

Socket.IO enables real-time, bidirectional, and event-based communication. It works on every platform, browser, or device, focusing equally on reliability and speed.

16.WS

Simple to use, fast, and thoroughly tested WebSocket client and server implementation. A great, less abstract, and bare alternative to Socket.io.

✍ Loggers

17.Morgan

Specifically, an HTTP request logger, storing HTTP requests and giving you concise insight into how your app is being used, and where there could be potential errors.

18.Winston

A logger for just about everything with support for multiple means of transport. Has been out there for longer than Morgan, it also has a bigger community of maintainers and more downloads.

πŸ’Ύ Database tools

19.Mongoose

Mongoose is a MongoDB object modeling tool designed to work in an asynchronous environment. Mongoose supports both promises and callbacks.

20.Sequelize

Sequelize is a promise-based Node.js ORM for Postgres, MySQL, MariaDB, SQLite and Microsoft SQL Server. It features solid transaction support, relations, eager and lazy loading, read replication and more.

πŸ”“ Auth tools

21.Passport

Passport's purpose is to authenticate requests through an extensible set of plugins known as strategies. You provide Passport a request to authenticate, and Passport provides hooks for controlling what occurs when authentication succeeds or fails.

22.Bcrypt

A library to help you hash passwords. Bcrypt is a password-hashing function designed by Niels Provos and David Mazières, based on the Blowfish cipher and presented at USENIX in 1999.

23.JSONWebToken

JSON Web Tokens (JWT) are an open, industry-standard RFC 7519 method for representing claims securely between two parties. This package allows you to decode, verify, and generate JWT.

πŸ”§ Config modules

24.Config

Settings are stored in configuration files within your application and can be overridden and extended by environment variables, command line parameters, or external sources.

25.Dotenv

Zero-dependency module that loads environment variables from a .env file into process.env.

πŸ“ƒ Static site generators

26.Gatsby

A modern site generator that creates fast, high-quality, dynamic React apps, from blogs to e-commerce sites to user dashboards. Great plugin ecosystem and templates.

27.NextJS

NextJS first and foremost supports server rendering as well as statically generated content. You can also define serverless functions as API endpoints.

28.NuxtJS

NuxtJS is basically a NextJS alternative in Vue's ecosystem. NuxtJS's goal is to make web development powerful and performant with great developer experience in mind.

🌟Templating languages

29.Mustache

Mustache is a logic-less template syntax. It can be used for HTML, config files, source code - anything. It works by expanding tags in a template using values provided in a hash or object.

30.Handlebars

Uses a template and an input object to generate HTML or other text formats. Handlebars templates look like a regular text with embedded Handlebars expressions. Handlebars is largely compatible with Mustache templates.

31.EJS

EJS is a simple templating language that lets you generate HTML markup with plain JavaScript with a simple syntax, speedy execution, and easy debugging. EJS has a large community of active users, and the library is under active development.

πŸ“· Image processing

32.Sharp

A great module to convert large images in common formats to smaller, web-friendly JPEG, PNG and WebP images of varying dimensions.

33.GM

Thanks to the Node.js module GM you can use two popular tools for creating, editing, composing, and converting images - GraphicsMagick and ImageMagick directly from within your code.

34.Cloudinary

Dedicated module to ease work with cloud service that offers a solution to a web application's entire image management pipeline.

πŸ“… Date formatting

35.DayJS

DayJS is a fast and lightweight alternative to MomentJS (in maintenance mode since September, 2020). Uses similar API - if you have used MomentJS, you already know how to use most of DayJS.

36.Luxon

If you like another light-weight alternative, with a slightly different API, Luxon might be the right choice for you.

πŸ§™β€β™‚οΈ Data generators

37.Shortid

Creates amazingly short non-sequential url-friendly unique ids. Perfect for url shorteners, DB ids, and any other ids.

38.Uuid

Handy tiny package to quickly and easily generate more complex universally unique identifiers (UUIDs).

39.Faker

Useful package for generating massive amounts of fake data in the browser and Node.js.

βœ… Validators

40.Validator

Handy library of string validators and sanitizers. Lots of useful methods available, like isEmail(), isCreditCard(), isDate() and isURL().

41.Joi

Powerful schema description language and data validator for JavaScript.

πŸ“§ Forms and emails

42.Formik

Formik is a popular open-source form library for React and React Native. It's easy to use, declarative, and adaptive.

43.Multer

Multer is a Node.js middleware for handling multipart/form-data, which is primarily used for uploading files.

44.Nodemailer

Nodemailer is a module for Node.js applications to allow easy email sending. The project got started back in 2010, today it is the solution most Node.js users turn to by default.

πŸ§ͺ Testing

45.Jest

Jest is a delightful JavaScript Testing Framework with a focus on simplicity. It allows you to write tests with an approachable, familiar, and feature-rich API that gives you results quickly.

46.Mocha

Mocha is a JavaScript test framework, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting while mapping uncaught exceptions to the correct test cases.

πŸ’« Web scraping and automation

47.Cheerio

Cheerio is widely used for web scraping work and sometimes in automating the tasks. It pretty quick and fast as it is based on jquery. Cheerio wraps around Parse5 parser and is capable enough to parse any type of HTML and XML documents.

48.Puppeteer

Puppeteer is widely used for automating browser tasks and can only work with google chrome headless browser i.e chromium. Puppeteer can also be used for web scraping tasks. It is much powerful and feature-rich compared to the Cheerio module.

🌷 Linters and formaters

49.ESLint

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code. ESLint is completely pluggable, every single rule is a plugin and you can add more at runtime.

50.Prettier

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

πŸ“¦ Module bundlers and minimizers

51.Webpack

A well-known and powerful module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

52.HTML-Minifier

Lightweight, highly configurable, and well tested Javascript-based HTML compressor/minifier (with Node.js support).

53.Clean-CSS

Fast and efficient CSS optimizer for Node.js platform and any modern browser. Highly configurable and lots of compatibility modes.

54.UglifyJS2

JavaScript parser, minifier, compressor and beautifier toolkit. It can take multiple input files and supports lots of configuration options.

πŸ‘¨β€πŸ’» Process managers and runners

55.Nodemon

Simple monitor script for use during the development of a Node.js app. Useful for development, since it’s incredibly easy to restart and has file-watching enabled and baked in by default

56.PM2

Production process manager for Node.JS applications with a built-in load balancer. More comprehensive and better for production. Gives you lots of parameters to tune/act on.

57.Concurrently

Simple and straight to the point - useful tool for running multiple commands concurrently.

🚧 CLI and debuggers

58.Commander

Provides a fluent API for defining various aspects of CLI applications like the commands, options, aliases and help. Simplifies the creation of applications for the command line.

59.Inquirer

An easily embeddable and beautiful command-line interface for Node.js. Provides awesome inquiry session flow.

60.Chalk

Chalk is an extremely simple library, created for one, simple purpose - styling your terminal strings.

61.Debug

A tiny JavaScript debugging utility. Simply pass a function the name of your module, and it will return a decorated version of console.error for you to pass debug statements to.

🧰 Utilities

62.Lodash

A modern JavaScript utility library delivering modularity, performance & extras. Exposes many useful methods on JavaScript arrays, objects and other data structures.

63.Underscore

Underscore provides lots of commonly used functional helpers as well as more specialized goodies: function binding, javascript templating, creating quick indexes, deep equality testing, etc.

64.Async

Async is a utility module that provides straight-forward, powerful functions for working with asynchronous JavaScript.

πŸ”© System modules

65.Fs-extra

Fs-extra contains methods that aren't included in the vanilla Node.js fs package like copy(), remove(), mkdirs().

66.Node-dir

A module for some common directory and file operations, including for getting an array of files, subdirectories, and methods for reading and processing the contents of files.

67.Node-cache

A simple caching module that has set, get and delete methods and works a little bit like memcached. Keys can have a timeout (ttl) after which they expire and are deleted from the cache.

🧷 Others:

68.Helmet

Helps you secure your apps by setting various HTTP headers. It's Connect-style middleware, which is compatible with frameworks like Express.

69.PDFKit

DFKit is a PDF document generation library for Node and the browser that makes creating complex, multi-page, printable documents easy.

70.CSV

Comprehensive CSV suite combining 4 well-tested packages to generate, parse, transform and stringify CSV data.

71.Marked

Low-level compiler for parsing markdown without caching or blocking for long periods of time.

72.Randomcolor

A tiny script for generating attractive random colors. You can pass an options object to influence the type of color it produces.

73.Pluralize

This module uses a pre-defined list of rules, applied in order, to singularize or pluralize a given word. There are many cases where this is useful, such as any automation based on user input.


Hope you did find some useful packages that work for you!
Thanks for reading through and follow for more!

Top comments (58)

Collapse
 
shakilahmed007 profile image
Shakil Ahmed

Exciting list! πŸš€ Curious to explore how these NPM packages can elevate productivity

Collapse
 
madza profile image
Madza

Thanks for checking out this piece! It was one of the first ones I did! πŸ‘πŸ’―

Collapse
 
eomm profile image
Manuel Spigolon

I would like to share fastify as "backend frameworks" and pino for logging. Both worth a try if you don't know them and are ready for production

Collapse
 
momin profile image
Md Abdul Momin

I will go with NestJs!

Collapse
 
madza profile image
Madza

Thanks for the input! πŸ™β€

Collapse
 
bias profile image
Tobias Nickel

Also, a tool I love: json-server, a rest API for json files.

And I can't resist to mention trdb my in new json file database, similar to lowDB, that I developed last weekend for rapid prototyping. it:

  1. deliberatly has few very few features to be easily learned and later replaced with a real db.
  2. all APi async, to have very little codechange when change to a real db.
  3. always work with copies of objects inside the db and outside, to avoid sideeffects and (again) easily migrate to real db.
Collapse
 
ozaytsev86 profile image
Olek

Hi, did you try mockoon.com/?

Collapse
 
bias profile image
Tobias Nickel

mocknoon is looks good, with trdb I try to hit a different audience.

As I understand it, frontend or api consumer can test against this mock servers. A little like json-server but for defining specific api responses instead of the rest-json-file database.

with trdb the backend develoer can instandly start implementing the backend, including sessions, authentication, permissions,... and later it is trivial to change the code to a sophisticated db, with hopefully minimal code changes.

I developed it, to study oauth, implement an authenticatio service (login with), an app that the user want to login, and an api service, that the user grand the app access to.

And for these studying purpose, I figured a json file db module that bahave like a real db, would be awesome.

Collapse
 
madza profile image
Madza

Thanks for the additional input! πŸ™β€

Collapse
 
dualyticalchemy profile image
⚫️ nothingness negates itself • Edited

keystonejs, paseto, cypress, pryjs, hy-res, plato and es6-plato, ramda, clusterluck, loopback, got, awilix, node-red, node-coap, karma and protractor have cool reporters for html, static code analysis for css specificity, etc., use nvm or n, mongoose for mongodb, mongoui on github, bedquilt for postgresql, niceware, leaflet maps

Collapse
 
madza profile image
Madza

That's a nice addition, thanks for the input! πŸ™β€

Collapse
 
dualyticalchemy profile image
⚫️ nothingness negates itself

welcome

Collapse
 
crimsonmed profile image
MΓ©dΓ©ric Burlet

Amazing list but I was surprised to not see Material UI.\

GitHub logo mui / material-ui

MUI Core: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.

They also have an awesome website about best UX for users.

material.io/

Also I would add Yargs to the CLI section as it is the defacto to parse arguments:

GitHub logo yargs / yargs

yargs the modern, pirate-themed successor to optimist.

I would have also thought for cli about Ocliff

GitHub logo oclif / oclif

CLI for generating, building, and releasing oclif CLIs. Built by Salesforce.

Collapse
 
momin profile image
Md Abdul Momin

I'm also, this list can be increased with some other important tools and library, should be a list of πŸ’―!

Collapse
 
madza profile image
Madza

Thanks for the input! πŸ™β€ These are great, too βœ¨πŸ˜‰

Collapse
 
jchlu profile image
Johnny C-L

Both 11ty and RedwoodJS deserve to make any 2020 list IMHO.

Collapse
 
madza profile image
Madza

Haven't taken that much of a deep dive on them, yet πŸ˜‰
Thanks for the addition! πŸ™β€

Collapse
 
yatki profile image
Mehmet YatkΔ± • Edited

Maybe this one too :D

GitHub logo lisanjs / lisan

🌈 i18n, Reimagined! πŸš€A blazing fast and super small i18n library for Javascript

Lisan.js
i18n, Reimagined

A blazing fast and super small i18n library for Javascript

NPM Status NPM Downloads Coverage


Website

Installation Β· API Β· Guides & Tips Β· Examples


Introduction

Lisan (Turkish: lee Β· sun) is an i18n library.

It provides all essential tooling to have multiple languages in your applications and format numbers, currencies, ordinals & dates based on locale.

Lisan's biggest difference compared to traditional i18n libraries is taking advantage of ES6 Template Literals and using them to generate functions to interpolate strings.

Lisan.js

Check out our website to learn more!

Highlights

Example Projects

Here you can find some example projects developed by Lisan to quickly get started.

  1. Hello World (Node) - Purpose of this example to…




πŸš€πŸ––

Collapse
 
madza profile image
Madza

Awesome 🀩 Did you build it yourself? πŸ‘€

Collapse
 
yatki profile image
Mehmet YatkΔ±

Yes :))) Thank you :)

Collapse
 
estruyf profile image
Elio Struyf

I would definitly add Playwright to the list. It's from the same team which originally created Puppeteer.

Collapse
 
madza profile image
Madza

Thanks for the input! πŸ™β€

Collapse
 
estruyf profile image
Elio Struyf

No worries, thank you for the list!

Collapse
 
gpingfeng profile image
Gopal

Hello, may I translate your article into Chinese? I would like to share it with more developers in China. I will give the original author and original source.

Collapse
 
madza profile image
Madza

Sure, go right ahead πŸ™β€

Collapse
 
gpingfeng profile image
Gopal

Thanks

Collapse
 
joachimzeelmaekers profile image
Joachim Zeelmaekers

Fantastic list. Maybe consider using react-hook-form.com/ for forms. They also have an amazing form builder in their website which handles validation and generates the boilerplate code. react-hook-form.com/form-builder

Collapse
 
madza profile image
Madza

Thanks for the input πŸ™β€