AngularJS: el framework superheroico de Google


La llamada web 2.0 se caracteriza por el dinamismo de las páginas y aplicaciones web. Rendimiento, Accesibilidad, Seguridad y Adaptabilidad a los disímiles dispositivos disponibles son las principales características deseables de toda aplicación web moderna.

Pasados fueron los tiempos en los que para mostrar nuevo contenido en la página o modificar parte de ella era necesario recargarla en su totalidad.

Tecnologías como AJAX y Websockets, junto al uso de librerías como jQuery y Prototype, permitieron (y aún permiten) a los desarrolladores crear aplicaciones web dinámicas que en muchos casos parecen verdaderas aplicaciones nativas, dada su capacidad de respuesta y las técnicas que se usan para no recargar toda la página cuando se obtiene nueva información o cuando se navega hacia otra sección de la aplicación.

Las aplicaciones web (apps en lo adelante) que utilizan estas técnicas son llamadas SPA, que no son más que las siglas en inglés de Single Page Application (algo así como “Aplicaciones de una sola página” en nuestro idioma). Esto es por la impresión que se lleva el usuario de navegar por un único documento HTML cuando utiliza la app.

Un ejemplo de este comportamiento lo puedes ver en MyCyberAcademy. Al presionar el botón “MOSTRAR MÁS” observas cómo se muestra una animación (spinner) que indica el nuevo contenido que se está cargando, y en un instante la página se actualiza con dicho contenido agregándose al final.

El problema

Normalmente esa operación se realiza de forma asíncrona mediante una llamada AJAX, donde al obtenerse la respuesta del servidor se “añade al documento HTML (DOM en lo adelante)” el contenido nuevo utilizando Javascript.

Un ejemplo de código de esta operación es la siguiente:

<!-- asume que se incluyó acá la librería jQuery -->
<body>	
	<ul id="lista">
		<li>Artículo 1</li>
		<li>Artículo 2</li>
	</ul>

	<button id="mas">
		MOSTRAR MAS
	</button>	
</body>

Al dar clic en el botón con id="mas", desde Javascript se debe realizar una petición asíncrona y, con los datos devueltos, crear nuevos elementos li con los títulos de los artículos:

<script>
	$("#mas").click(function() {		
		// llamada AJAX
		$.post('/server/url', {cantidad: 8}, function(data, textStatus, xhr) {
	  		/*
	  		* suponiendo que en la variable data se encuentran 
	  		* los 8 artículos devueltos por el servidor en formato JSON
	  		*/
	  		$.each(data, function(index, articulo) {
  		    	// creo un elemento li con el valor del artículo
	  		  	var li = $("<li>" + artículo + "</li>");
	  		  	// lo añado a la lista de artículos
	  		  	$("#lista").append(li);
	  		});	  		
		});			
	})
</script>

A simple vista todo parece funcionar bien, pero hay 3 problemas principales:

Mezcla de responsabilidades

En este ejemplo se le está dando a Javascript la responsabilidad de crear nuevos elementos y situarlos en el DOM. Es decir, se están uniendo elementos de lógica de negocio con elementos de presentación.

Lo natural es que Javascript solamente sea responsable de obtener los datos del servidor y, de alguna manera, exponerlos a la vista para que esta se actualice con respecto a esos nuevos datos sin tener que lidiar con elementos del DOM (elementos li en este caso).

Pruebas al código muy difícil de llevar a cabo

Con el problema anterior es muy difícil testear el código, pues al estar la lógica de negocio fuertemente acoplada a la presentación se hace casi imposible probar con algún “test runner” la lógica de negocio de la app.

Difícil escalabilidad y mantenibilidad

Supón que deseas agregar un spinner para cuando se esté procesando la petición, tienes que incluir 2 líneas de código adicional:

  1. Cuando se da clic en el botón y antes de hacer la petición al servidor para mostrarlo:

$('<span class="spinner"></span>').appendTo("body");

  1. Cuando se termina de procesar la petición para esconderlo:

$("span.spinner").remove();

¿Y qué tal si un artículo está compuesto por: autor, fecha de publicación y contenido?

Son 3 variables más a considerar, implica que son 3 manipulaciones al DOM adicionales. Si no lo has hecho aún, observa la cantidad de código que has tenido que escribir para realizar la simple acción de cargar más artículos.

Imagina que aparte de eso tu aplicación tiene que insertar, eliminar y modificar artículos ¿No crees que para los tiempos actuales eso es demasiado? Ten en cuenta que lo único que estás haciendo es la simple acción de mostrar más elementos en un listado.

¿Existirá una mejor solución para las apps SPA? Sí: usa un framework Javascript.

AngularJS al rescate

AngularJS es un framework Javascript que te elevará por los cielos, respetará tu tiempo, hará del proceso de pruebas a tu código un disfrute y no un trabajo por hacer, hará del desafío de crear aplicaciones SPA una tarea muy simple, en fin, te dará la importancia que mereces como desarrollador web que eres.

