Descubre por qué vanilla JavaScript es el futuro

Que levante la mano el que use librerías tipo jQuery o Underscore.js ?. Venga, no seas tímido y reconoce que tú también las usas (recuerda que estás en un espacio seguro ?). Es completamente normal que utilices este tipo de librerías. Por dos motivos: por un lado, simplifican muchísimo el trabajo con su montón de utilidades. Por otro lado, forman parte del Core de WordPress, así que ¿por qué no ibas a usarlas? En el escritorio de WordPress ya casi vienen cargadas de serie, y en el front-end basta con un par de líneas de código. Ahora bien, ¿que haya librerías que sean útiles y formen parte del core es motivo suficiente para cargarlas «sin pensar»? Yo creo que no.

En la entrada de hoy, me gustaría empezar explicándote por qué surgieron este tipo de librerías y los problemas que intentan solucionar. A continuación, hablaremos de cómo puedes hacer lo mismo con un JavaScript pelado, sin estas librerías.

Librerías JavaScript

El objetivo de las librerías JavaScript es el de abstraer una serie de operaciones más o menos complejas en una API de funciones sencillas, cómodas y fáciles de invocar. Por ejemplo, la librería jQuery permite realizar operaciones tan complejas y variadas como manipular el DOM, gestionar eventos, crear animaciones, etc. Y consigue hacerlo a través de una API clara, concisa y que, además, es compatible con multitud de navegadores.

Las librerías son herramientas de trabajo para los desarrolladores. Nos ayudan a ser más eficientes. De hecho, creo que el resumen de lo que es una librería lo tienes en el propio logo de jQuery: «escribe menos, haz más». Y es que esa es la esencia de lo que se intenta conseguir: hacer fácil lo que por definición es difícil.

jQuery

jQuery nació en el año 2006 como una librería multiplataforma diseñada para, ¡oh, sorpresa!, simplificar el scripting de páginas web. Entre sus objetivos estaban ofrecer una sintaxis con la que poder manipular los elementos de la web y gestionar los eventos fácilmente. Además, la librería también incluye un mecanismo de plugins, con lo cual es posible extenderla y añadirle nuevas funcionalidades. Uno de los plugins (o colección de plugins, si lo prefieres) más conocidos de jQuery es jQuery UI, que permite definir y gestionar cuestiones relacionadas con las interfaces de usuario (eventos, efectos, widgets, etc).

Si no conoces todavía esta librería, la entrada de la Wikipedia (en inglés) es bastante completa y te dará una visión general. También te recomiendo que eches un vistazo a la documentación oficial o a alguno de los miles de tutoriales que existen en los que te explican cómo usarlo.

Nelio Content

Estoy tan contento con Nelio Content que parece que me hayan pagado para hablar bién de él… pero es que también a ti te encantará: funciona como prometen, la programación automática de mensajes es increíble, la calidad/precio no tiene parangón y su equipo de soporte se siente como si fueran parte del tuyo.

Panozk

WordPress.org

Ver planes

Underscore.js

Otra librería que quizás hayas usado (aunque no es, ni de lejos, tan conocida como jQuery) es Underscore.js. Se trata de una librería que incluye un montón de utilidades para realizar funciones comunes. Algunos ejemplos de sus funciones son map (para convertir un array en otro), filter (para quedarte con los elementos de un array que cumplen una cierta condición), pluck (para convertir un array de objetos en un array con los valores de uno de los atributos de esos objetos), etc.

Underscore.js es especialmente conocida porque va cogida de la mano de un framework MVC para JavaScript llamado Backbone. Con él puedes crear aplicaciones web con arquitectura MVC; es decir, ofrece las herramientas necesarias para crear modelos de datos y vistas para visualizarlos, así como toda la arquitectura de eventos y métodos para conectar unas piezas con otras. Otros frameworks muy conocidos de tipo MVC son React, Angular o Vue, pero no voy a comentarlos porque, a diferencia de Backbone o Underscore.js, estos últimos no forman parte del Core de WordPress (todavía ?).

Finalmente, comentarte que Underscore.js ha ido perdiendo fuelle respecto a otras librerías como, por ejemplo, Lodash. Lodash coge muchas de las ideas de Underscore.js (de hecho, tiene una compilación equivalente), pero tiene una comunidad más activa detrás (por lo que he leído, los contribuidores originales de Underscore.js se pasaron a Lodash).

La parte negativa

El problema con librerías tipo jQuery, Underscore.js o Backbone es, básicamente, su peso. Por ejemplo, jQuery pesa unos 250kb (90kb si está minificado). En principio no parece un problema, pero fíjate que si tienes 50.000 visitas únicas al mes, jQuery consumirá 4 gigas de tráfico. No está mal, ¿eh?

Cuando te das cuenta del impacto que puede tener el uso de una librería en tu sistema es el momento de plantearse si realmente la necesitas o no. ¿Estás metiendo sobrecarga para «cuatro tonterías»? Yo sí puedo responderte que, en muchas ocasiones, sí, lo hacía: siempre metía jQuery en todos mis proyectos, aunque sólo fuera para seleccionar un elemento del DOM y cambiarle el texto ($('.elemento').text('texto')). Pero, amigo, para estos escenarios tan sencillos (y algunos más complejos también) esto ya no es necesario.

