11 Open Source JavaScript Libraries for Web Developers

by Janeth Kent Date: 17-06-2020 javascript libraries opensource resources scripts webdev


Undoubtedly, JavaScript is one of the most used programming languages nowadays. Thanks to it, we have access to different features offered in the websites we visit regularly and which make our browsing experience much more pleasant, simple and entertaining.

The browsers we use have their own JavaScript engines integrated, in order to take full advantage of their benefits and try to offer the user, a higher performance in web applications that implement it in a comprehensive way.

User interfaces, dynamic web pages, animations, frameworks for application development that require updating information in real time and many more things are possible with this language.

Among those many things, there are libraries created to meet very specific objectives, which will help us to provide our projects with very interesting features, so it's worth having them there at hand.

In this article we have compiled a list of the best dynamic javascript and open source libraries for front-end projects.

 

1. Math.js

 

Although the standard JavaScript language contains quite a few mathematical functions, it is by no means complete. 

One feature that is often overlooked is that of complex numbers. Math.JS provides a relatively easy to use API whose basic usage looks like this:

 
const a = math.complex(2, 3)
print(a.re) 2
print(a.im) 3
 

The accuracy of floating numbers is another issue in JavaScript runtimes. Math.JS solves this problem by providing a fixed-point floating number implementation - simply set the desired accuracy, and increase its decimal number:

 
math.bignumber('2.3e+500') BigNumber, 2.3e+500
 

Keep in mind that BigNumber and its various classes are not a panacea for all digital problems. Fixed-point arithmetic is known to be much slower than hardware-accelerated floatation mathematics - if you don't have a good reason to use higher precision, it's better to do without it.

 

02. Leaflet

 

Leaflet is an open source JavaScript library for interactive web maps. It is lightweight, simple and flexible, and is probably the most popular open source cartographic library at the moment. The brochure was prepared by Vladimir Agafonkin (now of MapBox) and other contributors.

 

03. Anime.js

 

Anime.JS provides a convenient implementation of the keyframe animation pattern. Specify start state, end state and a facilitation function - the library and browser will use CSS transformations to ensure your animations run at optimal speed.

 

04. Hotkeys

 

Providing a keyboard-based interface makes the products more attractive to advanced users. Hotkeys takes care of the often very complicated details of keyboard management, leaving you to focus on implementing business logic. Less than ten lines of code are needed to start!

 

05. Easy Toggle State

 

Activating and deactivating GUI elements on a scheduled basis is an old but recurring task. The easy switching status provides an orderly way to perform the endless task of grouping items and turning them on and off without breaking a sweat.

06. AutoNumeric

D3 creates data links between arbitrary DOM objects and elements stored in the code behind them. This means that the appearance of the website can be flexibly customized according to the data stored.

D3 differs from traditional diagram libraries in that it does not provide any templates. If, for example, you want to create a pie chart, it is best to start by entering rectangles and adding data links to calculate the height and others.

The library shines when extremely complex and/or animated visualizations are required and preparation time is not a problem. A popular example would be the coroplet maps, commonly used in election reports. This, of course, is a small overview - more tutorials can be found here.

08. Element

 

Element differs from the rest by being sponsored by several large web companies based in both China and the US.

From a technical point of view, Element is - in general - a well-supported collection of GUI widgets based on Vue 2.0. Import it into your web project, add the specific tabs and "hack" it as if it were the jQuery user interface.

One area where the product really shines is where the date and time are displayed. The following excerpt creates a set of controls that allow the user to specify a period of months:

 
<el-date-picker  	  
v-model="value1"  	  
type="monthrange"  	  
range-separator="To"  	  
start-placeholder="Start month"  	  
end-placeholder="End month">  	
</el-date-picker>
 

Unfortunately, starting with the element requires some manual work. The most convenient way involves downloading the starter kit and running it within a Node.JS environment.

 

09. HighCharts

 

Although open source JavaScript diagram libraries are in common use, some jobs require the additional "client support security" offered by commercial software. In this case, HighCharts is a safe bet.

