Angular 2 y la “Developaralysis”

En este artículo hablo acerca de Angular 2, la tendencia en el desarrollo web, que nos espera en un futuro inmediato… 

La idea es no mostrar ninguna línea de código, solo dejar claros algunos conceptos básicos de lo que parece que tenemos por delante.

En próximos artículos ya iremos introduciendo un poco más acerca de Angular 2. Mostraremos algunas aplicaciones de ejemplos, empezando por ejemplos sencillos y complicándolos poco a poco.

Antes de entrar en materia, voy a dejar por aquí un artículo muy interesante acerca de la Developaralysis. Es muy probable que siendo informático, tengas esta sensación muy a menudo. Además, esto está muy relacionado, ya que si eres uno/a de los que se ha “peleado” con AngularJS, que ha pasado lo peor de su conocida curva de aprendizaje, que ha desarrollado alguna que otra aplicación con este framework o simplemente tienes la sensación de que ya lo dominas...¡lo vas a flipar! porque seguramente no te ha servido de mucho lo que has aprendido. ¡A desaprender se ha dicho!



 

Un poco de historia antes de empezar

El concepto de aplicación web no es del todo moderno. Aunque los inicios de internet se remontan a los años setenta, no ha sido hasta dos décadas después cuando se ha popularizado y extendido por todo el mundo. Todo esto gracias a la web. En pocos años la web ha evolucionado enormemente y se ha pasado de páginas sencillas, con contenidos estáticos y pocas imágenes a páginas complejas con contenidos dinámicos, dando lugar a aplicaciones web con contenido rico, animaciones, etc.

Habitualmente la lógica de negocio de las aplicaciones web se realizaba íntegramente en el lado del servidor, y se confiaba la propia naturaleza del sistema de URLs el mostrar una vista de aplicación u otra. Esto tenía varios problemas. Uno de ellos es que para el navegador, cada URL es completamente independiente del resto. Aunque tenga los mismos estilos y/o plantillas, estos tienen que volver a ser procesados desde cero. Aquí tenemos un problema de rendimiento. Otro problema típico era el de mantener el estado de la aplicación o el compartir información entre una vista y otra.

En ese momento, los lenguajes de tipo script como JavaScript se usaban para hacer pequeñas animaciones o interactuar con el usuario, pero poca cosa.

A medida que pasa el tiempo, las aplicaciones se empiezan a complicar cada vez más en el lado del cliente. Es cierto que debido a lo anárquico que es JavaScript, lo normal y más fácil es crear aplicaciones espagueti, inmantenibles y caóticas. Quizás por esto se pueda llegar a entender que en la actualidad existan tantos y tantos frameworks y librerías para este lenguaje.

Para intentar solucionar los problemas de las aplicaciones web clásicas y a la vez los de JavaScript, nacen las aplicaciones SPA (Single Page Application).

En esencia, una SPA es la interfaz de la aplicación web implementada casi íntegramente en el navegador (en lenguaje JavaScript básicamente), aunque como toda página web tenga una base importante de HTML yCSS. Todas las vistas de la interfaz de la aplicación están contenidas en la SPA, realizando una única carga inicial y solo posponiendo recursos pesados: grandes cantidades de datos, imágenes, videos…

El uso intensivo de este tipo de frameworks empezó a darse a partir de 2010. Existe gran variedad de SPA y cada una tiene sus peculiaridades. Las más famosas son BackboneJS, EmberJS, MeteorJS, ExtJS o AngularJS. Al principio BackboneJS era la más utilizada y conocida, aunque a lo largo de los últimos años esta tendencia ha ido cambiando y ahora AngularJS es la más utilizada con mucha diferencia. Haciendo una simple búsqueda con la herramienta Google Trends podemos ver esta tendencia que digo.



 

Entrando un poco más en detalle

Angular es una librería JavaScript que al parecer crearon de casualidad en Google hace ya 5 años. Esta librerías nos permite crear aplicaciones web completas del lado del cliente. Sí, del lado del cliente, lo que quiere decir que cuando accedes a la aplicación web, esta se descarga y se ejecuta en tu navegador. Pero tranquilo, esto no es para nada ineficiente. Existe la inyección dinámica de dependencias que nos permite cargar solo la parte de la aplicación que estamos visualizando sin necesidad de tener la aplicación por completa cargada desde el inicio de la ejecución.

Angular intenta seguir un patrón MVC y digo “intenta” porque no es exactamente eso. El patrón que sigue Angular lo llaman , en algunos lados, MVP (Model-View-Presenter), en otros MV* (Model-View-Whatever). De manera genérica, los componentes de MV* se podrían definir como sigue:

