Ecosistema y estado del Framework Angular

Published in

Bancolombia Tech

9 min readMar 15, 2021

Angular 8 and the Future — NGConf 2019 Roundup | juri.dev (juristr.com)

¿Qué es Angular?

Lanzado por Google el 20 de octubre de 2010, Angular es un framework de JavaScript para el desarrollo de aplicaciones web SPA (Aplicaciones de una Sola Página). Este nos permite trabajar con elementos de la web en una arquitectura de componentes, desligándose del backend de una forma sencilla, óptima y con buenas prácticas. Cuando hablamos de aplicaciones SPA con Angular nos referimos a una web de una sola página, en la cual, la navegación entre secciones de la aplicación y páginas se realiza sin refrescar, y la carga de datos es de forma dinámica y asincrónica.

¿Por qué Angular?

Es una pregunta muy común el porqué utilizar Angular o cuáles son los factores principales para recomendarlo. Se resumen en 3 muy importantes:

Angular Team: el equipo de Angular es interdisciplinario, capacitado y con más de 12 años de experiencia desarrollando la web. Son los creadores de AngularJS (la versión legacy de Angular) y están siempre en la búsqueda de los mejores desarrolladores y arquitectos web para vincularlos al proyecto. Este equipo también está comprometido con la evolución, innovación y mantenimiento del framework para estar a la vanguardia del mundo web.
Uso de TypeScript: la adopción de TypeScript en el desarrollo del framework fue un acierto por parte del equipo, ya que esto le brindo la capacidad de manejar el tipado estricto de los datos y los atributos privados en nuestro código (clases, interfaces y parámetros); permitiendo encontrar errores y bugs en fases tempranas del desarrollo de nuestras aplicaciones.
La comunidad: al día de hoy cuenta con una comunidad bastante amplia y activa alrededor del mundo. Las dos conferencias más grandes sobre el tema, La NgConf realizada en Estados Unidos y el AngularConnect en Europa, son realizadas por la comunidad; en ellas participa activamente todo el equipo de Angular. También hay otras charlas y meetups en todo el mundo. En el caso de Colombia existe una conferencia anual llamada “NgConf Colombia” y varios eventos, en estos se comparten conocimientos acerca de las nuevas características.

Componentes “core”

Cuando creamos un proyecto base con Angular tenemos a nuestra disposición varios módulos importantes para el desarrollo de aplicaciones web sin necesidad de instalar dependencias adicionales, ya que estas vienen integradas al core de Angular. Las tenemos a disposición simplemente realizando importaciones en nuestros componentes, servicios, módulos, etc. Entre los módulos encontramos los siguientes:

Angular Forms: con este módulo tenemos la capacidad de crear formularios con validación de campos de entrada y de integridad para nuestras aplicaciones. Los formularios son una característica importante a la hora de recopilar información de nuestros usuarios. Existen dos maneras para manejar los formularios en Angular: formularios de template (template-drive) y formularios reactivos (reactive forms). Los primeros nos sirven para trabajar los formularios desde el template HTML de Angular y se recomiendan para la complejidad baja; por otro lado, los formularios reactivos nos permiten tener el control de nuestras validaciones desde el controlador Angular, se recomiendan para formularios escalables y de complejidad alta.
Angular Router: los sistemas de routing en aplicaciones de tipo SPA(Single Page Application) son muy importantes, ya que estos nos permiten el intercambio de contenido de forma dinámica y en una misma página. El routing de Angular es el encargado de permitirnos la navegación interna de los componentes de nuestra aplicación. En las aplicaciones Angular tenemos un módulo específico llamado el app-routing.module, que es el encargado de manejar todas nuestras rutas y los módulos de rutas de nuestras aplicaciones de forma reactiva.
Angular http: las comunicaciones http son un factor importante en las aplicaciones modernas ya que estas son las encargadas de enviar y recibir información de nuestro backend. Con el módulo http de Angular tenemos esta capacidad de una forma asíncrona, implementando el patrón observable de la librería RxJs. El módulo http también nos permite utilizar interceptores para añadir capacidades de seguridad a nuestras peticiones, el ejemplo mas claro es enviar un token de acceso.
Compiler Ivy: una de las apuestas mas grandes de Angular en el último tiempo fue reescribir su compilador y runtime, a esto lo denominamos Angular Ivy. Un compilador que cuenta con un sistema de renderizado más óptimo, eliminando el código de las funciones no utilizadas en nuestra aplicación gracias al tree-shaking. Este se encuentra disponible a partir de la 9° versión de Angular y se destaca por los bundles más pequeños, compilador y ejecución de pruebas de forma rápida, y mejoras en el debug y visualización de errores.
Angular Animations: el módulo de animaciones es aquel que nos permite tener una interacción más visual con nuestros usuarios. Este nos permite realizar transacciones capaces de cambiar el color, tamaño o ubicación de un componente de nuestra aplicación. Al tener animaciones en nuestras aplicaciones logramos tener apps más divertidas, fáciles de usar y con un mayor interés de los usuarios. El módulo de animaciones de Angular se basa en usar CSS, lo que hace que podamos animar cualquier propiedad que interprete el navegador.