AngularJS nació para hacer las cosas repetitivas y tediosas que normalmente haces en el 60% del tiempo de desarrollo, de forma automática y transparente, permitiendo te concentres en las funcionalidades reales que necesita la app para su construcción.

Separa la lógica de negocio de la presentación, utiliza la arquitectura MVW (Model View Whatever, si no has leído sobre este término, asume que es MVC, Modelo Vista Controlador) y permite crear vistas fáciles de comprender por su capacidad de darle el poder al lenguaje HTML de ser expresivo y más semántico.

Con ser expresivo y más semántico me refiero a que puedes crear elementos tal y como son. Ejemplo, un sistema de pestañas (tabset) podría tener el siguiente aspecto:

<sistemaDeTabs>
    <tab id="p1"> Pestaña 1 </tab>
    <tab id="p2"> Pestaña 2 </tab>
    
    <tabContenido de="p1"> Contenido de la pestaña 1 </tabContenido>
    <tabContenido de="p2"> Contenido de la pestaña 2 </tabContenido>
</sistemaDeTabs>

Y aunque te estés preguntando ahora ¿HTML reconocería eso? La respuesta es Sí, Angular lo hace posible.

Para darte una idea del poder de AngularJS sin darte una exhaustiva explicación teórica de cómo funciona el framework, lo eficiente que es, y cómo está compuesto (esto más adelante), prefiero mostrarte el ejemplo más simple que se puede hacer.

Te enseñaré un simple “Hola mundo” en jQuery y luego haré el equivalente en AngularJS. El demo consiste en un input de tipo texto que al escribir en él aparece el mismo texto en un elemento p.

Hola Mundo en jQuery



See the Pen 785b0c034d7350400651126e44118232 by Dimitri Lopez (@mycyberacademy) on CodePen.

Se registra el evento keyup para ejecutar una acción cada vez que se presione una tecla, lo cual tomará el valor del input y lo mostrará constantemente en el párrafo (elemento p).

Hola Mundo en AngularJS

–>




{{ saludo }}


See the Pen Saludo en angularJS by Dimitri Lopez (@mycyberacademy) on CodePen.

¿Y dónde está el Javascript? ¿Lo omitiste para ahorrar espacio? Pregunta usted.
Nop, no es necesario. Al añadirle el atributo ng-model="saludo" al input, se realizó una acción detrás del escenario que crea una variable saludo y donde quiera que se referencie esa variable en el documento, siempre tendrá el valor que va tomando en el input, INSTANTANEAMENTE.

De esa forma cuando escribas una palabra en dicho input, la variable referenciada mediante la sintaxis {{ saludo }} se actualizará de forma automática.

Observa que fue necesario agregarle al body el atributo ng-app. Esto le dice al framework que tiene que procesar todo lo que se encuentre entre esa etiqueta. Esto es una ventaja enorme, pues te da la flexibilidad de utilizar Angular no solo en toda la app, sino también en solo una pequeña parte de ella, donde lo necesites.

Si por ejemplo tienes una página estructurada en header, section y footer, puedes aplicar la directiva ng-app solo al elemento section y angular no procesará ni el header ni el footer, solo el contenido interno del section.

Conclusiones

Sin dudas AngularJS es una de las bleeding edge technologies (tecnología de punta) del desarrollo web moderno. En este artículo solo me restringí a explicarte el aumento de productividad que conlleva el aprender este framework para el desarrollo de aplicaciones web.

Tengo que destacar algo muy importante, y es que AngularJS es un framework javascript, y jQuery es una librería.

“Tu usas las funciones que una librería te brinda, un framework usa tu código (la lógica de tu app) para construir el producto.”

Te comento esto pues aunque comparé el poder de AngularJS sobre jQuery en esta entrada, hay que aclarar que estas dos tecnologías tienen enfoques similares pero diferentes, y una no pretende sustituir a la otra, de hecho, te doy 3 datos interesantes:

  1. AngularJS en su núcleo tiene una versión Lite de jQuery, y si este está cargado en la app en el momento en que se va a inicializar, utiliza jQuery en su lugar.
  2. AngularJS y jQuery pueden convivir en una misma app, pero si quieres obtener el máximo provecho del framework, debes aprender a “pensar en AngularJS” ¿Qué significa esto?
  3. Todo lo que haces con jQuery es posible hacerlo sólo con AngularJS.

Con esto le doy fin al artículo, estoy casi seguro que si no sabías sobre AngularJS, ahora te gustará saber. ¿Dónde podrás encontrar documentación?

¿Tienes algún conocimiento previo sobre AngularJS? ¿Cómo han sido tus experiencias con el framework, curva de aprendizaje y demás? Te invito dejes tus opiniones en los comentarios.