No quiero comenzar a escribir sin explicar bien el título de este artículo. Quien tenga alguna idea de AngularJS quizás piense que hemos patinado al intentar enfrentarlo a jQuery pues son librerías con filosofías diferentes, que sirven para resolver distintos tipos de problemas. En definitiva, las dos son para endulzar el Javascript del lado del cliente, pero cada una es adecuada para un tipo de problemas. Sobre todo esto hablaremos con bastante detalle a lo largo del artículo, para no causar confusión entre los lectores, tanto noveles como experimentados. Unimos además una comparativa de las filosofías de ambas herramientas, reflejada en el código de resolución de un mismo problema, lo que nos ayudará a entender mejor sus diferencias.

Dicho eso, aclaro que la elección del título responde a ésta es una duda habitual de las personas que se interesan por Angular u otras librerías MV* de Javascript. Si tú tienes la duda, o quieres entender mejor la filosofía de AngularJS, puedes seguir leyendo. Si tú ya conoces perfectamente las diferencias y no necesitas saber más, puedes saltarte este artículo y seguir tranquilamente por el siguiente del Manual de AngularJS.

Muchos de nosotros hemos entrado en el mundo de las librerías Javascript de la mano de jQuery. Incluso hay también muchos desarrolladores que han entrado en el lenguaje Javascript aprendiendo jQuery. El caso es que en el pasado lustro jQuery ha dominado el mundo del desarrollo del lado del cliente y sigue usándose de manera muy habitual, hasta el punto de considerarse casi un estándar. Sin embargo, nuevas librerías Javascript y frameworks como AngularJS van un paso más allá de donde se queda jQuery, aportando muchas otras utilidades y patrones de diseño de software.

Después de haber invertido tanto tiempo en el aprendizaje de jQuery, una de las preguntas que muchos nos hacemos cuando conocemos AngularJS es ¿Qué me queda de todo eso cuando me pase al desarrollo con AngularJS? ¿Qué pasa con jQuery? ¿Sirven para hacer lo mismo? ¿son competidores? ¿complementarios?

AngularJS y jQuery son dos librerías de alcances distintos

Si queremos entrar en esta discusión, y para no liar a aquellos desarrolladores con menos experiencia, debemos decir que jQuery y AngularJS son librerías bien diferentes. El alcance y el tipo de cosas que se hacen con una y otra librería son distintos.

jQuery es una librería que nos sirve para acceder y modificar el estado de cualquiera de los elementos de la página. A través de jQuery y los selectores de CSS (así como los selectores creados por el propio jQuery) eres capaz de llegar a los elementos de la página, a cualquiera de ellos, y puedes leer y modificar sus propiedades, suscribirte a eventos que ocurran en esos elementos, etc. Con jQuery podíamos manejar cualquier cosa que ocurra en esos elementos de una manera mucho más cómoda que con Javascript "a pelo" y compatible con la mayor gama de navegadores.

Sin embargo Angular pasa de ser una librería para convertirse en un framework de aplicaciones web. No solo te permite una serie de funciones y mecanismos para acceder a los elementos de la página y modificarlos, sino que también te ofrece una serie de mecanismos por los cuales extender el HTML, para hacerlo más semántico, incluso ahorrarte muchas líneas de código Javascript para hacer las mismas cosas que antes hacías con jQuery. Pero la principal diferencia y por la cual AngularJS toma la denominación de "framework", es que te marca una serie de normas y hábitos en la programación, principalmente gracias al patrón MVC implementado en AngularJS.

jqLite dentro de AngularJS

"AngularJS se ha comido a jQuery". Dentro de AngularJS tienes una pequeña implementación de jQuery. Todos hemos usado millones de veces jQuery y es una librería excelente porque nos facilita el acceso al DOM y además nos ofrece un API de funciones que son compatibles con todos los navegadores.

Eso mismo lo tienes dentro del script de AngularJS, por lo que si no lo deseas, no necesitas usar jQuery para nada. Dentro de Angular tienes jqLite "jQuery Lite" que viene a ser una librería de acceso al DOM, con la mínima funcionalidad necesaria.

Esto quiere decir que las directivas que trae AngularJS usan jQuery por debajo, o algo muy similar, un subconjunto de jQuery. Por supuesto, cuando tú programes tus propias directivas puedes usar la librería de acceso al DOM que viene con AngularJS. Si esa pequeña librería no te resulta suficiente y necesitas mayor funcionalidad, nadie te impide usar el jQuery de verdad.

Si AngularJS detecta que estás usando jQuery, todo el tema de acceso al DOM lo hará a través de jQuery, dejando su implementación (jqLite) sin usar. Si detecta que no tienes jQuery, entonces pone en marcha su propia librería de acceso al DOM.

