Skip to content

Common libraries

Almost every time you develop something using JavaScript you will end up using a bunch of different libraries.

Often there are multiple options to choose from and picking the correct one might not be the easiest task. Sometimes you might not even know where to start looking from. After all the library names aren't always that descriptive.

This section introduces some of the commonly used libraries and those that might help you in your assignments.

A word about performance

  • Add libraries --> Bigger code footprint --> Performance affected
  • But... Ease of library usage vs. time spend coding same things with native JS.
  • jsPerf (https://jsperf.com)
    • jsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks.

Fetching external resources

Axios

Axios is a Javascript library used to make HTTP requests from node.js or XMLHttpRequests from the browser that also supports the ES6 Promise API.

It provides a single API for dealing with XMLHttpRequests and node’s http interface. Besides that, it wraps the requests using a polyfill for ES6 new’s promise syntax. Almost any dynamic project you make needs to interface with a RESTFUL API at some point and using Axios is a simple way to do so.

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

More details: https://github.com/axios/axios

Fetch API

The Fetch API is a simple interface for fetching resources. Fetch makes it easier to make web requests and handle responses than with the older XMLHttpRequest, which often requires additional logic (for example, for handling redirects).

fetch('examples/example.json')
.then(function(response) {
  // Do stuff with the response
})
.catch(function(error) {
  console.log('Looks like there was a problem: \n', error);
});

More details: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Immutable

Immutable data cannot be changed once created, leading to much simpler application development, no defensive copying, and enabling advanced memoization and change detection techniques with simple logic. Persistent data presents a mutative API which does not update the data in-place, but instead always yields new updated data.

Immutable.js provides many Persistent Immutable data structures including: List, Stack, Map, OrderedMap, Set, OrderedSet and Record.

These data structures are highly efficient on modern JavaScript VMs by using structural sharing via hash maps tries and vector tries as popularized by Clojure and Scala, minimizing the need to copy or cache data.

Why? Read the following article: https://medium.com/@dtinth/immutable-js-persistent-data-structures-and-structural-sharing-6d163fbd73d2

Usage example 

const { Map } = require('immutable');
const map1 = Map({ a: 1, b: 2, c: 3 });

// Modifying a value yelds a new map
const map2 = map1.set('b', 50);

map1.get('b') + " vs. " + map2.get('b'); // 2 vs. 50

More details: https://immutable-js.github.io/immutable-js/

Lodash

Lodash makes JavaScript easier by taking the hassle out of working with arrays, numbers, objects, strings, etc.

Lodash’s modular methods are great for:

  • Iterating arrays, objects, & strings
  • Manipulating & testing values
  • Creating composite functions

Usage example 

const _ = require('lodash');

// Creates an array of unique values, in order, from all given arrays
_.union([2], [1, 2]);
// => [2, 1]

// Creates an object composed of keys generated from the results of running each element of collection thru iteratee.
_.groupBy([6.1, 4.2, 6.3], Math.floor);
// => { '4': [4.2], '6': [6.1, 6.3] }

More details: https://lodash.com/

Moment.js

Moment.js provides a wrapper for the native JavaScript date object. In doing this, Moment.js extends the functionality and also accounts for several deficiencies in the object.

Parsing is notably unpredictable with native date. Moment.js has a very flexible and advanced parser that allows a huge range of functionality.

var a = new Date('01/12/2016'); //December 1 2016 in DD/MM/YYYY format
//"Tue Jan 12 2016 00:00:00 GMT-0600 (Central Standard Time)"

moment('01/12/2016', 'DD/MM/YYYY', true).format()
"2016-12-01T00:00:00-06:00"

But why? https://medium.com/@thejasonfile/a-moment-with-moment-js-c5d097d2b61c

More details: https://momentjs.com/

Semantic-UI / Bootstrap / Material UI

  • UI frameworks
    • Ready made components with styles and actions
    • Quickly prototype your ideas or build your entire app

**Note that there usually is a different library for each framework you are developing with. **

For example with Bootstrap:

Vuetify offers a great selection of components and ready made features.

It is really simple to use and offers great documentation with examples.

!vuetify showcase

Read more