21 Popular JavaScript Libraries Every Web Developer Should Know
Tags: webdev, programming, javascript, tutorial
Published: 2021-04-18 21:08:57

The JavaScript ecosystem is huge and keeps fostering. Tons of libraries, frameworks and tools are being coded up and deployed in projects to make dynamic websites. While some are fizzling in demand and use, others are growing more popular.

Below are 21 libraries/frameworks all JavaScript developers consider for their project.

N/B: You don't need to know all of these. In fact, knowing just React or Vue is enough to build full websites.




- ANGULAR JS

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vy3o67imxmhk3vhsro48.jpg)

 [Angular](https://angularjs.org/)  is one of the oldest JavaScript libraries till date. Wait, Angular is actually a Framework, not a Library. It allows you create single-paged, client-side web applications. Angular is written in TypeScript and backed by Google.
Some of the popular companies who use Angular are Google (obviously), PayPal and iTunes.

- VUE JS


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

Very similar to React,  [Vue](https://vuejs.org/)  is a front-end framework used to create single-paged applications with the popular component-based architecture. The upside with using Vue is that you write smaller amount to code compared to other UI libraries. Vue JS is growing stronger by the day, and is getting adopted at a quick rate.


- UNDERSCORE JS


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9taytn1v7noffxrzllna.jpg)

 [Underscore](http://underscorejs.org/)  is a lower level JavaScript library. Lower level in that it’s very close to vanilla JavaScript. All it does is provide you with some helpers and tools to create web applications faster.

- BABYLON JS

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

I have a confession to make; I really love the name of this particular library. 
For the game developers, this name might not be a new one.  [Babylon](babylonjs.com)  is a full fledged 3D video game engine for creating complex and web-based 3D Video games.


- REACT 


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

This is probably the one you were all waiting for.  [React](https://facebook.github.io/react/)  is one of the most popular JavaScript library in existence. You see those similar and cool looking buttons, or perhaps those nice looking navigation bars, or some cool modals you just can’t stop marvelling at?
Chances are they were all made with React. React is a component-based UI library which allows you create reusable UI elements (components) for your website.  It is used by many companies, including Facebook, of course.

For those of you looking to learn React, [HTML to React](https://gumroad.com/a/834147443) is a brilliant course to go from knowing just HTML to knowing React.


- EMBER


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

[Ember](https://emberjs.com/)  is a powerful JavaScript framework which helps developer to create websites without having to worry about the nitty-gritty of the process.
It includes everything you need to create rich UIs and combine them to form a powerful and highly scalable website.

- BACKBONE JS


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cxi71juwppnisfxz0tls.jpeg)

Another cool name!
 [Backbone.js](s
http://backbonejs.org/)  is a very simple and straightforward JavaScript library and framework. Its biggest distinguishing feature is the fact that it can fit within a single JavaScript file. Backbone is a great option for those looking to build simple websites.

- CLIPBOARD JS


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ivkt0azu4zyzrh8qabk.jpg)

As its name already implies,  [Clipboard](https://clipboardjs.com/)  allows you copy data from your site right off the bat! No need to install any additional dependency. 


- BABEL


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

Some of us may be already be aware of the story of the tower of Babel in the bible. Creating a language division amongst the builders to cut of communication and create discordance. 
Well this tool is the solution to that problem, in the context of JavaScript. When creating code, browser compatibility is open an issue to consider. Older web browsers tend to be dropped in favour of newer ones, but not all users update. There are still machines and devices out there that are running old versions of web browsers.
Babel is a JavaScript compiler which compiles your JS code to ES5 compliant nature. This means your code can run on new browsers such as Edge as well as older ones, such as IE 9.

- SVELTE


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

Svelte is a complete new approach to building user interfaces. While traditional frameworks like React and Vue are browser based, Svelte shifts that work into a compile step that happens when you build your app.

- LETTERING JS


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

 [Lettering](http://letteringjs.com/)  is an interesting JavaScript library for texts. You can style and layout individual texts on your page, including implementing some cool transitions and animations. Lettering JS is a jQuery plug-in. Hence, it requires jQuery to work.


- CHARTIST JS


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

*Ah, here is something for the data analysts!*
 [Chartist](http://gionkunz.github.io/chartist-js/)  is a nice JavaScript library for creating simple, responsive and customizable charts for your website. Chartist uses SVG to render them; hence, your charts can also obey custom CSS rules.

- DROPZONE JS


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

 [Dropzone](http://www.dropzonejs.com/)  allows you implement “drag and drop” features on your website. It is also highly customizable with custom code. It’s lightweight, doesn’t depend on any other library (like jQuery). 

- THREE JS


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

*Aha! Something to make some cool, eye-catching stuff.*
 [Three js](https://threejs.org/)  is an immensely popular JavaScript 3D library for creating visual effects on your website. It is a great option for those looking to create 3D visualizations without the need for heavy-duty game engines.

- jQUERY

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9m3itbrjnmn0h0smzo70.png)

[jQuery](https://jquery.com/)  is one of the oldest yet most popular JavaScript libraries still in existence. You’ve probably already heard of the DOM, which stands for Document Object Model. jQuery is perfect and quite reputed for manipulating the DOM. You can also dothings like  HTML events, animations and effects, CSS manipulation, and AJAX calls. 


- LODASH

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

When you think of this library, you think of utilities.  [Lodash](https://lodash.com/)  is an immensely useful library which contains and provides utility functions which you call into your code to perform a specific task. Saving your time you would have wasted in writing it yourself.


- PIXI JS


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

Named after the popular movie animation studio Pixar,  [Pixi](https://www.pixijs.com/)  is an open source 2D engine used to create beautify, eye-catching animations on your website. Pixi uses WebGL, and uses HTML canvas if the former is not supported.
PixiJS is made of multiple consumable components that can be installed in your project with NPM/Yarn


- D3 JS


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gsl4q9wdjx5dt3k4nqia.jpg)

 [D3.js](https://d3js.org/)  is a JavaScript library for manipulating documents based on the nature of data received.
It stands for “Data Driven Documents”, which kind of explains its task. The library uses pre-built functions to select DOM elements, create SVG objects, style them and add transitions and other effects. These objects can also be styled using pure CSS.

- SOCKET.IO


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g4w39wc2zuv9fq1pue54.jpeg)

You should know that by default, the connection between the browser and web server is closed once the server responds with data. So how do you keep the connection open so data can seamlessly flow bi-directionally without having to make new requests in the process?
Socket.io, based on web sockets, is a JavaScript libabry which enables event-based two-way communication between the browser and the web server. It utilizes a node.js server.
https://socket.io/

- MATH JAX

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/321zbut9fny7bt182l34.png)

*Ah, good old maths.*
As its name suggests,  [MathJAX](https://www.mathjax.org/)  simply allows you to include mathematics in your pages. This includes special math notations and symbols. MathJax automatically formats the mathematical symbols and equations that you enter in HTML and problem components using LaTeX notation into beautiful math. A MathJax equation can appear with other text in the paragraph (inline) or on its own dedicated line (block).


- MODERNIZR


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9r7lli7bg4gxatinm82d.png)

 [Modernizr](https://modernizr.com/)  is a libary of tests. Features like CSS transform, web sockets, CSS transitions and animations can be tested on the browser using special properties from Modernizr. 
There are over 260 features which can be tested using this utility.



Which of these are your favourite? Let me know in the comments.



*P/S*: I recently launched my Web Development Beginners Guide eBook for Absolute Beginners. Check it out here - [Web Development - The Beginners Guide](https://gumroad.com/l/WebDevBeginners)