🔁 🈴 🙌🏼 6 conceptos que un arquitecto de aplicaciones angulares necesita dominar ♀️ 👼🏾 🔩

Angular es uno de los marcos web más grandes que existen. Incluye muchas características incorporadas. Y esto significa que para el desarrollo completo de Angular necesita lidiar con una buena cantidad de conceptos. El autor del material, cuya traducción publicamos hoy, cree que hay seis conceptos que los desarrolladores de Angular necesitan tener un conocimiento profundo para crear aplicaciones bien diseñadas. Sin embargo, no está hablando de estudiar el código fuente para la implementación de estos conceptos, aunque él mismo a veces tiene que investigar el código. Se trata de comprender los mecanismos relevantes y la capacidad de ponerlos en práctica.

1. Arquitectura, módulos y bibliotecas.

En el mundo del desarrollo web, la arquitectura modular de Angular es algo especial. Probablemente, esta es una de esas ideas que son peores que otras adoptadas por principiantes.

La parte más difícil aquí es que el desarrollo web ya usa una arquitectura modular. Por supuesto, estoy hablando de las importaciones de ES6.

Dado que los módulos angulares agregan un nivel adicional de agrupación lógica al sistema, es importante que su estructura se corresponda lo mejor posible con las tareas resueltas con su ayuda.

Saber cómo separar y combinar la funcionalidad de la aplicación utilizando módulos bien diseñados es una parte fundamental de la creación de una arquitectura de aplicación angular.

▍Varios tipos de módulos angulares

Hay varios tipos de módulos angulares a tener en cuenta:

Declaraciones / Módulo de widgets. Módulos con declaraciones de diversas entidades. Un ejemplo de tales módulos es el conjunto de componentes de la interfaz de usuario, directivas, tuberías.
Módulo de servicios. Módulos de servicio Por ejemplo - HttpClientModule.
Módulo de enrutamiento. Módulos de enrutamiento
Módulo de funciones de dominio. Módulos que implementan las tareas clave de la aplicación.
Módulo principal / compartido. Un módulo central es un módulo para declarar servicios globales. Un módulo compartido es un módulo en el que los componentes se declaran para compartir.

Aquí está el material donde puede encontrar detalles sobre los módulos angulares.

▍ Biblioteca o módulo?

Diría que la distinción anterior entre módulos se puede extender a las bibliotecas. Con este enfoque, resulta que puede haber una biblioteca que contiene solo servicios, una biblioteca que representa la ruta, etc.

Pero si se crea un módulo o biblioteca depende del tipo de proyecto, y si el proyecto está representado por un mono-repositorio o varios repositorios.

▍ Preguntas que debe hacerse antes de crear un módulo

Aquí hay algunas preguntas que hacer antes de escribir un módulo:

? — , . , . , .
, ? . , , . , , .

2. ,

Compartir responsabilidades es, en teoría, simple. Pero en la práctica ya es más difícil. Los desarrolladores, desde la época de Angular.js, sabían que los componentes deberían hacerse lo más compactos posible, y los servicios deberían hacerse más grandes. En las nuevas versiones de Angular, estas ideas no han cambiado mucho.

Y hoy en día es importante tener una idea de qué debería ser exactamente parte de los componentes, qué es parte de los servicios, y también tener en cuenta el hecho de que las directivas son probablemente una característica muy subestimada de Angular.

▍Condición

La respuesta a la pregunta de dónde exactamente almacenar el estado del componente depende de dónde se necesitan los datos correspondientes. Es decir, pueden ser necesarios solo en el componente, siendo locales y encapsulados, o pueden ser necesarios fuera del componente.

Si los componentes comparten el estado, o es necesario acceder al estado desde los servicios, entonces el estado debe almacenarse en el servicio. Además, si el estado se almacena en el servicio, qué herramientas de administración de estado en particular se usan no juegan un papel especial.
Si el estado es local (por ejemplo, estamos hablando del formulario) y se usa solo dentro del componente, entonces el estado simplemente debe guardarse en el componente.

▍Trabajando con el DOM

