Hoy en día está poniéndose de moda dejar atrás el desarrollo web puramente en Javascript y jQuery para dar el salto a frameworks que implementan el paradigma reactivo. En este contexto, a muchos de los que están mirando Vue con cariño les surge la pregunta: ¿qué es mejor, jQuery o Vue? Pero ¿es válido compararlos cuando, por ejemplo, podemos usar jQuery dentro de los componentes de Vue? ¿Estamos tratando de comparar peras con olmos?

A lo’ bife’. ¿Qué es JQuery y qué es Vue?

jQuery es una librería para Javascript que nos proporciona una manera más sencilla de interactuar con el DOM y de hacer llamadas AJAX. En definitiva, todo lo que hacemos con jQuery lo podemos hacer con Javascript puro, pero probablemente nos lleve más líneas de código y sea más complicado. Asimismo, jQuery no es reactivo ni declarativo, sino que cuando lo usamos programamos de manera imperativa.

Según el sitio de Vue.js, Vue es un framework progresivo para el desarrollo de interfaces de usuario. ¿Qué significa “progresivo”? Que se implementa mediante lenguaje de marcado adicional sobre el código HTML. Vue tiene como ventaja una suave curva de aprendizaje, razón por la que es uno de los frameworks reactivos y declarativos más adoptados y el preferido de los principiantes. Otras alternativas con las mismas características pero un poco más complejas son ReactJS y Angular.

Entonces, como podemos ver, Vue y jQuery son un poco difíciles de comparar porque no cumplen la misma función.

¡O sea que puedo usar jQuery en Vue!

Sí, pero puede traernos problemas. Al parecer, Vue y jQuery compiten por el manejo del DOM. En particular, Vue tiene la molesta tendencia de “pisar” los cambios que hacemos con jQuery en el DOM.

En la práctica, es probable que solo usemos jQuery dentro de Vue cuando necesitemos implementar algún componente que se base en esta librería (por ejemplo, un datepicker), y eso lo hacemos en momentos específicos del ciclo de vida de los componentes de Vue (vamos a hablar más sobre esto en un futuro artículo).

Entonces ¿qué ganamos con Vue?

¿Por qué deberíamos comenzar a usar Vue? ¿Qué problemas soluciona? Si acostumbramos a desarrollar sitios web utilizando JQuery o Javascript puro, la filosofía de trabajo es bastante diferente.

Si, por ejemplo, queremos que al hacer clic en un botón se escriba un texto en un <p>, primero le pondríamos un id o clase al botón en el HTML.

<button id="boton-que-escribe-texto">Escribir texto</button>
<p id="p-sin-texto"></p>

Luego crearíamos un script donde se vincule (“bindée” en idioma de desarrollador argentino) el evento click del botón a una función que busque el p por id o clase, lo guarde en una variable y le sobreescriba su atributo text con un determinado String.

$("#boton-que-escribe-texto").on("click", function() {
    var parrafo = $("#p-sin-texto");
    parrafo.text("Acá está el texto");
});

Para operaciones más complejas, la lógica del click de un botón puede contener invocaciones a varias funciones:

function bindearSubmiteoForm() {
    $("#pnt-boton-submit-portabilidad").on('click', function (event) {
        event.preventDefault();
        mostrarSpinner();
        validarCampos();
        guardarPortabilidad();
        ocultarSpinner();
    });
}

Si nuestro sitio presenta bastante complejidad, seguramente vamos a terminar con una maraña de funciones donde, para poder seguir el flujo de ejecución de las distintas funcionalidades, hay que ir saltando de un pedacito a otro, recorriendo el archivo para arriba y para abajo.

Este es un problema típico de sitios desarrollados de la manera “tradicional”. A medida que los archivos de Javascript van creciendo en tamaño, la complejidad de mantenimiento del código aumenta. Es normal terminar con archivos de javascript que contienen la lógica de todos los componentes de una vista.

Además, si tenemos que copiar un componente o grupo de componentes a otra página, deberíamos copiar el código HTML y buscar cuáles son las funciones correspondientes en esa ensalada para replicarlas en la segunda página. Si surge un cambio en el negocio que altera parte de esa lógica, deberíamos hacer ese cambio en las dos páginas.

Acá es donde Vue patea el tablero.

Vue es como los Lego

Para entender lo distinto que es manipular eventos y el DOM en Vue con respecto a jQuery, vamos a implementar el mismo caso que en el ejemplo anterior, pero utilizando este framework.

En Vue, tendríamos un componente que engloba el HTML, el CSS y el Javascript en un solo archivo. Como el HTML del componente funciona también como template, podríamos crear una variable “textoDelP” en nuestro componente y ubicarla como texto del <p> en nuestro HTML. Luego vincularíamos el evento click del botón (en el mismo HTML) con un método del componente:

<div>
    <button @click="escribirTexto"></button>
    <p>{{ textoDelP }}</p>
</div>

Finalmente, escribiríamos la función, donde simplemente asignaríamos un String determinado a nuestra variable textoDelP. Gracias a la implementación que hace Vue del paradigma reactivo, ese cambio en la variable dispararía el redibujado del <p>:

methods: {
    escribirTexto: function () {
        this.textoDelP = "Acá está el texto";
    }
},

¿El resultado? Una sola función autocontenida, con una cantidad de código mínima, y un código HTML transparente donde vemos qué variable es la que controla el contenido del <p>, y qué función se dispara cuando hacemos click en el botón.

Así quedaría el archivo completo:

Vue.component('componente-de-prueba', {
    data: function () {
        return {
            textoDelP: ''
        };
    },
    methods: {
        escribirTexto: function () {
            this.textoDelP = "Acá está el texto";
        }
    },
    template: 
    `
    <div>
        <button @click="escribirTexto"></button>
        <p>{{ textoDelP }}</p>
    </div>
    `
});

Queda claro por qué no necesitamos jQuery en Vue: La estrecha relación entre el template HTML y la lógica en Javascript, así como la reactividad nos ofrecen una nueva manera de manipular el contenido dinámico de la página.

{{ pensamientosFinales }}

¿Vue es mejor o peor que jQuery? Es distinto, aunque cabe aclarar que las buenas prácticas de Vue son un patrón de diseño, por lo que seguirlas resulta en un código más limpio y ordenado.

Y a vos, ¿te interesaría tomar el camino de Vue, o preferís seguir por la senda de jQuery?

 

En el futuro vamos a seguir escribiendo artículos dedicados a Vue, donde exploraremos sus posibilidades, su ecosistema de herramientas y, por qué no, sus problemas y falencias.