Seis librerías JavaScript de código abierto para desarrolladores front-end

5 min lectura
Desarrollo / 30 noviembre 2015
Seis librerías JavaScript de código abierto para desarrolladores front-end
Seis librerías JavaScript de código abierto para desarrolladores front-end

BBVA API Market

En más de una ocasión hemos hablado de las bondades de JavaScript para el desarrollo de proyectos digitales. Este lenguaje de programación se ha convertido en un must dentro del desarrollo, no solo por la parte del front-end, que era lo más habitual, también por el lado del back-end (marcos de desarrollo, bases de datos y entornos de desarrollo por la capa del servidor). Sintaxis completa, con enormes oportunidades y de gran salida profesional.

Por el lado del front-end, diseñadores de todo el mundo utilizan infinidad de librerías JavaScript para implementar funcionalidades y características dinámicas a sus proyectos. Es en este lenguaje donde residen todas las potencionalidades que un desarrollador puede darle, por ejemplo, a una web. Algunas de estas librerías son de código abierto: acceso libre y gratuito. Esto es un listado con algunas de las más usadas por los desarrolladores.

1. jQuery

jQuery es una librería JavaScript que permite la manipulación de documentos HTML en el DOM y los estilos CSS, la gestión de eventos, efectos y animaciones, AJAX y una API que facilita mucho la labor de los desarrolladores, compatible con todos los navegadores de última generación. El diseñador diseña, jQuery se encarga de que ese diseño se sirva sin problemas en todos los escenarios. Es una de las librerías más empleadas dentro del mundo del diseño para la creación de proyectos digitales responsive (con una variedad específica de jQuery llamada jQuery Mobile), un único diseño para todos los entornos (escritorio, móvil y tableta). Su versatilidad y capacidad para aumentar los recursos con plugins la convierten en una referencia real. Grandes compañías como Google, Microsoft e IBM la usan en sus productos.

jQuery tiene algunas otras ventajas que la hacen tan popular:

– La programación de los estilos es muy similar al tradicional CSS. Si el diseñador tiene conocimientos en CSS, su adaptación es sencilla.

– Encadenamiento de enunciados. Se pueden manipular distintos elementos a la vez con una única línea de código. Simplicidad.

– Es realmente sencillo añadirla a cualquier página web. Para incluir dentro del código debemos colocar el <script> dentro del <head> así:

<head>

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

</ head>

Es recomendable colocar el archivo JavaScript descargado en el mismo directorio utilizado para alojar las páginas web donde usemos jQuery.

Dentro de esta librería de front-end existen dos versiones distintas, dependiendo del tipo de uso que se haga de la librería.

– Versión de producción: una versión de jQuery disponible para páginas web con el código ya compactado y comprimido.

– Versión de desarrollo: para pruebas (código sin comprimir).

2. html5sql.js

html5sql es una librería JavaScript pensada especialmente para trabajar con la base de datos Web SQL para HTML5. Proporciona una estructura donde es posible el procesamiento de sentencias SQL en una única transacción (operaciones tratadas como una sola unidad). Todas las características de html5sql están pensadas para agilizar el desarrollo front-end:

– Capacidad de proceso de secuencias SQL de varias formas distintas:

– Como una sola serie de sentencias SQL.

– Como una matriz de cadenas de sentencias SQL.

– Como un conjunto de objetos de sentencias SQL.

– Como una cadena que contiene varias sentencias SQL, cada una de las cuales finaliza en un punto y coma.

– A partir de un archivo separado con instrucciones SQL.

– Dar un marco para el control de versiones de una base de datos.

3. RequireJS

RequireJS es una biblioteca JavaScript basada en la especificación AMD (Asynchronous Module Definition), que nos permite definir módulos y declarar explícitamente las dependencias necesarias para cada uno de los módulos de una aplicación hecha en JavaScript. RequireJS es una librería muy útil porque esta sintaxis no trae por defecto una manera de declarar módulos explícitamente sin añadir un número enorme de etiquetas script al código.