Herramientas

El ecosistema Angular cuenta con una amplia oferta de herramientas que nos ayudan a mejorar la productividad de los desarrolladores y enriquecer nuestras aplicaciones con diversas características, algunas de las más importantes son:

Angular Cli: nos permite tener una automatización al momento de crear y actualizar nuestras aplicaciones. Es una herramienta de línea de comandos para crear diferentes recursos (componentes, servicios, módulos), ejecutar, probar y poner en producción nuestra aplicación. Con el Angular Cli tenemos la posibilidad de actualizar una aplicación angular de una versión a otra en menos de 30 minutos.
Angular Augury: es una herramienta de desarrollo que se usa como extensión en los navegadores Google Chrome y Mozilla Firefox, nos permite hacer debugg a nuestra aplicación por medio de un árbol de componentes, permite obtener información valiosa de la estructura de la aplicación y del rendimiento de nuestras funcionalidades. Augury es un proyecto open source de Google.
Angular Universal: es una de las herramientas más utilizadas al momento de hablar de SEO (posicionamiento en buscadores), ya que nos permite realizar SSR (Server Side Rendering o renderizado del lado del servidor). Al realizar un renderizado en el servidor logramos entregar un DOM mas completo a los motores de los buscadores, contribuyendo a un mejor SEO. Adicionalmente, logramos una disminución en el tiempo de carga del lado del cliente (navegadores) ya que podemos entregarle al navegador una aplicación renderizada.
Scully: sirve para generar sitios web estáticos de Angular. Este adopta una arquitectura JamStack. Se encarga de renderizar todos los componentes de nuestra aplicación y generar archivos estáticos HTML y CSS que no necesitan cargar javascript.
Angular Language Services: esta herramienta es una extensión que se puede integrar a los editores de código moderno como lo son Visual Studio Code, WebStorm y Sublime Text. Al estar integrado realiza lectura de nuestro árbol de componentes, servicios y módulos; ayudándonos a tener un diagnóstico de nuestros archivos, brindándonos sugerencias, corrección de errores y autocompletando código común en el desarrollo de aplicaciones Angular.
Nx: esta herramienta nos permite el desarrollo de aplicaciones avanzadas, facilitando la creación de mono-repositorios; donde podemos tener múltiples proyectos con un único conjunto de dependencias, además de compartir código entre proyectos que utilicen diferentes tecnologías, por ejemplo: React o VueJS. La herramienta nos permiten crear software de manera más inteligente y rápida hasta llevarla a un marco fullstack.

Componentes UI

Las aplicaciones modernas compiten por la atención de los usuarios y lograr los mejores resultados en la interacción entre la app y el cliente final. Por esta razón, el equipo de Angular y equipos de terceros han contribuido al desarrollo de librerías que tienen la capacidad de mejorar el comportamiento y la visualización de nuestros componentes; logrando una experiencia mucho más fluida y sencilla con nuestras aplicaciones:

Angular Material: basada en la guía de diseños de Material Design, está desarrollada y mantenida por el equipo de Angular. Dentro de esta librería tenemos diferentes componentes visuales como los botones, cajas de texto, barras de navegación, entre otros. Al momento de utilizarla dentro de nuestras aplicaciones se debe importar por cada componente un módulo diferente en nuestra aplicación.
Angular CDK: el CDK (Component Dev Kit) de Angular es una de las herramientas para lograr la construcción de componentes UI para la Web. Nos permite tener una abstracción de componentes de la guía de Material de forma agnóstica al estilo que sigue Angular Material, logrando por ejemplo, construir un branding personalizado.
Angular PrimeNG: esta es otra de las librerías de componentes visuales para el desarrollo de interfaces en Angular. Esta librería nos proporciona una lista larga de componentes (botones, tablas, cajas de texto, etc.) con un alto performance, accesibles y personalizables. Es una opción alterna a Angular Material.

