Javascript Libraries you should know in 2020 (Part 1)
Tags: javascript, productivity, codenewbie
Published: 2020-03-19 13:18:28

As we all know, Javascript is a very versatile programming language. At this moment, I am currently doing my TFG and I need to add some new features. I am using NodeJS with Nest at the backend and ReactJS at the frontend. Mainly, I searched two libraries: to format my dates and to make some graphics. 

After an intense search, I found date-fns and ChartJS. It was there when I realized that it could be interesting to make a post about very useful javascript libraries, and this is the post.

#**Libraries**

**I found 10 very useful libraries but, in comments, you can collaborate and add your favorite library. This post is only the first part, with 5 libraries**

###**ChartJS**
Simple yet flexible JavaScript charting for designers & developers
ChartJS allows you to visualize your data with simple graphics. It offers us to mix and match bar and line charts to provide a clear visual distinction between datasets.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mau4e7ahj1vvkcgj10d0.png)

You can check the source code:
{% github chartjs/Chart.js %}
ChartsJS offers us 8 chart types and each one is customisable and animable. In addition, is responsive. Redraws charts on window resize for perfect scale granularity.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7s6u2sa35p017ugqfhjf.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mlg3d5432chxzwnhay5x.png)

**Installation**
Npm
```
npm install chart.js --save
```

Using [CDN](https://cdnjs.com/libraries/Chart.js)

His website: https://www.chartjs.org

###**Date-fns**
Date-fns provides the most comprehensive, yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js.

```javascript
import { format, formatDistance, formatRelative, subDays } from 'date-fns'

format(new Date(), "'Today is a' iiii")
//=> "Today is a Thursday"

formatDistance(subDays(new Date(), 3), new Date())
//=> "3 days ago"

formatRelative(subDays(new Date(), 3), new Date())
//=> "last Friday at 7:26 p.m."
```

You can check the source code:
{% github date-fns/date-fns %}

Date-fns is modular so you can pick just what you need and stop bloating your project with useless functionality. It doesn't reinvent the wheel and uses the existing native type. Also, this library uses Functional Programming and works with pure function and always returns a new date instance instead of changing the passed one.

In addition to its tiny size, date-fns is fast.

**Installation**
Npm
```
npm install date-fns --save
```
Yarn
```
yarn add date-fns
```
His website: https://date-fns.org

###**HammerJS**
Hammer is a open-source library that can recognize gestures made by touch, mouse and pointerEvents. It doesn’t have any dependencies, and it’s small, **only 7.34 kB minified + gzipped!**

It’s easy to use, just include the library and create a new instance.

```javascript
var hammertime = new Hammer(myElement, myOptions);
hammertime.on('pan', function(ev) {
	console.log(ev);
});
```
You can check the source code:
{% github hammerjs/hammer.js %} 
Click in this [url](https://codepen.io/jtangelder/pen/ABFnd) if you want to check how it works 

**Installation**
Npm
```
npm install --save hammerjs
```
Yarn
```
yarn add hammerjs
```
Using [CDN](https://cdnjs.com/libraries/hammer.js/)

His website: https://hammerjs.github.io

###**Ramda**
Ramda is a practical functional library for JavaScript programmers.

There are already several excellent libraries with a functional flavor. Typically, they are meant to be general-purpose toolkits, suitable for working in multiple paradigms. Ramda has a more focused goal. They wanted a library designed specifically for a functional programming style, one that makes it easy to create functional pipelines, one that never mutates user data.

```javascript
import * as R from 'ramda'

const {identity} = R
R.map(identity, [1, 2, 3])
```

You can check the source code:
{% github ramda/ramda %} 
The primary distinguishing features of Ramda are:

- Ramda emphasizes a purer functional style. Immutability and side-effect free functions are at the heart of its design philosophy. This can help you get the job done with simple, elegant code.

- Ramda functions are automatically curried. This allows you to easily build up new functions from old ones simply by not supplying the final parameters.

- The parameters to Ramda functions are arranged to make it convenient for currying. The data to be operated on is generally supplied last.

Ramda provides us a playground to test it: https://ramdajs.com/repl/

**Installation**
Npm
```
npm install ramda
```
Using CDN: 
```html
<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js"></script>
```
His website: https://ramdajs.com

###**ParticlesJS**
A lightweight JavaScript library for creating particles.
Many tiny particles moving and interacting with each other or with you have a certain appeal. If you are ever in the situation where you need to work with many particles, Particles.js will serve you well. As is evident from the name, it is a JavaScript library that can help you create particle systems. Plus, it's lightweight, easy to use, and gives you a lot of control.

You can check the source code:
{% github VincentGarreau/particles.js %}

CodePen demo: http://codepen.io/VincentGarreau/pen/pnlso

###**Usage**

index.html
```html
<div id="particles-js"></div>

<script src="particles.js"></script>
```
app.js
```javascript
/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('particles-js', 'assets/particles.json', function() {
  console.log('callback - particles.js config loaded');
});
```

**Installation**
Npm
```
npm install particles.js
```
Using [CDN](http://www.jsdelivr.com/#!particles.js)
His website: https://vincentgarreau.com/particles.js/

You can check the second part [here](https://dev.to/alvaro_torresc/javascript-libraries-you-should-know-in-2020-part-2-4a41)

###Remember, as soon as posible, I will write the second part of this post, with another 5 libraries

- - -

_Follow me on [Twitter](https://twitter.com/torresc_alvaro) if you want to know about my future articles, projects or whatever_