Six open source JavaScript libraries for front-end developers

In more than one occasion we have talked about the merits of JavaScript for digital project development. This programming language has become a ‘must’ in development, not only on the front-end side, which is usually the case, but also on the back-end side (development frameworks, databases and server-layer development environments). Full syntax with great professional opportunities. 

On the front-end side, designers around the world use countless JavaScript libraries to implement features and dynamic characteristics for their projects. All the potential that a developer might design for a website, for example, resides in this language. Some of these libraries are open source: free access. This is a list with some of the libraries most often used by developers. 

1. jQuery

 jQuery is a JavaScript library that enables handling of HTML documents in DOM and CSS styles, management of events, effects and animations, and AJAX, using an API that makes developer work much easier, and is compatible with all the latest-generation browsers. The designer designs and jQuery makes sure that this design can be used with no problems in any scenario. It is one of most extensively used libraries in the world of design for creating responsive digital projects (with a specific variety of jQuery called jQuery Mobile), a single design for any environment (desktop, mobile and tablet). Its versatility and ability to enhance the resources with plugins have turned it into a real benchmark. Large companies such as Google, Microsoft and IBM use it in their products. 

jQuery has other benefits that have made it so popular:

– Style programming is very similar to the traditional CSS. If the designer has expertise in CSS, adaptation is simple.

– Concatenation of headings. Different elements can be handled at the same time with a single line of code. Simplicity.

– It is really easy to add to any web page. To include within the code, we place the <script> within the <head>:

<head>

<script src = "jquery-1.11.3.min.js"> </ script>

</ head>

It is advisable to place the developed JavaScript file in the same directory used to store the web pages on which we use jQuery.

There are two different versions within this front-end library, depending on the library's intended use.

– Production version: A jQuery version available for web pages with the code already compacted and compressed

–  Development version: For testing (uncompressed code).

2. html5sql.js

html5sql is a JavaScript library intended especially for working with the Web SQL database for HTML5. It provides a structure where SQL statements can be processed in a single transaction (operations treated as a single unit). All the features in html5sql are designed to speed up front-end development: 

– Ability to process SQL sequences in several different ways:

– As a single series of SQL statements.

– As a matrix of SQL statement strings.

– As a set of SQL statement objects. 

– As a string that contains several SQL statements, each of which ends with a semicolon.

– Based on a separate file with SQL instructions.

– Provide a framework for controlling the versions of a database. 

3. RequireJS

RequireJS is a JavaScript library based on the AMD specification (Asynchronous Module Definitionhttp://requirejs.org/docs/whyamd.html) that enables the user to define modules and explicitly state the dependencies needed for each module in an application developed in JavaScript. RequireJS is a very useful library because this syntax does not include by default a way of declaring modules explicitly without adding a huge number of script tags to the code.

One example of the code used to declare modules with the AMD specification in JavaScript:

// miModulo.js

    define([‘dep1’, ‘dep2’], function (dep1, dep2) {

        var miModulo = function(){

            //Haz algo

            //Usa cualquier atributo de las dependencias

            dep1.atributo

        }

        return miModulo;

    });

Some of the key features of RequireJS: 

– Dynamic loading and unloading of dependencies.

– Explicit statement of dependencies.

– Ability to create extensible modules.

– Possibility of defining the module name.

– Assignment of dependencies to a variable within a module.

– Timeout management.

– Compatible with most browsers available on the market: Internet Explorer, Mozilla Firefox, Google Chrome, Safari and Opera. 

The ultimate objective of RequireJS is to establish a different approach in loading JavaScript's traditional script tags. RequireJS uses modular code, i.e. a syntax based on module identifiers, instead of URL addresses. RequireJS loads the code from a baseURL that is usually set in the same directory as the script. The library invokes the code and loads the page when it checks this key data attribute.

<!–This sets the baseUrl to the "scripts" directory, and
    loads a script that will have a module ID of 'main'–>
<script data-main="scripts/main.js" src="scripts/require.js"></script>

4. BonsaiJS

BonsaiJS is a JavaScript library for creating SVG graphics and animations and easily adding audio, video and image files. The interesting aspect of using JavaScript for creating data visualization is that the data is always loaded in the browser, on the client side, and never on the server side. It is the ideal way of having high-quality graphics and animations at no added cost.

It is not the only one, or the better known one. In fact, on BBVAOpen4U we have already talked about other JavaScript libraries for data visualization like D3.js, possibly the most extensively used JS library for dynamic graphics. 

5. Prism.js

PrismJS is a specific JavaScript library for highlighting code in the text of a web page. It applies styles to the syntax based on the type of language used. The languages included by default are the usual trio used for design (HTML, JS and CSS), but when the library is downloaded it can be customized to highlight other types of languages. 

PrismJS has five different subjects, six plugins for extending its functionality and offers the possibility of highlighting up to 15 sintaxes (not only HTML or JavaScript, but also Java, C, PHP, Python, CoffeeScript…). 

Once the library is downloaded, a call is placed in the website's HTML code, specifically in the <head> and the <body>, and the <pre> and <code> tags are then used to start highlighting the relevant code:

– Code inserted in HTML:  

<!Doctype html> 
<html> 
<head> 
    <link href="prism.css" rel="stylesheet" /> 
</head> 
 
<body> 
    <script src="prism.js"></script> 
</body> 
</html>

– Use of <pre> and <code> tags to highlight code:

<pre class="language-xxx"><code class="language-xxx">Código</code></pre>

6. Infinity.js

Infinity.js is a library that enables users to change the usual pagination style on a website. A designer or developer can load new entries as the user scrolls and reaches the end of the page. This constant loading of new information is done based on batches and to infinity, hence the library's name. When the reader reaches the end, more entries are loaded. This is what developers call a UITableView, a tool for displaying new content in list format.

This open source library was developed by the tourist accommodation exchange site Airbnb, is distributed under a BSD (Berkeley Software Distribution) license and the code is available in GitHub. In order to use it, the jQuery library needs to be installed first.

– Code to start working with Infinity.js:

var $el = $('#my-infinite-container');

var listView = new infinity.ListView($el);

// … When adding new content:

var $newContent = $('<p>Hello World</p>');

listView.append($newContent);

// … To remove items from a list:

var listItems = listView.find('.my-items');

for(var index = 0, length = listItems.length; index < length; index++) {

  listItems[index].remove();

}

Follow us on @BBVAAPIMarket