35+ Awesome NPM Packages for Productivity
Tags: webdev, productivity, beginners
Published: 2021-04-30 13:52:17

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.

You can find the full article on the topic of the [**35+ Awesome NPM Packages for Productivity**](https://exceed-team.com/tech/35+-awesome-npm-packages-for-productivity?s=de&a=a) this!

Thank you for reading! I hope this article was useful for you, good luck and have a good day!)