El pasado sábado 17 de Junio asistí a un taller organizado por la comunidad Meetup de Angular Madrid en las oficinas de Life Ray en el Paseo de la Castellana. El taller en cuestión era una introducción a Angular totalmente para Dummies. No era necesario ningún tipo de conocimientos previos para atender y entender el workshop, por lo que era ideal para iniciarse en este framework.

Personalmente, trabajé hace un par de años con AngularJS al utilizar Ionic Framework y he usado otros frameworks frontend como ReactJS, por lo que este tipo de frameworks no era nuevo para mi, pero si quería empezar a conocer Angular de manos de un experto en la materia.

El ponente

Gonzalo Ruiz de Villa fue el encargado de impartir este taller. Gonzalo es Google Developer Expert (aunque en la charla se quiso quitar méritos) y ejerce como Director ejecutivo de GFT y es considerado uno de los mayores expertos en Angular que hay en España.

Personalmente fue un auténtico lujo contar con un ponente tan cercano, abierto y tan experto en la materia. Fue atento con todos los asistentes del taller y provocó que las 4 horas se hicieran cortas a pesar de levantarse un sábado con esta ola de calor.

Detalle del Taller de Introducción a Angular

El taller comenzó con una parte teórica y de historia de cómo se ha llegado a Angular 4, de cómo jQuery se ha quedado desactualizado con las necesidades actuales de las aplicaciones web y que quizás no deberíamos de usar jQuery para todo como si de una navaja suiza se tratara.

Al comenzar a conocer Angular, se nos mostró una comparativa con su versión anterior AngularJS, la cual fue un experimento total y los desarrolladores diseñaron sobre la marcha e improvisaron para implementar mucha de las soluciones a los problemas que se les planteaban.  Producto de toda esta experiencia anterior, se decidió implementar desde cero el nuevo framework con un diseño más adecuado.

AngularJS hacía un uso intensivo del algoritmo dirty checking para verificar si en el árbol DOM ha habido algún cambio, lo que provocaba el uso intensivo del garbage collector del navegador. En esta nueva versión se ha reconstruido el algoritmo para detectar los cambios del modelo llegando a ser el más rápido del mercado.

Pensado totalmente por y para mobile: Mobile First

Angular está construido sobre bases mobile, orientado a mobile first y pensado para el desarrollo de Progressive Web Apps. Además permite construir apps nativas con Native Script, como lo hace React Native. Se ha reconstruido de 0 el componente de Renderer y permite renderizar en el navegador, en una aplicación nativa o en el lado servidor con Server Side Rendering.

Gonzalo nos presentó el stack de Angular mostrándonos los componentes principales de internacionalización, renderización, compilación o inyección de dependencias. Un framework totalmente componentizado y llevado a un versionado semántico con el que conocemos la compatibilidad entre los distintos componentes. Debido a esta estandarización se saltaron la versión 3 del Framework para avanzar y unificar la versión 4 de aquellos componentes compatibles entre si. Básicamente, el componente Router había sido reescrito hasta 3 veces, por lo que se decidió comenzar con este número de versión.

El futuro de la web

Tuvimos una conversación interesante acerca del futuro de la web y las Progressive Web Apps y la posibilidades que ofrecen a los navegadores, con la implementación de los Service Workers que permiten crear versiones offline de nuestras webs actuando de proxy en el navegador contra nuestro dominio.

Un ejemplo de esta implementación lo podemos ver en el diario Huffington Post ya que son capaces de mostrar noticias cuando estas sin conexión a internet. Además las APIs que se están estandarizando están guiando el futuro de la web con funcionalidades como la lectura de huella dactilar, background sync o web bluetooth, reduciendo el gap que hay entre aplicaciones nativas y web apps y generando conceptos como la Physical Web.

Antes de comenzar con la parte práctica Gonzalo nos enumeró las principales ventajas que nos aporta el framework:

• Pensado para construir aplicaciones del tamaño que sea
• Estrategia Mobile first
• Rendimiento brutal en comparativa con otros frameworks
• Sencillo y expresivo con una curva de aprendizaje media
• Inmutabilidad
• Inyección de dependencias jerárquica
• Integración con webcomponents
• Solución de internacionalización i18n
• Permite de una manera sencilla implementar server side rendering
• Integración con web workers
• Desarrollo de aplicaciones nativas, de escritorio
• Pensado para construir PWA
• Potente herramienta de scaffolding con Angular CLI

Parte práctica

Tras la interesante parte teórica comenzamos a meternos en materia comenzando con la parte práctica. Con npm y ng-cli preinstalado y a través de un taller guiado construimos una pequeña aplicación Angular empleando los conceptos más básicos del framework y conociendo la bases de este.

Trabajamos en la construcción de componentes Angular, con el router de Angular que permite trabajar con un sistema de navegación basado en urls, apoyados con sintaxis TypeScript que da mayor control al programador y aporta anotaciones con valor semántico muy interesantes.

También trabajamos la comunicación asíncrona http para consumo de apis, uso promises para convertir toda la comunicación entre módulos asíncrona y el sistema de inyección de dependencias que permite mantener el código totalmente desacoplado.

Aquí os dejo el repositorio del proyecto con todo el código fuente trabajado en el taller:

https://github.com/adrianalonso/taller-iniciacion-angular-madrid

Slides de la charla

Además del código os comparto las slides que Gonzalo nos mostró en el taller.

Espero seguir trabajando con Angular profesionalmente y aplicarlo a un proyecto muy pronto. Os comentaré los avances que pueda hacer con este framework en nuevos posts.