AngularJS Vs jQuery

  • Por
  • y  
¿Complementarias? ¿Competidoras? Analizamos similitudes y diferencias de jQuery y AngularJS, casos en los que sería más aconsejable una u otra librería y una comparativa de código, de un mismo problema, resuelto con ambas herramientas.

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?

Nota: Parte de este artículo es transcripción de una parte de la presentación sobre AngularJS que nos ofreció en DesarrolloWeb.com Alberto Basalo. Además adicionalmente hemos añadido una comparativa entre el "Hola mundo" típico de AngularJS con esta librería y el código que deberías emplear si usas jQuery.

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.

Nota: Para más información puedes leerte los capítulos iniciales del Manual de AngularJS, donde aprenderás más sobre las características del framework.

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.

Nota: Incluso jQuery puede traer mejoras de rendimiento con respecto a la misma funcionalidad que viene en AngularJS. No es el caso ahora estudiar el rendimiento de una y otra librería sino entender sus diferencias. No obstante, a pesar de jQuery poder dar un poco más de rendimiento en tiempo de ejecución, se notará solamente con trabajos intensivos y habría que tener en cuenta el tiempo de carga de la librería adicional para comparar definitivamente usar Angulas a secas o Angular con jQuery.

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>

Nota: Esta comparativa la puedes ver realizada en vídeo, en inglés, aunque resulta realmente fácil de seguirlo si entiendes un poco estos códigos: https://www.youtube.com/watch?v=uFTFsKmkQnQ

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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Autor

Alberto Basalo

Alberto Basalo es experto en Angular y otras tecnologías basadas en Javascript, como NodeJS y MongoDB. Es director de Ágora Binaria, empresa dedicada al desarrollo de aplicaciones y a la formación a través de Academia Binaria.

Compartir

Comentarios

Fran Av.

21/10/2014
jQuery y Angular
jQuery sigue estando genial, pero es para lo que es: acceder al DOM. Si alguien tuviese que hacer una aplicación grande tendría que ingeniar un montón de artefactos como los que tienes en AngularJS. Está genial que otros desarrolladores nos orienten y nos ofrezcan un montón de patrones y buenas prácticas para ponerlas en marcha nosotros de una manera tan productiva.
Lo que me mata son los errores en AngularJS. Depurar es un infierno, o quizás sea yo el que no sabe. Creo que todo esto tiene mucho recorrido por delante, y nosotros que lo veamos.

Leila Requinte

30/10/2014
Muy buena comparativa
Es un post muy interesante y realmente impresionantes las diferencias entre las dos tecnologías.

Jorge

03/1/2015
Gracias por la explicación
Acabo de tomar un curso online de Angular y tenía las mismas preguntas que contestaste en el artículo. Gracias!

noztum

05/2/2015
Estudiante 2ºaño de Desarrollo Web
No solo es una profesion si no lo mejor de todo es un hobbie.

noztum

05/2/2015
Siemplemente genial
Me encanta tu forma de relatar ya que es justamente lo que queremos escuchar, sigue asi. Eres un gran profesional.
Sobre el tema me parece que la implementacion de angular no deveria ser la sustitucion de herramientas actuales como es jquery si no la implementacion herramientas a la hora de diseñar por lo que el uso de JQUERY es optativo. creo que el camino que a elegido angularJS esta siendo el correcto hasta ahora.
sobre la depuracion de errores javascript siempre a sido dificil de depurar, la clave es saber que se escribe y por que se escribe.

eduardo mazzucchelli

23/2/2015
es conveniente usar angular para una aplicación relativamente compleja
Una aplicación, en donde maneja mucha intefase gráfica, sería conveniente comenzar con angular ?
Que me pueden decir al respecto ?

tatucha9

15/4/2015
Duda con Angular
Estoy haciendo un sistema en angular, y me temo que no encuentro la manera de mostrar un dato almacenado en BD en el <head> del html, por ejemplo, tengo el codigo de anatytics que es un <script> en BD. hago la llamada correspondiente en el head de la pagina y a la hora de renderizar el codigo lo añade en el <body> y no antes del </head>, como puedo llamar un valor <script> que esta en bd desde el <head> y lo mantenga en el head? Si lo coloco como una expresion lo muestra en el navegador

Elvira

09/6/2015
Las vistas en el html
Hola al que preguntaba acerca de generar interfaz, lo genial de Angular es q de hace en el html.

tolo

16/6/2015
Gracias
Gracias, me ha ayudado mucho este articulo.

Felipe Donoso

08/9/2015
jquery
Hola mira por lo que entendí con angular podría hacer sitios web que requieran mayor complejidad y debes usar el patrón de diseño mvc. Yo estoy empezando a realizar una app móvil y estaba viendo jquery + Cordoba, y con eso corría mi app en iPhone y windows phone ya que para android la hice nativa. Mi pregunta es, para hacer app móviles debo guiarme por jquery o podría utilizar angular o angular es mucho para una app móvil? Saludos y gracias por el artículo.

Edinson

21/2/2016
Veo que sí es necesario Jquery para acceder al DOM
Intenté ejecutar el primer código (de Jquery) pero referenciando la librería de AngularJS para ver Jquery estaba incluído como un subconjunto de Angular tal como lo dice el artículo pero observo que no se ejecuta ya que no encuentra la función $. En ese caso creo que sí es necesario jQuery para acceder al DOM o quizás tiene otra sintaxis diferente a como se hace en jQuery. Si me explican. Gracias.

agome021

07/3/2016
Excelente!!!
Muchas gracias DesarrolloWeb por esta aclaratoria, justo lo que necesitaba, me di cuenta que debo aprender AngularJS ya que lo necesito para el desarrollo de aplicaciones.

roel

09/9/2017
diferencias
diferencias de javascript con angular js.....?

cesar

25/9/2018
angulay y jquery
para mi es lo mismo, solo que angular te OBLIGA a seguir un patrón, pero si usas JQUERY con el modelo vista control seria relativamente el estilo de angular, eso es angular, un jquery con MVC