JS Libraries

JS libraries are collections of tools that can provide extra functionality options to your application with ease of use.
There are many to choose from and can be categorised in to different avenues of functionality, some of which I will share in the following post

Animation

AnimeJS

AnimeJS gives developers the ability to quickly implement animations in to their websites.
Their library revolves around the use of CSS classes, SVG usage and DOM manipulation yet abstracts these concepts in to JS Objects.
They have a functionality called staggering which creates a play loop of the animation, built in a fashion that avoids problems with overlapping animations and CSS changes that have a ‘follow through’ system.

Choreographer JS

Like Anime JS, this also uses CSS inline style changes abstracted to an JS object format.
The animation capabilities revolve more around scrolling and mouse movements but is perfectly capable of individual element animations.

You can also re-configure the animation settings to update how it plays on your website in response to user interaction.

Data Visualisation

Chart JS

Chart JS gives developers the ease of displaying data on the websites with various graphs, charts and diagrams.
These visualisation options are interactive, allowing you to highlight parts of the data and provides display options to render data analytical elements.

Below is an example of how using Chart JS

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>

D3 JS

Also a data visualisation tool, this library focuses more on DOM manipulation.
D3 uses entry and exit points as node attachments to append its capabilities.
It creates interactivity within your data through the use of dynamic properties.

This is expanded upon with transitions and transformations to CSS styles and SVG elements.

Styling

Granim JS

Everyone loves gradients!

Granim JS helps you create ambient backgrounds that use gradient styling and subtle image style transitions to create it’s smooth UI effect.

The functionality centres around state management, similar to React.
There are also event triggers to set off animation callbacks.

Multiple JS

This library sweetens the possibilities of sharing backgrounds across sections of your website.
You are able to use multiple image sources (akin to the example above) to render across your website components.
While it’s quite a niche toolset, it’s lightweight and easy to use. Thus providing a quick UI uplift that helps to breakdown your site in to its essential element.

Here is an example of using the MultipleJS API

//CSS
.selector {
  background-image: linear-gradient(white, black);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;  /* <- here it is */

  width: 100px;
  height: 100px;
}
<!--HTML-->
<link href="./multiple.css" rel="stylesheet">
<script src="./multiple.min.js"></script>
<div class="item">Content</div>
<div class="item">Content</div>
<div class="item">Content</div>
// JS
var multiple = new Multiple({
  selector: '.item',
  background: 'linear-gradient(#273463, #8B4256)'
});

Utility

TaffyDB

In the world of databases, it’s best we stick to tried and true but if an alternative offers better integration with your languages of choice and therefore more intuitive options for querying your database,
then why not use it?

Taffy offers strong compatibility with DOM libraries and server-side JS

// Create DB and fill it with records
var friends = TAFFY([
	{"id":1,"gender":"M","first":"John","last":"Smith","city":"Seattle, WA","status":"Active"},
	{"id":2,"gender":"F","first":"Kelly","last":"Ruth","city":"Dallas, TX","status":"Active"},
	{"id":3,"gender":"M","first":"Jeff","last":"Stevenson","city":"Washington, D.C.","status":"Active"},
	{"id":4,"gender":"F","first":"Jennifer","last":"Gill","city":"Seattle, WA","status":"Active"}	
]);

// Find all the friends in Seattle
friends({city:"Seattle, WA"});

// Find John Smith, by ID
friends({id:1});

// Find John Smith, by Name
friends({first:"John",last:"Smith"});

Cleave JS

Cleave JS implements data formatting for any inputs you have on your website.
This will almost always be forms.
So imagine your database expects data to be received in a certain way and without any validation or user input interception, you can run in to many a problem to capture data in the best way.
Cleave JS adds the ease of auto-formatting your data and this happens live while the user is interacting with your website so thats a plus for UI/UX.

Summary

There’s so many tools available to developers and i’ve only listed a small few that are just JS-related.
If there’s anything that you feel could add that extra functionality you need and a library out there provides for those needs, then by all means don’t hold back. The world is your oyster.