¿Por qué empezar a usar VueJS? (Comparación con JQuery)

Esta guía explica por qué deberías usar VueJS, y no depender exclusivamente de JQuery, a través de ejemplos.

La creación de sitios web con componentes interactivos (que actualizan su estado constantemente), es una tarea tediosa usando únicamente JQuery.

Se puede hacer, pero no es el mejor enfoque a seguir.

El uso de VueJS (similar a lo que aportan otros frameworks de Javascript) permite:

  • Desarrollar proyectos en menor tiempo
  • Escribir código más fácil de entender (y mantener)

Ahora vamos a ver:

Un ejemplo, que muestra cómo Vue puede simplificar nuestro código y la manera de pensar.

Ejemplo usando JQuery

Vamos a mostrar una lista simple.

Esta lista tendrá elementos, que pueden ser lo que sea, una lista de cosas a comprar, contactos, noticias, etcétera.

En este caso vamos a representar una lista de nombres de personas.

Usando JQuery nuestro ejemplo queda de la siguiente forma:

Código HTML

<input type="text" class="js-filter">
<ul class="js-people"></ul>

Código Javascript

var people = ['Jorge', 'Carlos', 'Cinthia'];

// Eliminamos los elementos que actualmente existen en la lista
$('.js-people').empty();

// Añadimos los elementos directamente al DOM
$.each(people, function(index, person) {
    $('.js-people').append("<li>"+ person +"</li>");
});

// Escuchamos cambios en el input
$('.js-filter').on('keyup', function() {
    // Obtenemos el valor buscado
    var value = $(this).val();

    // Ocultamos a todas las personas
    $('.js-people li').hide();

    // Y mostramos solo las personas que coinciden con la búsqueda
    $('.js-people li').filter(':contains("'+value+'")').show();
});

Aunque este ejemplo usa JQuery de una forma bastante simple, el código no resulta fácil de mantener.

Y esto se notará más en casos donde se requiera una mayor interacción con el usuario.

Usando JQuery, el "estado" de nuestros elementos es gestionado en base a lo que existe en el DOM.

Cuando a esto le añadimos estilos, o una estructura más compleja, el estado de los datos se hace más confuso, y empezamos a perder el orden.

Ejemplo usando Vue

Código HTML

<div id="app">
  <input type="text" v-model="filter">
  <ul v-for="person in people | filterBy filter">
    <li>{{ person }}</li>
  </ul>
</div>

Código Javascript

new Vue({
  el: '#app',
  data: {
    filter: '',
    people: [
      'Jorge', 'Carlos', 'Cinthia'
    ]
  }
});

El código requiere de menos líneas para expresar lo mismo, y es más fácil de mantener.

En este último ejemplo:

  • v-model="filter" se encarga de enlazar la caja de texto con la propiedad filter definida en el objeto data. Si el valor de esta variable cambia, el texto mostrado en la caja de texto se actualizará automáticamente.

  • Si nuestra aplicación modifica el valor del arreglo people, la vista también será actualizada automáticamente.

Algo importante a tener en cuenta es que:

Solo la información que necesita actualizarse será renderizada nuevamente.

Si nuestro arreglo tiene 100 elementos, y solo 1 cambia, solo 1 elemento del DOM será vuelto a renderizar.

Esto hace que nuestras aplicaciones sean más eficientes, y representa una mejora importante sobretodo en dispositivos móviles.

Conclusión

El ejemplo anterior es solo una pequeña muestra de todo lo que se puede lograr usando Vue.JS.

La belleza de Vue reside en que:

  • Se puede usar dentro de una aplicación más grande, pero así mismo puede escalar y ser una solución completa.

  • Otras alternativas como React y Angular requieren generalmente una mayor configuración y más código para lograr lo mismo.

Probablemente JQuery seguirá usándose en el desarrollo de páginas informativas, donde se requiere de muy poca interacción con el usuario.

Sin embargo, si te encuentras desarrollando una app con un alto nivel de interacción, te recomendamos usar Vue.js o algún otro framework, con el fin de evitar escribir "muchas líneas de código y lógica para mantener la vista actualizada usando JQuery".


Esta guía ha sido traducida y adaptada a partir de su versión original en inglés.

# javascript # vuejs # jquery

Logo de Programación y más

Comparte este post si te fue de ayuda 🙂.

Cualquier duda y/o sugerencia es bienvenida.

Regístrate

Inicia sesión para acceder a nuestros cursos y llevar un control de tu progreso.

Cursos recomendados

Imagen para el curso Aprende Javascript

Aprende Javascript

Domina JS con este curso práctico y completo! Fundamentos, ejemplos reales, ES6+, POO, Ajax, Webpack, NPM y más.

Ingresar al curso
Imagen para el curso Aprende Vue.js

Aprende Vue.js

Desarrollemos un Messenger! Aprende sobre Channels, Queues, Vuex, JWT, Sesiones, BootstrapVue y mucho más.

Ingresar al curso
Imagen para el curso Aprende Laravel

Aprende Laravel

Aprende Laravel desde cero y desarrolla aplicaciones web reales, en tiempo récord, de la mano de Laravel.

Ingresar al curso

Antes que te vayas

Inscríbete en nuestro curso gratuito de Laravel