• Model ($scope y Servicios): Información del sistema con la que se hace binding en la parte visual.
• View (HTML, CSS, Filtros y Directivas): Define el aspecto visual de la información.
• Whatever (Controladores y $scope): Lógica de presentación de la ventana para gestionar el flujo, comunicación con servicios, etc.

Básicamente, lo que se intenta es separar las responsabilidades y de esta manera no mezclar las capas de presentación con nuestra lógica de negocios o con los datos.

Una de las virguerías que nos enamoró a todos inicialmente fue el doble binding. El hecho de modificar el $scopedesde la vista o el controlador y ver cómo se actualiza en ambas partes sin hacer nada es bastante mágico, aunque poco eficiente.

Como esto no pretende ser un curso de Angular, continuo avanzando y dejo una serie de enlaces donde pueden leer en profundidad acerca de esta librería.

• AngularJS (Website oficial, tutoriales y documentación).
• AngularJS – GitHub (Código fuente de AngularJS).
• AngularJS – O’Really (Libro escrito por Brad Green y Shyam Seshadri, ambos colaboradores del proyecto AngularJS).
• Recipes with AngularJS – Leanpub (Libro de recetas y técnicas útiles a la hora de manejarse con el framework, se va actualizando cada cierto tiempo).
• egghead.io (Website de recetas de AngularJS).

La web evoluciona

Desde que Angular nació hace 7 años, la web ha cambiado significativamente. Por ejemplo, en ese momento era casi imposible construir sitios web sin ayuda de librerías como jQuery. Hoy en día, los navegadores son más consistente, rápidos y además ofrecen nuevas características y herramientas particularmente pertinentes para los entornos de aplicaciones.

Y los cambios continúan…

Uno de los cambios más significativos es el de ECMAScript6, un estándar que sigue JavaScript desde hace 1 año (Junio 2015) que transforma radicalmente la experiencia de programación JavaScript. Actualmente, sigue sin ser soportado por todos los navegadores.

Los grandes cambios no se ven limitados solo a JavaScript. Los Web Components también son una reciente incorporación al HTML5 que, gracias a la flexibilidad, agilidad y facilidad de reutilización que ofrecen, pueden suponer el mayor cambio en el mundo web en años.

En el blog también tenemos un artículo dedicado a los Web Components. En él podrás conocer un poco más sobre este estándar.

Y ahora… Angular 2

Realmente el nombre puede despistar porque Angular 2 no es una nueva versión de la librería ya existente, es un nuevo framework construido desde cero.

Se trata de una librería que, al igual que su predecesora, se utiliza para crear aplicaciones web del lado del cliente, pero mirando la web de otra manera.

Con la reciente incorporación de los Web Components a HTML5, y la revolución que conllevará esto para la web, se están creando bastantes librerías que nos ayudan a construir nuestras webs y aplicaciones haciendo uso de estos nuevos elementos.

Además de la evolución constante de la web, han existido otra serie de motivaciones para la creación de esta nueva librería.

Rendimiento

Angular ha sido un éxito absoluto y ha ido evolucionando. Cabe decir que, inicialmente, Angular no se creó para desarrolladores. Era una herramienta orientada para que los diseñadores pudiesen crear rápidamente formularios HTML. Con el tiempo la librería se ha ido adaptando a otros escenarios y han sido los desarrolladores los principales usuarios de esta librería.

Actualmente, hay infinidad de aplicaciones profesionales realizadas con Angular. Toda esta evolución se ha desarrollado teniendo en cuenta que existen ciertos límites técnicos debido a las desiciones de diseño en la arquitectura de la herramienta que se tomaron en un inicio.

Bueno, en definitiva, en el equipo de Angular han decidido que lo mejor era no mantener la deuda técnica existente y teniendo en cuenta los problemas encontrados y la evolución de las aplicaciones y los lenguajes de programación han sacado Angular 2.

Movilidad

Desde la aparición de Angular, la web ha cambiado y también la forma como accedemos a ella. En la actualidad los smartphones y tablets están por todos lados y un gran porcentaje de accesos a la web se hace a través de este tipo de dispositivos.

Con Angular se pueden construir aplicaciones para móviles, aunque como no fue diseñado para este propósito, existen problemas fundamentales de rendimiento, imposibilidad de almacenar en caché vistas ya visitadas, gestión de eventos para pantallas táctiles, etc. Angular 2, consciente del problema que esto conlleva, también ofrece soluciones para solucionarlo.

Facilidad de uso

La primera vez que viste una aplicación en Angular, o cuando empezaste a dar los primeros pasos con la librería seguro que te pareció muy fácil de utilizar. A medida que pasaba el tiempo te ibas encontrando con algunos problemas cuya solución no era para nada sencilla, más bien rebuscada y difícil de entender. De ahí la famosa gráfica de la curva de aprendizaje de Angular.



 

