Redux, flujo reactivo unidireccional con Angular y RxJs

flujo-reactivo-unidireccional-con-Angular-y-RxJs

Continuando con el tutorial de Angular Avanzado nos centramos ahora en una arquitectura de comunicación de datos conocida como Unidirectional Data Flow o flujo de datos en un mismo sentido. Esta técnica es una mejora sobre el modelo básico de Angular, el double-binding, el cual facilitaba mucho el desarrollo en pequeños proyectos.

Cuando hablamos de mejora debemos ser honestos con los costes y beneficios: aquí vamos a mejorar la eficiencia en ejecución y a facilitar la depuración a costa de una mayor complejidad estructural y sintáctica. Merece la pena cuanto más grande sea el proyecto. Este es un ejemplo simplificado pero realista. Tómate tu tiempo para estudiarlo con calma.

Tomar las decisiones correctas en cuestiones de este calibre puede suponer la diferencia entre el éxito o fracaso de un proyecto. Voy a explicarte las razones para usar este patrón y la manera más sencilla de introducirlo en tus aplicaciones, dejándote en el umbral de soluciones aún más potentes como la gestión de estado centralizada con Redux.

Leer más

Compartir

Componentes dinámicos, directivas y pipes con Angular

componentes-dinamicos-directivas-y-pipes-con-Angular

El sistema de componentes de Angular te permite reutilizar pequeñas unidades para montar grandes y complejas interfaces. Eso es bueno porque la capa de presentación se come la mayor parte del tiempo de desarrollo. Pero podemos ir más allá.

Podemos crear componentes con estructura fija y contenido dinámico. Podemos dar funcionalidad extra mediante directivas y podemos crear pipes para transformar la presentación.

Y todo esto de una forma sencilla y familiar usando el CLI. No hay excusa para no reutilizar código en la capa de presentación. Don’t repeat Yourself!.

Leer más

Compartir

Detección del cambio en Angular

deteccion-del-cambio-en-Angular

La forma en que Angular realiza su renderizado y actualiza sus vistas es un factor clave para el rendimiento de las aplicaciones. ¿Cómo funciona la estrategia de detección de cambios de Angular? Pues tiene dos modos: default o automágico y onPush o mindfulness.

Es importante tomar consciencia sobre el proceso y las implicaciones. Es costoso realizar la detección más veces de lo necesario y no hacerlo suficientemente implica no ver resultados reales.

Afortunadamente el cambio del modo automático al manual no tiene por qué ser traumático. Con un mayor conocimiento del changeDetectionStrategy y un poco de trabajo extra tendrás aplicaciones más eficientes y mantenibles.

Leer más

Compartir

Tests unitarios con Jest y e2e con Cypress en Angular

tests-unitarios-con-jest-y-e2e-con-cypress-en-Angular

Continuamos este tutorial de Angular Avanzado con el tema controvertido del testing. Sí, ya sé que todos deberíamos hacerlo siempre, pero también sé que no es cierto. Así que vamos a ponerle remedio eliminando excusas y facilitando las pruebas automatizadas.

Por si hace falta su defensa: Las pruebas automáticas de código son la principal técnica de reducción de bugs y garantizan el buen funcionamiento durante un refactoring. Bueno para el usuario bueno para el programador.

Los desarrollos que hoy en día hacemos con Angular suelen ser de tamaño medio o grande y con una esperanza de vida y mantenimiento que se mide en años. Así que cuantas más pruebas tengamos menos miedo tendremos a cambiar el código. Y la necesidad de cambio siempre estará ahí. Veremos como Jest y Cypress nos ayudan muchísimo en la tarea.

Leer más

Compartir

Nx, mono repositorios en Angular

nx-mono-repositorios-en-Angular

Empiezo este tutorial de Angular Avanzado con la frase con la que acabé un artículo de opinión sobre arquitectura de software acerca de Angular para grandes aplicaciones.

Angular y las decisiones de diseño que le acompañan tienen como objetivo facilitar el desarrollo y mantenimiento a medio y largo plazo de aplicaciones web no triviales.

Las empresas de desarrollo y los clientes finales que escogen Angular, suelen ser de tamaño medio o grande. Cuanto mayor sea el problema más destaca este framework. Y tarde o temprano esos grandes proyectos necesitarán compartir o reutilizar código. La herramienta Nx de Nrwl ayuda en esa tarea facilitando la creación de espacios de trabajo multi proyecto: los mono repositorios.

Leer más

Compartir