La solución a todos tus problemas: Vanilla JavaScript

O, como decimos en España, JavaScript a pelo ?. Y, bueno, quizás no sea la solución a todos tus problemas, pero sí te permite solucionar los que acabamos de comentar. Y es que JavaScript ha evolucionado un montón desde los inicios y ahora es más fácil que nunca hacer todo lo que hacemos con estas librerías… sin estas librerías. Así que, sin más dilación, veamos 6 ejemplos de lo que puedes hacer hoy con JavaScript pelado, dejando atrás las típicas librerías JS.

1. Seleccionar elementos del DOM

Este es, quizás, el principal motivo por el cual instalamos librerías como jQuery: poder seleccionar objetos del DOM con un sencillo $( '#elemento' ). Pero hacer esto en JavaScript puro y duro es extremadamente sencillo:

Sí, la sintaxis es un poco más larga, pero recuerda que te ahorras el peso de jQuery. Además, toda operación ejecutada con funciones nativas y no a través de librerías suele ser un poco (o mucho) más rápida.

Sé lo que estás pensando: en jQuery podías hacer la selección usando una expresión CSS y con el código JavaScript que te acabo de mostrar necesitas usar una función diferente para obtener objetos por ID, clase o tipo. Bueno, pues que sepas que también tienes la posibilidad de realizar una selección usando la sintaxis CSS con JavaScript puro:

2. Moverte por el DOM

Otra operación habitual cuando manipulamos elementos del DOM es saltar de uno a otro: del padre al hijo, de un elemento a su hermano, etc. Todas estas operaciones también existen en JavaScript puro y duro, así que sigues sin necesitar jQuery:

3. Set y Get de atributos

Otra característica típica suele ser la manipulación de atributos. Por ejemplo, cuando quieres añadir una clase a un elemento o conocer la dirección a la que apunta un cierto enlace. Todo esto se puede hacer con las operaciones getAttribute y setAttribute:

4. Operaciones con múltiples nodos

Una de las grandes ventajas de jQuery es que puedes encadenar operaciones de la siguiente forma:

Esto lo que hace es seleccionar múltiples nodos y aplicar las sucesivas operaciones a todos ellos. Esto es algo que, por desgracia, no puedes hacer en vanilla JavaScript; para conseguirlo, deberás iterar por todos los nodos con un bucle:

Esto es lo que internamente hace jQuery, claro, pero reconozco que en este caso el resultado es algo más tedioso. Pero con la llegada de ECMAScript 6 y sus funciones lambda, tampoco es un drama. En el siguiente punto te muestro un ejemplo ?

5. Operaciones con arrays

Al principio de la entrada te he hablado de algunas de las utilidades para arrays típicas que vienen en Underscore.js. Pues bien, diría que todas ellas sin excepción están disponibles en JavaScript puro. Aquí tienes algunos ejemplos:

Como ves, tanto la sintaxis como los nombres de las funciones son extremadamente parecidos. La ventaja de usar vanilla JavaScript es que cualquier desarrollador JavaScript debería estar familiarizado con el lenguaje, con el orden de los parámetros, etc. Si, en cambio, te acostumbras a una librería en concreta, te arriesgas a no saber qué operaciones hay disponibles en otra librería o cómo funciona la otra librería.

¡Ah! Te había dicho que te enseñaría cómo iterar de forma más elegante sobre nuestra lista de nodos usando funciones ECMAScript 6. Pues bien, aquí tienes el ejemplo:

Básicamente, aprovechamos que el resultado de la selección es un array para aplicar la función forEach y pasarle como argumento una función lambda con un único parámetro llamado a que modifica su clase. No está nada mal, ¿eh?

6. Operaciones con objetos

Existen muchas operaciones diferentes que podemos hacer sobre los objetos, como conocer el número de atributos que tienen, listarlos todos, etc. Aunque el resultado puede no ser tan extremadamente compacto como el que obtenemos usando Underscore.js, la ventaja de usar JavaScript sin librerías merece la pena:

Por cierto, una de mis funciones favoritas es la de pluck que, recordemos, sirve para, a partir de un array de objetos, construir otro array con el valor de un atributo. ¿Cómo haríamos esta función en ECMAScript 6? Así:

Conclusión

La lista de cosas que podemos hacer hoy en día con JavaScript pelado es muy grande. Algunas de ellas sólo están disponibles en la versión más nueva de JavaScript (ECMAScript 6) que, por desgracia, todavía no está soportada por el 100% de los navegadores. Pero, insisto, hay muchas cosas que ya puedes hacer hoy en todos los navegadores usando Vanilla JavaScript, así que estudia tu proyecto en concreto y valora hasta qué punto necesitas cargar librerías como jQuery o Underscore.js.

Imagen destacada de Ilya Ilyukhin vía Unsplash.