Mucho de esto, una vez más, se debe al diseño original y a la intención de la librería. Por ejemplo, en las primeras versiones no existían las directivas ni los controladores. Estas fueron añadidas en versiones posteriores lo que nos lleva a una librería con soluciones poco elegantes (en ocaciones).

A parte de estas motivaciones que se han nombrado, existen una serie de cambios con respecto a la librería predecesora que pasaré a enumera a continuación.

En Angular 2 tenemos la posibilidad de desarrollar las aplicaciones con TypeScript o directamente con JavaScript. Para quién no lo conozca, TypeScript es un lenguaje de programación de código abierto desarrollado y presentado por Microsoft hace unos años. Es un superconjunto de JavaScript que esencialmente añade capacidades de POO como es el tipado estático y objetos basados en clases.

Por otro lado, Angular 2 está basado en Web Components. Desde Google se las vieron venir, y a finales de 2012 empezaron el desarrollo de Polymer, una de las implementaciones más destacadas de los componentes web. Cabe decir que si los Web Components siguen evolucionando al ritmo al que lo están haciendo, pueden suponer el mayor cambio en el mundo web en años y solucionar de golpe varios problemas históricos de HTML.

Como sabemos, en Angular 1 creamos las aplicaciones haciendo uso básicamente de los Controladores, Directivas y Servicios. En Angular 2 esto cambia radicalmente.

A continuación se listarán una serie de cambios que surgen en esta nueva versión.

• En lugar de Controladores, tendremos Componentes.

• En lugar de Servicios, tendremos Clases que simulan estos Servicios. Básicamente en Angular 2 todo son Clases y todo está orientado a objetos. Además podremos usar los decoradores, anotaciones y propiedades de clase pero esto es cosa de ES7 y ya no entra dentro de este tema. 

• El $scope desaparece. Ya desde Angular 1.2 es considerado como buenas prácticas usar el “controller as” y no utilizar el $scope. Ahora ya ha muerto definitivamente.

• Sigue existiendo el doble binding, aunque ya no está por defecto. En Angular 1, si introducíamos un valor en el $scope, este estaba sujeto al doble binding. Esto no es para nada eficiente ya que en ocasiones queremos visualizar una serie de valores sabiendo que estos no van a ser modificados. En estos casos no tiene sentido el doble binding.

• Los Pipe son los nuevos Filtros. Un Pipe no es más que un filtro que nos permite aplicar cierta lógica sobre un objeto, una variable, etc.

• Si has trabajado con Angular 1, sabrás que las Directivas pueden ser utilizadas para extender el DOM. En Angular 2 tenemos los Componentes para este propósito.

• En Angular 2 también tenemos directivas aunque no tienen mucho que ver con las de Angular 1. En este caso, cuando se desea usar un componente dentro de otro, se hará a través de la propiedad directives.

• Se usa subscribe en lugar de los watch de Angular 1 para capturar diferentes eventos en los modelos.

Como ves, hay numerosos cambios en esta nueva librería y es probable que ahora tengas un montón de dudas sobre el futuro de ella. ¿Ya existe una versión estable de Angular 2? ¿Se seguirá dando soporte a Angular 1? ¿Puedo empezar a utilizar la nueva librería para mis desarrollos?

Sí, ya existe una versión estable de la librería y la puedes descargar de su web.

Con respecto a si se seguirá dando soporte, lo cierto es que no hay que tener ningún miedo. Solo dentro de Google existen más de 1000 aplicaciones desarrolladas con Angular 1 así que es poco probable que abandonen a su suerte esta versión de manera repentina.

También hay que decir que en la compañía de Cupertino existen 2 equipos diferenciados (liderados por Pete Bacon Darwin) que trabajan por un lado en la nueva versión 2.0 y por otro lado siguen evolucionando y manteniendo la versión antigua.

En resumen, si tu intención es crear una aplicación JavaScript avanzada o una SPA, Angular 1 sigue siendo una opción muy buena, con soporte asegurado para varios años. En alguna ocasión han comentado que la versión antigua se mantendrá por 2 o incluso 3 años después del lanzamiento de la versión estable de Angular 2.

Si lo tuyo es más curiosidad y no tienes una aplicación ya en ciernes puedes ir aprendiendo sobre el tema. Ya existe una versión estable de la librería pero quizás es un poco pronto y arriesgado aventurarte a desarrollar una aplicación completa con esta nueva versión. Es muy probable que te encuentres con algunos problemas durante el desarrollo y aún no hay una comunidad suficientemente grande como para que te puedan ayudar a resolverlos.