¿Qué es Vanilla JS?

Si eres programador y sigues las tendencias del mundillo, sabrás que Javascript se está desmarcando como el lenguaje de programación predominante. Estábamos acostumbrados a diferenciar entre frontend y backend por lo tanto, a programar en lenguajes diferentes. Pero eso está cambiando y Javascript lo está inundando todo con los React, Typescript, Node JS, Angular, Vue JS y tantos otros donde toma protagonismo Vanilla JS.

¿Para qué sirve Vanilla JS?

Parte de esta moda nace por el interés en la optimización y mejora en la velocidad de carga. Es ahí donde “renace” (y no nace) el interés por Vanilla JS. Dejamos atrás librerías de javascript como JQuery, MooTools, Underscore, Prototype JS, Dojo… todas ellas simplificaban algunas operaciones con javascript e incluso lograban cosas que el propio javascript (ES5) no podía. Si algo caracterizan a estas librerías es su pesadez además de ciertas prácticas que hacen un código algo engorroso (spaghetti code).

Con la salida en 2015 de ECMAScript 6 (ES6) todo cambió y se lograban las mismas cosas que con JQuery -la librería más extendida-. Si bien es cierto, el panorama ha tardado en evolucionar ya que hasta hace poco los navegadores no soportaban ES6. Ahora sí, podemos decir que con los navegadores actuales es posible prescindir de todas estas librerías.

Pero entonces ¿qué es Vanilla JS? ¿para qué sirve? Vanilla JS es el nombre con un poco de humor que le ha dado la comunidad al javascript puro o más bien, a la ausencia de librerías y frameworks de Javascript y de ahí el concepto del “renacer”. Así que podemos afirmar que para la mejora de rendimiento de las webs unido a la aparición de frameworks, se está optando por evitar el uso de JQuery y tantos otros.

Vanilla JS vs JQuery

Muchas veces el uso de JQuery era inevitable en el manejo principalmente del DOM HTML y eventos pero como decimos, con la actualización de javascript a ES6 la cosa ha cambiado. Es verdad, que muchos desarrolladores se acomodan con las librerías y son reacios a volver a usar Javascript puro porque implica conocimientos básicos que no siempre están afianzados.

Si necesitas un poco de lectura o estudio, te recomendamos este github con multitud de ejemplos y documentación. O también la página oficial de Vanilla JS donde también es posible su descarga. A continuación te vamos a poner unos ejemplos para ver la diferencia. En el caso de seleccionar elementos del DOM:

// jQuery
var element = $( '#element' );
var links = $( '.some-class' );
var articles = $( 'article' );

// Vanilla JS
var element = document.getElementById( 'element' );
var links = document.getElementsByClassName( 'some-class' );
var articles = document.getElementsByTagName( 'article' );

Aunque también podemos hacer varias selecciones o usar la sintaxis del selector de JQuery:

// Element
var element = document.querySelector( '#element' );

// Array of elements
var links = document.querySelectorAll( '.some-class' );
var articles = document.querySelectorAll( 'article' );

Podemos movernos por el DOM:

// jQuery
var firstElement = jQuery( '#list li:first' );
var nextElement = firstElement.next();

// Vanilla JS
var firstElement = document.getElementById( 'list' ).getElementsByTagName( 'li' )[0];
var nextElement = firstElement.nextElementSibling;

O realizar operaciones con múltiples nodos, algo que con ES5 era algo engorroso y ahora con ES6 se hace similar:

// jQuery
$( '#post a' ).addClass( 'post-link' );

// Vanilla JS
document
  .querySelectorAll( '#post a' )
  .forEach( a => a.className += ' post-link' );

O también podemos ver algo más complejo aún que deja de ser simple pero desde luego más rápido y ligero. Añadamos la clase clicked a los elementos con clase some-class al hacer click sobre ellos:

// jQuery
$(‘.some-class’).click(function () {
  $(this).addClass(‘clicked’)
});

// Vanilla JS
var nodes = document.getElementsByClassName(‘some-class’);
var handleClick = function (e) {
  var classes = e.target.className.split(/\s/);
  if (classes.indexOf(‘clicked’) === -1) {
    classes.push(‘clicked’);
    e.target.className = classes.join(‘ ‘);
  }
};

for (var i = 0; i < nodes.length; ++i) {
  nodes[i].addEventListener(‘click’, handleClick);
}

Como vemos, aunque la sintaxis de Vanilla JS sea más extensa sólo requiere de volverse a acostumbrar a javascrip puro, volver a las bases para programar de manera más óptima.

¿Cómo usar Vanilla JS?

Para usar Vanilla JS no hace falta nada especial ya que hablamos de javascript normal, nuestra única responsabilidad será saber qué tipo de usuarios usarán la plataforma que estemos programando. Ya que si se trata de SSOO o navegadores antiguos Vanilla JS no estará soportado. Podemos comprobar la compatibilidad en esta web.

También tendremos en cuenta con qué estemos trabajando, ya que de tratarse de aplicaciones con React y otros frameworks de Javascript pierde sentido cargar una librería más. Sin embargo si hacemos uso de Bootstrap -hasta la versión 4- o WordPress, Jquery está incluído por defecto por lo tanto puede ser útil beneficiarse de sus características sabiendo que ya soportamos irremediablemente su peso.

¡Bootstrap 5 ya no usa JQuery!

En ocasiones el uso de JQuery estaba justificado, diferentes herramientas y CMS como WordPress usaban esta librería para su funcionamiento habitual. Esto implicaba que por defecto estuviera cargado y por lo tanto podía optarse por su uso. Pero esto está cambiando y por ejemplo, conocidos frameworks css como Tailwind CSS o la nueva versión de Bootstrap -aún en alpha- ya están libres de JQuey.

Está parece ser que será la tendencia para los próximos años, dejaremos atrás estas pesadas librerías de Javascript para pasar a programar tanto en servidor como en frontend en Javascript explotando al máximo el potencial de ES6. ¿Y tú? ¿Con qué sueles trabajar? ¿Darás el paso hacia Vanilla JS?

*Imágenes de Freepick