Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

VueJs o Jquery

VueJs o Jquery 17.JUL.17

Alvaro José Rios Ch
Fundador WebBizarro

Como siempre lo he dicho lo mejor siempre es aprender a usar Vanilla antes de usar cualquier framework, la razón es que JavaScript ofrece muchas bondades y es simple de usar, sin embargo si ya conocemos el lenguaje y como funciona es bueno tener herramientas que nos ayuden a acelerar el trabajo y hacerlo más fácil de mantener.

Para poder comparar ambas librerías vamos a hacer un ejemplo simple, haremos un botón que incrementa un contador cada vez que hacemos click.

Jquery

<div id="output"></div>
<button id="increment">Increment</button>
<script>
  var counter = 0;
  $(document).ready(function() {
    var $output = $('#output');  
    $('#increment').click(function() {
      counter++;
      $output.html(counter);
    });
    $output.html(counter);
  });
</script>

Bien parece bastante simple pero por un momento quitémonos la experiencia que tenemos programando con Jquery, imaginemos que somos programadores novatos, no es tan simple como parece no es así, primero que nada la función ready de Jqeury, además que tenemos que conocer como funciona el DOM del documento y debemos conocer los eventos JavaScript que debemos ejecutar.

El segundo problema son los selectores, si tenemos un botón no es problema pero cuando tenemos muchos, es complicado especificar cada uno de los eventos sobre cada componente especifico y debemos colocar filtros muy complejos en los objetos del DOM.

Sin embargo no todo es malo o no sería tan popular, Jquery tiene un patrón muy simple, seleccionas algo y haces algo con él, además cuenta con muchos métodos para facilitar el trabajo desde hacer consultas ajax hasta manejar arreglos sin embargo es complicado con este modelo saber lo que hace cada método y lo que retornan por lo que los novatos tienen que luchar un poco al principio.

VueJS

<div id="app">
  <div>{{ counter }}</div>
  <button v-on:click="increment">Increment</button>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      counter: 0
    },
    methods: {
      increment() { 
        this.counter++;
      }
    }
  });
</script>

Bien en la versión con VueJS podemos ver que también es bastante simple de implementar, sin embargo es un poco más legible que la versión con Jquery, no tienes que preocuparte por el DOM o el manejo de eventos porque todo está encapsulado lo que lo hace muy fácil de entender para los novatos.

Como pueden ver la data vincula el contador con el HTML por lo que no tenemos que preocuparnos por actualizar el valor solo modificamos el valor en el código y se actualizará en el HTML.

Finalmente no tenemos un montón de métodos que recordar con nombres que no nos dan mucha información ya que todo está muy bien organizado en el constructor de Vue o son aplicados directamente en el DOM del template.

Bien como conclusión podemos ver que Jquery no es más fácil solo es una forma abreviada de hacer el trabajo ya que tenemos que tener comprensión del DOM y del manejo de eventos lo que puede ser un poco difícil para los que están empezando.

Vue es el chico nuevo en el barrio y puede que algunas personas estén un poco contrarias con la idea de cambiar, pero si alguien te pregunta que framework JavaScript debe aprender primero puede que Jquery no sea la mejor opción.

Una vez más les digo que es importante aprender primero Vanilla JavaScript, entender como funciona el lenguaje y una vez ya lo tengas dominado cualquier herramienta te va a ayudar a mejorar.