Angular bajo el microscopio: qué es y por qué usarlo

Con este artículo intentaré ayudarte a comprender el potencial de Angular, un framework javascript completamente open source desarrollado por Google.

Sin embargo, antes de entrar en materia técnica demos algunos pequeños apuntes sobre su historia y los motivos que llevaron a la creación de un producto similar.
 

ANTECEDENTES

La historia de Angular está un poco enredada. Todo empezó en el 2009, cuando Misko Hevery y su amigo Adam Abrons, empezaron a trabajar part-time en un proyecto que pudiera simplificar el desarrollo a los web designers que no estaban muy familiarizados con el código. Una vez terminado, los dos registraron el dominio getangular.com porque en aquel tiempo angular.com no estaba disponible.

Este primer boceto de Angular no era fácil de explicar…incluso Hevery cuando se le preguntó cuál era este proyecto, esbozó una respuesta como:

“it’s a kind of Spread sheet in cloud so that we can bind data and save it without worrying about security persistent etc and UI will be in HTML.”

que podríamos traducir: 

“es una especie de hoja de cálculo en la nube, para que podamos vincular y guardar datos sin preocuparnos por la persistencia, la seguridad, etc. y la interfaz estará en HTML”.

Get Angular 

Después Brad Green, uno de los manager de Misko en google, le pidió trabajar en un proyecto interno que se llamaba Google Feedback Tool utilizando Google Web Toolkit (GWT). Después de 6 meses de desarrollo y más de 17.000 líneas de código, trabajar en este proyecto se convirtió en algo extremadamente difícil, dada la dificultad de testear los archivos fuentes generados en Java. En aquel tiempo era común generar archivos HTML y Javascript empezando con framework basados en Java. Estos framework, aunque dieron una ayuda importante, requerían un mayor tiempo de desarrollo, debido al hecho que ante cualquier cambio el código tenía que ser recompilado. En consecuencia, cualquier cambio necesitaba una nueva compilación. Llegados a ese punto Misko desafió a su manager diciendo que con angular habría conseguido reescribirlo en 2 semanas. E incluso aunque perdió la apuesta, porque le llevó unas 3 semanas, impresionó a Brad el cuál le pidió trabajara más y lo perfeccionase.Al final del proyecto Google Feedback Tool se logró con Angular que para la ocasión fue denominado AngularJs. 

Primer lanzamiento oficial...

Pasan unos meses y llegamos al 2010, año en el cual se lanzó la primera versión oficial de AngularJs. 

El primer framework Javascript para introducir el patrón de la dependency injection, ya muy popular y utilizado en el mundo backend, y el primero con el cual era posible producir web application exclusivamente con Javascript, sin el uso de los lenguajes server side. 

El funcionamiento de AngularJs estaba relacionado con los atributos escritos en la página HTML, un ejemplo es el clásico ng-controller, los cuales se leían y se les asignaba una función específica a cada uno de ellos.

Reescritura de AngularJs 

Por desgracia, después de algunos años, surgieron graves problemas de rendimiento de AngularJs. Algunos de los problemas más famosos se referían a los llamados variable shadowing y el digest loop, es decir el mecanismo con el cual AngularJs podía entregar el two-way data binding. Además en ese momento se hizo más fuerte la necesidad de tener un buen soporte para el mobile, algo que no había sido estudiado para AngularJs.

Para aquellos que deseen profundizar en la cuestión del digest loop...

Para resumir AngularJs, para poner a disposición el two-way data binding, crea para cada elemento de la interfaz que usa las directivas ng-model, un watch, o sea una función que “observa” los cambios en la variable sobre la que se define. El Digest Loop es el proceso por el cual se examinan todos los watch con el objetivo de identificar los cambios desde la última ejecución y posiblemente actualizar el DOM. 

El problema común se verificaba cuando una variable ligada a un watch, fuese modificada durante el digest loop. Esto hizo que todo el ciclo de actualización de watch se ejecutara nuevamente.

Dejo imaginar que sucedía en grandes aplicaciones con un mayor número de Watch: prestaciones pésimas y tiempo de carga absurdos. 

Angular 2+

P.D. con angular 2+ se refiere a todas las versiones de Angular sucesivas a AngularJs