Probablemente la mayoría de las manipulaciones DOM deberían hacerse en directivas. Imagine que uno de los componentes está equipado con la funcionalidad de arrastrar y soltar.

Estoy seguro de que en esta situación puede crear un componente y vincular los eventos correspondientes, pero si lo hace, se mezclarán dos fenómenos:

Descripción de la apariencia del componente.
Determinación del comportamiento de los componentes.

Las directivas son una característica angular que le permite describir mecanismos reutilizables. En casi todos los proyectos en los que trabajé, noté el uso insuficiente de las directivas. Las directivas pueden asumir una parte considerable de la responsabilidad de los componentes.

Aquí hay un ejercicio para usted: encuentre el componente más grande en su proyecto actual por la cantidad de líneas de código. ¿Se usa en él Renderero ElementRef? La lógica correspondiente, muy probablemente, puede transferirse a la directiva.

3. Detección de cambio y renderizado

Cuando se trata de volver a representar la interfaz de usuario, en Angular todo se hace como por arte de magia, utilizando los mecanismos internos del marco.

Pero si necesita optimizar la aplicación para que la interfaz se vuelva a representar solo cuando sea necesario, debe lidiar con esta "magia". Y, para mejorar el renderizado, debe confiar no solo en el conocimiento, sino también en la intuición.

Un arquitecto de aplicaciones angulares probablemente debería ser consciente de que se utiliza una estrategia de detección de cambios para optimizar el rendimiento de la representación onPush. Pero en el curso del trabajo, todo no siempre sale como se esperaba. Especialmente cuando las plantillas no usan objetos observables y tuberías asincrónicas.

▍ Mejora la detección de cambios

Para mejorar el proceso de detección de cambios utilizado en el proyecto, tiene sentido comenzar con las siguientes ideas:

Es necesario considerar todos los datos como inmutables. Las bibliotecas de administración de estado basadas en Rx pueden ser muy útiles aquí.
Para generar datos en plantillas, vale la pena usar solo (o principalmente) objetos observables. Cuando se usa un estado local, vale la pena solicitarlo BehaviorSubject.

Si desea desarrollar aplicaciones angulares de alto rendimiento, solo necesita lidiar muy bien con los problemas de detección de cambios. El hecho es que el alto rendimiento ni siquiera es "actualizar la interfaz cuando se necesita". Esto es "actualizar la interfaz solo cuando es necesario".

▍ Superar las limitaciones de rendimiento angular

Reducir el número de repeticiones de la interfaz de la aplicación es uno de los secretos que le permite crear aplicaciones rápidas y eficientes. Pero a veces el rendimiento de la aplicación debe ir más allá de los límites definidos por el propio dispositivo angular. Entre tales aplicaciones se pueden observar juegos, proyectos cuyos datos a menudo se actualizan, páginas que muestran listas grandes y complejas, etc.

Si realmente necesita exprimir al máximo el rendimiento angular, esto significa que debe recurrir a una técnica que implique deshacerse de Zone.js y actualizar con precisión la interfaz utilizando las últimas características de Ivy. Aquí está el material al respecto.

4. Enrutamiento

El enrutamiento no es solo una representación de SPA en forma de muchas páginas virtuales. También está cargando paquetes de aplicaciones bajo demanda utilizando las capacidades de carga diferida de los materiales del subsistema de enrutamiento angular.

Si está trabajando en una aplicación grande y el tamaño del paquete de esta aplicación excede 1 MB, entonces probablemente ya sepa por qué esto es importante. De hecho, nadie encontrará la posibilidad de descargar grandes cantidades de datos para trabajar con una determinada aplicación.

El enrutamiento debe usarse no solo para separar rutas de nivel superior, sino también para organizar el trabajo con las partes más profundas y menos profundas de la interfaz.

Esto le permite dividir el contenido de los paquetes por rutas principales y ayuda a dividir las aplicaciones en partes pequeñas que no necesitan transferirse a los usuarios hasta que se realice una solicitud explícita para descargarlos.

▍ Ejemplo: componente con pestañas