Un ejemplo del código mediante el que se declaran módulos con la especificación AMD en JavaScript:

// miModulo.js

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

        var miModulo = function(){

            //Haz algo

            //Usa cualquier atributo de las dependencias

            dep1.atributo

        }

        return miModulo;

    });

 

Algunas de las características fundamentales de RequireJS:

– Carga y descarga dinámica de dependencias.

– Declaración explícita de dependencias.

– Capacidad para crear módulos extensibles.

– Posibilidad de definir el nombre de nuestros módulos.

– Asignación de dependencias a una variable dentro de un módulo.

– Gestión de timeouts.

– Compatible con la mayoría de navegadores del mercado: Internet Explorer, Mozilla Firefox, Google Chrome, Safari y Opera.

Al final el objetivo de RequireJS es establecer un enfoque distintos en la carga de la escritura de las tradicionales etiquetas script de JavaScript. RequireJS lo que hace es apostar por el código modular, es decir, una sintaxis basada en identificadores de módulos en vez de direcciones URL. RequireJS lo que hace es cargar el código a partir de una baseURL, que normalmente se establece dentro del mismo directorio que el script. La librería hace una llamada al código y carga la página cuando comprueba ese atributo principal de datos.

<!–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 es una librería JavaScript para la creación de gráficos SVG, animaciones e incorporación de archivos de audio, vídeo e imágenes sin problemas. Lo interesante del uso de JavaScript para la creación de visualizaciones de datos es que la carga de los datos siempre se hace en el navegador, por el lado del cliente, y nunca por el lado del servidor. Es la forma ideal de tener gráficos y animaciones de gran calidad sin coste añadido.

No es la única ni tampoco la más conocida. De hecho, en BBVAOpen4U ya hemos hablado de otras librerías JavaScript para visualización de datos como D3.js, posiblemente la biblioteca en JS más utilizada para gráficos dinámicos.

5. Prism.js

PrismJS es una librería JavaScript específica para el resaltado de código en el texto de una página web. Se encarga de aplicar estilos a la sintaxis en función del tipo de lenguaje que estemos empleando. Los lenguajes que vienen por defecto son el trío habitual del diseño (HTML, JS y CSS), pero en la descarga de la librería se puede personalizar para resaltar otro tipo de lenguajes.

PrismJS dispone de cinco temas distintos, seis plugins para ampliar sus funcionalidades y la posibilidad de resaltar hasta 15 sintaxis diferentes (no sólo HTML o JavaScript, también Java, C, PHP, Python, CoffeeScript…).

Una vez descargada la librería, se coloca una llamada en el código HTML de la web, concretamente en el <head> y en el <body>, y a partir de ahí usando las etiquetas <pre> y <code> se puede empezar a resaltar el código que se quiera:

– Código insertado en el HTML:

<!Doctype html>
<html>
<head>
<link href=”prism.css” rel=”stylesheet” />
</head>

<body>
<script src=”prism.js”></script>
</body>
</html>

– Uso de las etiquetas <pre> y <code> para resaltar código:

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

6. Infinity.js

Infinity.js es una librería que permite cambiar el estilo de la paginación habitual en una web. Un diseñador o un desarrollador puede cargar entradas nuevas a medida que el usuario hace scroll y llega al final de la página. Esa carga constante de nueva información se hace a partir de lotes y hasta el infinito, de ahí el nombre de la librería. Cuando el lector llega al final, se cargan más entradas. Es lo que los desarrolladores llaman una UITableView, herramienta que nos posibilita mostrar nuevo contenido en formato lista.

Esta librería de código abierto fue desarrollada por el sitio de intercambio de alojamiento para turistas Airbnb, se distribuye bajo licencia BSD (Berkeley Software Distribution) y el código está disponible en GitHub. Para usarla es necesario tener instalada primero la librería jQuery.

– Código para empezar a funcionar con 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();

}

Síguenos en @BBVAAPIMarket

También podría interesarte