Entonces uso jQuery dentro de AngularJS ¿sí o no?

Sí, puedes usarlo, aunque no es absolutamente necesario.

Sin embargo, debe quedar claro que el uso de jQuery debe quedar restringido a las vistas, filtros y creación de nuevas directivas, nunca al uso de factorías, servicios o controladores. Cuando una persona que viene de jQuery y comienza a usar AngularJS es normal que caiga en costumbres y mecanismos a los que está habituado con aquella librería. Por ejemplo, se corre el riesgo de querer acceder al DOM desde los controladores y es algo que no se debe realizar bajo ningún concepto.

En ese sentido, para las personas que usan AngularJS y están acostumbradas a jQuery, en un principio al menos puede ser recomendable evitar siempre que se pueda usar jQuery. Es decir, "no usar jQuery hasta que no sea estrictamente necesario". Y cuando lo uses, insistimos, siempre será desde la definición de las directivas, nunca desde los propios controladores.

Si tus requisitos son más sencillos, realización de sitios web en los que tienes poco peso de Javascript y limitado a crear interfaces de usuario dinámicas o pequeños comportamientos interactivos, puedes seguir usando jQuery. AngularJS está más destinada a aplicaciones web complejas, más parecidas a las aplicaciones de escritorio, con uso muy intensivo de Javascript. No todos los problemas típicos de un sitio web sería adecuado resolver con AngularJS, pues a veces será como "matar moscas a cañonazos" y por la complejidad de Angular te puede generar código más difícil de producir y sobre todo de entender para una persona con menos experiencia.

Además el hecho de Angular usar patrones de diseño como el MVC puede despistar bastante a las personas con menos bagaje en el mundo de la programación. Los patrones de diseño son algo que está para ayudarnos, pero no todos los proyectos y desarrolladores los necesitan, pues complica la curva de aprendizaje de las tecnologías y en ocasiones si nuestro problema es sencillo no ofrecen una solución sensiblemente mejor.

Comparativa de código jQuery / AngularJS

Ha quedado claro que Angular va más allá del objetivo de jQuery. Son dos librerías distintas, que muchas veces se pueden complementar, pero dependiendo del tipo de proyecto y de las cosas que tengas que hacer con Javascript elegirás una u otra. No obstante, queremos hacer esta comparativa de código para observar algunas de las diferencias de filosofía entre jQuery y AngularJS y también comprobar de paso la potencia de este último.

En este caso vamos a comparar el código que vimos en el Hola Mundo de AngularJS. La idea es simplemente escribir un nombre en un campo de texto y volcarlo en una etiqueta H1.

Esto en jQuery se podría hacer con un código como este:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ej Hola Mundo desarrollado en jQuery</title>
</head>
<body>
    <h1>Hola</h1>
        <form>
            ¿Cómo te llamas? <input type="text" id="nombre">
        </form>

    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script>
    $(function(){
        var campoTexto = $("#nombre");
        var titular = $("h1");
        campoTexto.on("keyup", function(){
            titular.text("Hola " + campoTexto.val());
        });
    });
    </script>
</body>
</html>

En AngularJS ya vimos el código necesario en un artículo anterior, pero lo reproducimos para poder compararlos fácilmente.

<!DOCTYPE html>
<html lang="en" ng-app>
<head>
    <meta charset="UTF-8">
    <title>Ej Hola Mundo desarrollado en AngularJS</title>
</head>
<body>
    <h1>Hola {{nombre}}</h1>
        <form>
            ¿Cómo te llamas? <input type="text" ng-model="nombre">
        </form>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>
</html>

Como habrás observado, con AngularJS se simplifica nuestra vida. No solo que no necesitas hacer muchas de las cosas que en jQuery tienes que programar "a mano", como el acceso al campo de texto para recuperar el valor, la creación del evento de teclado para hacer cosas cuando se escribe dentro del campo de texto, etc. Lo que más debería llamar nuestra atención es que el código de AngularJS es mucho más entendible, incluso por personas que no tengan idea de programar. Como puedes deducir, en Angular escribimos generalmente menos código Javascript, pero sí es importante decir que debido al uso del patrón MV* (separación del código por sus diferentes objetivos), en ejemplos más avanzados observarás que entran en juego diferentes factores que complican las soluciones. Generalmente, aunque en la métrica de líneas de código AngularJS pueda ganar a jQuery, también debes saber que te exigirá mayor capacidad de abstracción y entender diversos conceptos de patrones de diseño de software.

Todo ello nos debe hacer entender mejor la potencia de AngularJS. Pero ojo, sin desmerecer a jQuery, pues debe quedar claro que cada librería es útil en su campo.