Vetando a Jquery en tu proyecto AngularJS

AngularJS, Consejo, Javascript

Cualquier get started de un proyecto AngularJS, normalmente viene adjunta la librería JQuery para facilitarnos la vida a la hora de actuar en diferentes elementos, pero en el equipo donde trabajo, nos tomamos como reto/determinación, evitar usar JQuery y así no ensuciar el código mezclando librerías.

¿Y el por qué de esta decisión?, pues al fin y al cabo, Jquery para lo que normalmente lo usamos en Angular, es para trabajar de forma mas cómoda haciendo referencia a selectores html, pero si lo pensamos un poco, es algo que podemos evitar, y por ello, ahorrarnos la carga de otra librería extra innecesaria en nuestra aplicación.

Por ejemplo, para hacer click en un elemento en la web, ya tenemos el “ng-click” y declaramos un método en el “scope”, no es necesario irnos a Jquery y usar el “$(‘selector’).on(‘click’, function() {});”, podemos usar:

y esto lo podemos llamar en el html como  <div ng-click="methodName()">Content to click</div>

Una alternativa propia de Javascript, para trabajar con selectores, es el  document.querySelector(".example");  que con JQuery es lo mismo que hacer: $(".example");. Y sí, escribimos unos cuantos caracteres mas, pero nos seguimos ahorrando miles de lineas de una librería extra.

Una web, por pocos KB que nos ahorremos, siempre es positivo. Si es cierto que hoy día con las buena velocidades de conexión y métodos de caché, optimizamos mucho las cargas de archivos, pero aun así, si podemos seguir rascando KB, pues mejorará nuestro tiempo de carga y performance en la aplicación.

Considero una mala práctica/costumbre muchos ejemplos que hay por internet, que a la hora de hacer un mínimo autocomplete, utilizan Angular + JQuery, cosa que pensando 5 minutos mas, usando directivas, consigues el mismo resultado. Quizás un aporte positivo, que con JQuery no genera watchers en la aplicación, pero hay muchos métodos y buenas prácticas para llevar a cabo el mismo resultado y con una performance optima.

La última versión de Angular que hay disponible cuando estoy escribiendo este post, son unos 126KB minificados, y si ahora en un proyecto, añadimos JQuery son 84KB minificados, es decir, mas del 60% extra  en una librería que la usamos puntualmente para ciertas cosas.

Espero que esto sirva como un punto de vista diferente a plantear las cosas 😉

tags: , , ,

  • Marcos Villavicencio

    Muy buen post!
    Creo que el uso de JQuery actualmente se utiliza para esos efectos que nos agradan a la mayoría,
    ya que es realmente fácil de hacer.
    Esa es la duda que yo tengo, se puede hacer que aparezca la información con algún efecto utilizando angular
    con jquery sencillamente hariamos algo asi :

    $(“div”).fadeIn(1000, function(){
    // aqui lo demas XD
    });