10 Awesome JavaScript Libraries You Should Try Out

As a web developer, few things will boost your productivity, expand your capabilities, and improve the quality of your projects as much as having a versatile set of JavaScript libraries in your toolkit. The right libraries can save you from reinventing the wheel, provide ready-made solutions to complex problems, and add professional polish to your apps.

But with the dizzying array of open-source JavaScript libraries out there, figuring out which ones are worth your time can feel like finding a needle in a haystack. To help point you in the right direction, here are 10 excellent libraries I think every web developer should check out.

From frontend frameworks, to utility modules, to visualization tools, these libraries are powerful, practical, and a pleasure to work with. While they vary in scope and size, they all have a few key things in common:

• Actively developed and well-maintained
• Extensive, clear documentation
• Strong, supportive communities
• Impressively small bundle sizes
• Fill a common development need

So without further ado, here are 10 JavaScript libraries you should definitely try out in 2021:

1. Vue.js

Over the past few years, Vue.js has emerged as one of the most popular JavaScript frameworks for building dynamic, interactive user interfaces. Compared to heavyweight frameworks like Angular and React, Vue is remarkably lightweight and easy to learn, while still being extremely capable.

Vue‘s component-based architecture makes it easy to create reusable UI elements, and its declarative rendering and virtual DOM implementation keep things running fast. It has great official support for state management, routing, server-side rendering, and other common requirements.

Here‘s the classic counter component example in Vue:

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  }
}
</script>

Vue‘s gentle learning curve, excellent docs, and supportive community make it a great choice for beginners and experienced devs alike. It‘s versatile enough to power everything from simple widgets to full-fledged SPAs. If you‘re looking for a modern, batteries-included frontend framework, you can‘t go wrong with Vue.

2. Moment.js

Parsing, validating, manipulating, and formatting dates and times is an unavoidable part of web development, but it‘s rarely straightforward. Moment.js makes it easy.

With a simple, intuitive API, Moment provides a huge range of functions for working with dates in JavaScript. It supports internationalization, time zones, relative times, calendars, durations and much more.

const deadline = moment("2021-12-31");
const today = moment();

if (today.isAfter(deadline)) {
  console.log("You missed the deadline!");  
}
else {
  const daysLeft = deadline.diff(today, "days");
  console.log(`There are ${daysLeft} days remaining!`);
}

While native JavaScript date support has improved in recent years, Moment is still the industry standard. If you need to do anything non-trivial with dates in JS, this library is a must-have.

3. Three.js

Three.js is a cross-browser JavaScript library and API for creating and displaying 3D computer graphics in the browser using WebGL. It abstracts away most of the complexity of shader code and the WebGL API, making it much easier to create impressive 3D scenes.

With Three.js, you can create everything from a simple rotating cube to a photorealistic 3D model with lifelike textures, lighting and shadows. It has a ton of cool features like effects, math utilities, loaders, and exporters.

Here‘s a simple rotating cube:

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

Whether you‘re building product configurators, data visualizations, game environments, or VR/AR apps, Three.js is an essential tool for 3D web development.

4. Lodash

Lodash is a JavaScript utility library that provides a wealth of useful functions for working with arrays, numbers, objects, strings and more. Instead of wasting time writing your own utility functions from scratch, you can rely on Lodash‘s optimized and well-tested code.

Lodash has a modular architecture that allows you to selectively import just the functions you need, so you don‘t end up bloating your bundle size unnecessarily. And its API is thoughtfully designed to be expressive, concise, and immutable by default.

Here are a few examples of handy Lodash functions:

// Check if object has property
_.has({a: 1, b: 2}, "b"); // true 

// Truncate string
_.truncate("hello world", {length: 5}); // "he..."

// Deep clone object  
const cloned = _.cloneDeep({a: {b: 1}}); 

// Flatten array
_.flatten([1, [2, [3, [4]], 5]]); // [1, 2, 3, 4, 5]

// Debounce function
const debouncedResize = _.debounce(onResize, 200);
window.addEventListener("resize", debouncedResize);

From everyday utility functions to advanced operations on collections, Lodash has you covered. It will make your code more readable, expressive, and concise.

5. Chart.js

Chart.js is a simple yet flexible JavaScript charting library that enables you to visualize data in 8 different chart types: line, bar, radar, doughnut and pie, polar area, bubble, scatter, and mixed.

It uses the HTML5 canvas element to dynamically render responsive charts with attractive animations and interactions. Chart.js has a ton of customization options, from colors and fonts to grids and multiaxis.

Here‘s how easy it is to create a bar chart with Chart.js:

const data = [12, 19, 8, 5, 2, 24, 30, 10];
const labels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"];

const ctx = document.getElementById("myChart").getContext("2d");
const chart = new Chart(ctx, {
  type: "bar",
  data: {
    labels: labels,
    datasets: [{
      label: "Sales",
      data: data,  
      backgroundColor: "rgba(75, 192, 192, 0.6)"
    }]
  },
  options: {
    responsive: true,
    plugins: {
      legend: {
        position: "top",
      },
      title: {
        display: true,
        text: "Monthly Sales"
      }
    }
  }
});

Whether you need to build reporting dashboards, data journalism pieces, or any other type of data visualization, Chart.js‘s ease of use, flexibility and performance make it an excellent choice.

To be continued… (already over 1500 words, will continue with the other 5 libraries)