Supongamos que estamos desarrollando una interfaz de usuario que utiliza pestañas. Además, cada pestaña es independiente de las demás. Esta es una situación ideal en la que a cada pestaña se le puede asignar su propia ruta y organizar la carga de datos diferidos, durante la cual solo los datos de la pestaña seleccionada se transmiten al cliente.

¿Quieres otro ejemplo? ¿Qué pasa con las ventanas emergentes y modales? No es necesario incluir su código en los materiales incluidos en el paquete original del proyecto. El código de tales ventanas tiene sentido cargar solo cuando se necesitan, pero no antes.

Si desea algo inspirado antes de aplicar tales ideas, le sugiero que eche un vistazo a la documentación del componente @ angular / material / tabs , que implementa el patrón anterior.

5. Formas

La mayoría de las aplicaciones CRUD se componen esencialmente de muchas formas. Es muy probable que pases mucho tiempo creando formularios. Por lo tanto, es importante para alguien que quiere ser un arquitecto angular dominar el trabajo con formularios correctamente.

Es probable que la mayoría de sus formularios usen un módulo ReactiveFormsModule. Y si no consisten en un solo control, entonces, usándolos, ngModelse implementará el enlace de datos bidireccional.

La API angular para trabajar con formularios es bastante fácil de aprender. Para lograr la excelencia en el uso de esta API, en general, es suficiente estudiar la documentación correctamente y saber qué problemas pueden surgir al trabajar con formularios.

El principal problema que vale la pena saber es que los formularios en Angular no están vinculados a los tipos de datos que los subyacen. Esto es probablemente lo más desagradable de trabajar con mecanismos que, de lo contrario, están muy bien hechos. Como resultado, resulta que el desarrollador necesita monitorear cuidadosamente que los formularios corresponden a las estructuras de datos que se utilizan cuando se trabaja con ellos.

6. RxJS

Y el último en nuestra lista, aunque no menos importante, es la tecnología RxJS.

Estoy convencido de que una de las características más poderosas de Angular es la profunda integración de este marco con Rx y la programación reactiva funcional.

Para dominar verdaderamente Angular, allanando el camino para el diseño de aplicaciones de alta calidad, primero debe estudiar Rx, o al menos los operadores más importantes. Es difícil ser un desarrollador Angular verdaderamente avanzado sin pasar muchas horas entendiendo Rx.

Hay dos razones para aprender Rx para ayudarlo a desarrollar aplicaciones angulares: rendimiento y procesamiento de datos asíncrono.

El procesamiento asíncrono de datos es una tarea particularmente difícil en aplicaciones modernas y altamente interactivas. Por lo tanto, debe olvidarse de las promesas, oh setTimeouty oh setInterval, y comenzar a trabajar en el estilo Rx.

Otra razón seria para aprender Rx es optimizar el rendimiento de la aplicación. Por supuesto, para empezar, es suficiente usar tuberías asincrónicas, pero a veces esto no es suficiente. Puede controlar la nueva representación de componentes, por ejemplo, pasando a través de la tubería solo aquellos eventos cuya ocurrencia implica la necesidad de una nueva representación.

Rx proporciona al desarrollador muchos operadores que pueden ayudarlo a almacenar algo en caché o construir algo en paquetes. Y esto, como resultado, conduce a un rendimiento optimizado de la aplicación. aquí material sobre los patrones RxJS.

Resumen

He dado aquí una breve lista de temas que vale la pena explorar para alguien que quiera convertirse en un desarrollador Angular de alto rendimiento, o alguien que quiera ser un arquitecto de aplicaciones Angular.

Puedes agregar mucho más a esta lista. Pero, entre otras cosas, propongo no olvidar que para aprender realmente algo relacionado con el mundo del desarrollo web, debe comenzar con lo básico. Estos son JavaScript, CSS, patrones de diseño, técnicas de escritura de código limpio, herramientas y mucho más.

¿Y qué recomendaría estudiar para aquellos que desean aprender a diseñar aplicaciones angulares de alta calidad?

6 conceptos que un arquitecto de aplicaciones angulares necesita dominar