Manejo de Estado

NgRx: es una de las librerías principales para el manejo del estado en las aplicaciones de mediana y gran escala, la implementación de Redux. Cuando hablamos de Redux nos referimos al manejo centralizado del estado de la aplicación. No es fácil usar esta solución, pero nos garantiza un buen rendimiento ya que se encuentra basada en RxJs y es modular.
Akita: es otra de las alternativas que tenemos para la administración del estado de nuestra aplicación. También está desarrollada con RxJs e implementa el patrón Redux y Flux. La diferencia con sus competidores es lo simple que puede ser, ya que solo maneja dos conceptos principales: el Store y el Query.

Testing

Jasmine & Karma: son dos herramientas por defecto para proyectos Angular. Nos sirven para el desarrollo y ejecución de pruebas unitarias de nuestras aplicaciones. Estas 2 herramientas vienen desde AngularJS y se han visto relegadas por otras herramientas debido a que en proyectos de mediana y grandes magnitudes su ejecución se torna un poco lenta.
Jest: es una librería para la ejecución de pruebas de Javascript. Jest tiene un principio, centrarse en la simplicidad; lo que hace que la ejecución y desarrollo de sus pruebas sea simple y rápido. Está basado en las APIs de Jasmine, por lo cual la sintaxis es la misma y no es necesario el uso de un navegador para ejecutar pruebas.
Cypress: es la librería para la ejecución de pruebas E2E más completa en la actualidad, ya que envuelve todo en uno. Esta incluye librerías de aserciones, mocks y pruebas E2E (End-to-End Testing) automáticas sin utilizar Selenium. No utiliza Selenium ya que en la evaluación de su arquitectura ejecuta todo en el ciclo de ejecución de la aplicación. Cypress es compatible con los frameworks modernos para el desarrollo de aplicaciones tipo SPA, entre esos está Angular. Una de las ventajas principales de Cypress es que al partir de la base de un framework como Selenium y Puppeteer es más amigable con los desarrolladores de QA, es mucho más rápido y se integra fácilmente con los navegadores.

Mobile

Ionic: es un framework para el desarrollo de aplicaciones móviles híbridas, el cual, en sus últimas versiones, nos da la posibilidad de utilizar Capacitor para encapsular contenido generado con frameworks como Angular, React y VueJS; presentándolas como aplicaciones totalmente funcionales para los móviles. Aún así perdieron adopción y popularidad por las nuevas tecnologías que han salido en el mercado y que generan mayores beneficios.
NativeScript: es uno de los frameworks que puedes utilizar para el desarrollo de aplicaciones móviles híbridas. La gran diferencia frente a Ionic es que no crea un WebView para el funcionamiento de la aplicación, sino que tiene la capacidad de compilar una aplicación nativa para iOS y Android.

Conclusiones

Angular es un framework que posee un ecosistema bastante amplio, el cual nos puede aportar a la construcción de cualquier tipo de aplicación moderna SPA(Single Page Application). Estas aplicaciones pueden ser apps sencillas o a gran escala. Dependiendo de su complejidad, las podemos enriquecer visualmente o adicionarles un manejador de estado. Podemos acondicionarlas para su funcionamiento en móviles e implementarles practicas de arquitectura limpia para que sean escalables.
Tenemos dentro del core de Angular las librerías necesarias para tener un sistema de rutas y comunicaciones http de forma reactiva, sin necesidad de añadirlas desde proyectos terceros (como sí sería necesario al trabajar con librerías diferentes para el desarrollo de apps SPA). Esto es un valor agregado ya que su evolución depende de un solo equipo especializado.

En estos últimos años asistimos a eventos de nivel local e internacional y conocimos más de la comunidad Angular. Esto fue una experiencia bonita por todo lo que se mueve a su alrededor: las personas con su gran calidez e interés de aprender, y el conocimiento tan especializado para compartir con los compañeros.

Nos motiva compartir conocimiento e invitar a otros a enriquecer el ecosistema Angular a través de nuestra comunidad frontend interna de Bancolombia.

En Bancolombia buscamos cómo mejorar nuestros desarrollos y ser más ágiles. Este esfuerzo derivó en la creación de nuestro propio sistema de diseño, hoy utilizado por más de 180 aplicaciones.

Si quieres conocer con mayor detalle en qué consiste y cómo hemos creado nuestro sistema de diseño, puedes leer el siguiente artículo: Creando nuestro sistema de diseño basado en Atomic Desing.