The product, which has been on the market for years, has long been diversified to include display solutions for Android, mapping and the stock market.

Launching a HighCharts diagram is simple. Invokes the chart() function, along with a <div> label and an object containing more descriptions:

 
Highcharts.chart('container', {  	
chart: {  		
scrollablePlotArea: {  			
minWidth: 700  		
}  	
},
 

Highcharts differs from its competitors in that it can obtain its data from a variety of sources. A clear example is the following, which uses a CSV file hosted on a third-party server:

 
data: {  		
csvURL: 'https://cdn.jsdelivr.net/gh/  
highcharts/[email protected]/samples/data/  
analytics.csv',  		
. . .  },
 

10. Underscore.js

 

Although libraries like jQuery are popular, they add significant amounts of code to your product. Underscore.js offers a small, well-aged selection of APIs, making it an ideal choice for web projects where space is at a premium.

 

11. Hammer

 

Touch recognition can be a tedious process. Hammer.js simplifies this task: it specifies the areas to be touched, and waits for events to fall into its listening functions.

You may also like:

 

12. Finance.js

 

Programming depreciation and other similar financial mathematical processes is not difficult, but it is annoying. Finance.JS adds a mathematical object to your browser - providing convenient access to various commonly used financial calculations.

13. Bideo.js

 

Purists might see a full-screen video as the most decadent and useless of backgrounds. Some designs, however, benefit greatly from this - in that case, use Bideo.js to take the stress out of handling the video.

 
by Janeth Kent Date: 17-06-2020 javascript libraries opensource resources scripts webdev hits : 8718  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN END DEVELOPMENT.

 
 
 

Related Posts

How to use the codePointAt method in JavaScript

The JavaScript codePointAt method has more or less the same function as the charCodeAt method, used to get the 16-bit Unicode representation of the character at a certain position in…

How to check if a value is a number in JavaScript

In this short tutorial we are going to look at the various methods that exist to find out if a value is a number in JavaScript.   1. Using the isNaN() function   One…

How to use the charCodeAt method in JavaScript

The charCodeAt method is accepted by strings in JavaScript, returning the 16-bit Unicode code of the character at the position we pass as a parameter to the method. The charCodeAt method…

How to use the charAt method in JavaScript

The charAt method is accepted by strings in JavaScript, returning the position of the character passed as a parameter within the string. If the string contains multiple occurrences of the character…

Strings in JavaScript: What they are and how to use them

In this tutorial we are going to explain what strings are and how they are used in JavaScript. The tutorial is intended for people who are learning to program in…

Dates in local format with Javascript

In the articles we have about dates in JavaScript we were missing one about how to create dates in local format with JavaScript. That is to say, being able to…

Formatting hours in Javascript

Continuing with the set of articles that talk about internationalisation elements, like the previous one where we talked about relative dates in JavaScript, we will see in this one how…

Request data with prompt in JavaScript

After having published several articles about how to manipulate arrays and dates, today I will publish a post that some of you will find too basic and others will find…

Relative dates in JavaScript

One of the interesting things about the internationalisation library represented in the Int object is the handling of relative dates in Javascript. This handling allows us to represent a date…

How to access webcam and grab an image using HTML5 and Javascript

We often use webcams to broadcast video in real time via our computer. This broadcast can be viewed, saved and even shared via the Internet. As a rule, we need…

The JavaScript forEach loop

We have already talked about how to handle some of loops  types in Javascript including for, for-in and for-off loops. In the case of today we are going to see how…

What are React Hooks and what problems they solve

Working with React, - and before the release of Hooks in version 16.8 -  there was always the possibility to create components in three different ways based on a number of…

We use our own and third-party cookies to improve our services, compile statistical information and analyze your browsing habits. This allows us to personalize the content we offer and to show you advertisements related to your preferences. By clicking "Accept all" you agree to the storage of cookies on your device to improve website navigation, analyse traffic and assist our marketing activities. You can also select "System Cookies Only" to accept only the cookies required for the website to function, or you can select the cookies you wish to activate by clicking on "settings".

Accept All Only sistem cookies Configuration