Y aquí estamos, finalmente en el presente. La reescritura completa de AngularJs conduce al lanzamiento de Angular en el 2014. 

A pesar de que tienen el mismo nombre son sustancialmente diferentes.

Primero de todo Angular 2+ ha sido desarrollado con Typescript, un lenguaje de programación open source de Microsoft. Podríamos definir Typescript como un superset de Javascript, ya que no hace más que añadir elementos como tipos estáticos, clases, interfaces y generics. Todas estas cosas las encontramos desde hace tiempo en lenguajes mucho más maduros como Java.

Angular 2+ introduce otras características importantes para el desarrollo. A continuación, resumimos algunas:

• Angular CLI, es la command line interface de Angular. Es decir, una conjunto de comandos preparados para ser ejecutados en el terminal que ofrecen soporte desde la creación del proyecto y de los componentes hasta el deploy y los textos.
• Ayuda a los diferentes lenguajes. Angular 2+ ayuda además a Typescript, ES5, ES6 y Dart
• Soporte de programación Reactiva con RXJS. La programación reactiva (reactive programming) es un paradigma de programación que se diferencia del imperativo. Por este motivo serviría un artículo aparte, para poder exponer sus ventajas y sus características. Me limitaré a decir que la programación reactiva es la base de toda la infraestructura asíncrona de Angular 2+.
• Mejor gestión Estatal. Otro de los patrones utilizados es la centralización del estado de la aplicación. El objetivo principal de este patrón es simplificar el cambio y la lectura de datos a través de comportamientos específicos, uno de estos es saber dónde, cuándo y quién puede efectuar las modificaciones siguiendo un flujo unidireccional. Para implementar esto, Angular usa Redux, una biblioteca que es también un design pattern y que se basa sobre algunos conceptos como:
  • El estado es de solo lectura, o sea el estado de la aplicación no se puede cambiar directamente.
  • Única fuente de verdad, o sea que el estado es inmutable y es único para toda la aplicación, no pueden haber más estados.
  • Funciones puras, todos los cambios del estado han sido realizados con el uso de funciones puras (esto requiere profundizar algunos conceptos de la programación funcional)
  • Flujo unidireccional de los datos (one way data flow), significa que las modificaciones y la lectura de los datos siguen un flujo único, en pocas palabras, los datos que se pasan desde un componente parent a un child no pueden ser modificados por este último.

Además de la adición de estas características importantes, Angular 2+ se diferencia también por los cambios de sintaxis. En primer lugar, en vez de escribir ng-module y ng-controllers, se utilizarán las clases @NgModule, @Component, @Directive, @Service etc.. 

Además, en esta versión no existen más conceptos como el scope y los controllers, en su lugar ha sido creada una arquitectura que se basa en los componentes jerárquicos. 

En cuanto a la vinculación de propiedades se ha introducido el uso de los corchetes, como en este ejemplo:

mientras que para la vinculación de los eventos se utilizan los paréntesis (). En el siguiente ejemplo se entiende como el método onClick() ha sido conectado al evento click:

CONCLUSIONES Y RESUMEN 

Angular 2+ es uno de los mejores framework Javascript para la creación de SPA (single page application). Sin embargo, a diferencia de otros competidores como React o Vue.js, presenta una curva de aprendizaje más alta. Entonces, no es tan fácil de usar para quien está dando sus primeros pasos. Para poderlo usar bien y disfrutar al máximo de todas sus características es necesario tener conocimientos básicos de algunos Design Pattern y sobre todo de Javascript que a menudo requiere un poco de experiencia y de tiempo.

Y doy por descontado decir que Angular 2+, después de haber comprendido que es completamente diferente de AngularJs o Angular 1.X, ya que agrega muchas funciones nuevas y lo mantiene actualizado con el desarrollo web moderno, es preferible al estudio de su anterior. Sobre todo porque desde diciembre 2021, Google ha suspendido oficialmente el soporte de AngularJs.

En los próximos artículos analizaremos bajo el microscopio también React e Vue.Js, para después terminar con broche de oro con un artículo que los compare, examinando sus fortalezas y debilidades.

Stay tuned!