La falta de introducción a los patrones de diseño angular y moderno

Angular (también conocido como Angular 2, 4, 5, 6 ...) es un nuevo marco completamente reescrito desde cero, que reemplaza al ya conocido marco AngularJS (también conocido como Angular 1.x).

Más que solo un marco, Angular debería considerarse como una plataforma completa que viene con un conjunto completo de herramientas como su propia CLI, utilidades de depuración o herramientas de rendimiento.

Angular ha existido desde hace algún tiempo, pero todavía tengo la sensación de que no está recibiendo el amor que merecía, probablemente debido a otros jugadores en el campo como React o VueJS. Si bien la simplicidad detrás de estos marcos definitivamente puede ser atractiva, carecen, en mi opinión, de lo que es esencial al hacer grandes aplicaciones de nivel empresarial: un marco sólido para guiar tanto a desarrolladores experimentados como a principiantes en la misma dirección y una convergencia racional de herramientas, patrones y documentación. Sí, la curva de aprendizaje angular puede parecer un poco empinada, pero definitivamente vale la pena.

Empezando

Recién llegado

Si es nuevo en Angular, puede sentirse abrumado por la cantidad de nuevos conceptos que debe comprender, por lo que antes de profundizar en la documentación, puede comenzar con este tutorial progresivo que lo guiará paso a paso para crear una aplicación Angular completa.

AngularJS veterano

Si vienes de AngularJS y quieres profundizar en la nueva versión, seguramente querrás echar un vistazo a la referencia rápida AngularJS vs Angular.

Hoja de trucos

Hasta que sepa la API Angular completa de memoria, es posible que desee mantener esto
hoja de trucos que reanuda la sintaxis y las características en una sola página.

Guía de estilo

Buenas noticias, hay una guía oficial de estilo angular escrita por el equipo.

Más que solo reglas de codificación, esta guía de estilo también brinda consejos y mejores prácticas para una buena arquitectura de aplicaciones y es una lectura esencial para principiantes. Leyendo más profundamente, incluso puede encontrar muchas explicaciones para algunas opciones de diseño del marco.

Preguntas más frecuentes

Hay mucho que excavar en Angular y algunas preguntas frecuentemente molestan a las personas. De hecho, la mayoría de las cosas poco claras parecen estar relacionadas con los módulos, por ejemplo, la temida pregunta "Core vs Shared modules".

Los chicos de Angular pueden haber notado que, dado que ahora puedes encontrar un buen FAQ en su sitio web] respondiendo todas las preguntas comunes sobre los módulos. No dudes en echarle un vistazo, incluso si crees que tienes suficiente experiencia con Angular

Yendo más profundo

Aunque no son obligatorios, Angular fue diseñado para el uso de patrones de diseño a los que puede no estar acostumbrado, como la programación reactiva, el flujo de datos unidireccional y la administración centralizada del estado.

Estos conceptos son difíciles de resumir en pocas palabras y, a pesar de estar estrechamente relacionados entre sí, se refieren a partes específicas del flujo de una aplicación, y cada uno es bastante profundo para aprender por sí solo.

Básicamente encontrará aquí una lista de buenos puntos de partida para aprender más sobre estos temas.

Programación reactiva

Puede que no lo sepas, pero Angular ahora es un sistema reactivo por diseño. Aunque no está obligado a usar patrones de programación reactivos, constituyen el núcleo del marco y definitivamente se recomienda aprenderlos si desea aprovechar lo mejor de Angular.

Angular usa RxJS para implementar el patrón Observable.

Un Observable es una secuencia de eventos asincrónicos que se pueden procesar con operadores tipo matriz.
Ejemplo de secuencia de eventos observables

De promesas a observables

Si bien AngularJS solía depender en gran medida de Promesas para manejar eventos asincrónicos, los Observables ahora se usan en su lugar en Angular. Aunque en casos específicos, como las solicitudes HTTP, un Observable se puede convertir en una Promesa, se recomienda adoptar el nuevo paradigma, ya que puede hacer mucho más que Promesas, con mucho menos código. Esta transición también se explica en el tutorial Angular. Una vez que haya realizado el cambio, nunca volverá a mirar atrás.

Referencias de aprendizaje

  • ¿Qué es la programación reactiva ?, se explica muy bien a través de una historia simple con imágenes (5 min)
  • La introducción a la programación reactiva que te has estado perdiendo, el título lo dice todo (30 min)
  • Programación reactiva funcional para desarrolladores de Angular 2, consulte los principios de programación reactiva funcional en la práctica con Angular (15 min)
  • RxMarbles, una representación gráfica de los operadores de Rx que ayudan enormemente a comprender su uso.

Flujo de datos unidireccional

En oposición con AngularJS, donde uno de sus puntos de venta fue el enlace de datos bidireccional que terminó causando muchos dolores de cabeza importantes para aplicaciones complejas, Angular ahora aplica el flujo de datos unidireccional.

¿Qué significa? Dicho con otras palabras, significa que la detección de cambios no puede causar ciclos, que fue uno de los puntos problemáticos de AngularJS. También ayuda a mantener flujos de datos más simples y predecibles en las aplicaciones, junto con mejoras sustanciales de rendimiento.

Flujo de datos unidireccional

Espera, entonces ¿por qué la documentación Angular menciona una sintaxis de enlace bidireccional?

Si observa detenidamente, la nueva sintaxis de enlace bidireccional es solo azúcar sintáctico para combinar dos enlaces unidireccionales (un enlace de propiedad y evento), manteniendo el flujo de datos unidireccional.

Este cambio es realmente importante, ya que a menudo fue la causa de problemas de rendimiento con AngularJS, y es uno de los pilares que permiten un mejor rendimiento en las nuevas aplicaciones de Angular.

Si bien Angular intenta mantenerse independiente del patrón y puede usarse con patrones MV * convencionales, fue diseñado teniendo en cuenta la programación reactiva y realmente brilla cuando se usa con patrones de flujo de datos reactivos como
redux, Flux o MVI.

Administración centralizada del estado

A medida que las aplicaciones crecen en tamaño, realizar un seguimiento del estado de todos sus componentes individuales y los flujos de datos pueden volverse tediosos y tienden a ser difíciles de administrar y depurar.

El objetivo principal de usar una administración de estado centralizada es hacer que los cambios de estado sean predecibles imponiendo ciertas restricciones sobre cómo y cuándo pueden ocurrir actualizaciones, usando un flujo de datos unidireccional.

Este enfoque se hizo popular por primera vez con React con la introducción de la arquitectura Flux. Surgieron muchas bibliotecas que intentaron adaptar y refinar el concepto original, y una de ellas ganó gran popularidad al proporcionar una alternativa más simple y elegante: Redux.

Redux es al mismo tiempo una biblioteca (con la gran R) y un patrón de diseño (con la pequeña r), esta última es independiente del marco y funciona muy bien con Angular.

El patrón de diseño redux se basa en estos 3 principios:

  • El estado de la aplicación es una estructura de datos única inmutable.
  • Un cambio de estado se desencadena por una acción, un objeto que describe lo que sucedió.
  • Las funciones puras llamadas reductores toman el estado anterior y la siguiente acción para calcular el nuevo estado

Los conceptos centrales detrás de estos principios se explican muy bien en este ejemplo (3 min).

El ciclo de actualización de estado redux

Para aquellos interesados, el patrón redux se inspiró notablemente en The Elm Architecture y el patrón CQRS.

¿Qué biblioteca usar?

Puede hacer que Angular funcione con cualquier biblioteca de administración de estado que desee, pero su mejor opción sería usar NGXS o @ngrx. Ambos funcionan igual que la popular biblioteca Redux, pero con una estrecha integración con Angular y RxJS, con algunas buenas utilidades adicionales para desarrolladores.

NGXS se basa en los mismos conceptos que @ngrx, pero con menos repetitivo y una sintaxis más agradable, lo que lo hace menos intimidante.

Algunos recursos para comenzar:

  • Tutorial angular de NGXS con un ejemplo desde cero, un tutorial guiado para NGXS (10 min)
  • Cree una mejor aplicación Angular 2 con redux y ngrx, un buen tutorial para @ngrx (30 min)
  • Introducción completa a @ ngrx / store, un tutorial en profundidad sobre el uso de esta biblioteca en Angular (60 min)

¿Cuándo usarlo?

Es posible que haya notado que la mayoría de las plantillas iniciales no incluyen un sistema de administración de estado centralizado listo para usar.
¿Porqué es eso? Bueno, aunque hay muchos beneficios al usar este patrón, la elección depende en última instancia de su equipo y de lo que desea lograr con su aplicación.

Tenga en cuenta que el uso de un solo estado central para su aplicación introduce una nueva capa, una complejidad que podría no ser necesaria, dependiendo de su objetivo.

Optimizando el rendimiento

Si bien la nueva versión Angular resuelve por diseño la mayoría de los problemas de rendimiento que podrían experimentarse con AngularJS, siempre hay margen para mejoras. Solo tenga en cuenta que entregar una aplicación con buen rendimiento a menudo es una cuestión de sentido común y prácticas de desarrollo sensatas.

Aquí hay una lista de puntos clave que debe verificar en su aplicación para asegurarse de ofrecer la mejor experiencia a sus clientes:

Después de revisar la lista de verificación, asegúrese de ejecutar también una auditoría de su página a través de Lighthouse, la última herramienta de Google que le brinda información significativa sobre el rendimiento de su aplicación, la accesibilidad, la compatibilidad móvil y más.

Manteniendo Angular actualizado

El desarrollo angular se está moviendo rápidamente, y las actualizaciones de las bibliotecas y herramientas principales se envían regularmente.

Afortunadamente, el equipo de Angular proporciona herramientas para ayudarlo a seguir las actualizaciones:

  • npm run ng update te permite actualizar tu aplicación y sus dependencias
  • El sitio web de actualización angular lo guía a través de cambios y migraciones angulares, y le proporciona guías paso a paso de una versión a otra.

Esta guía se incluye con todos los proyectos angulares generados por ngX-Rocket. Si está buscando un kit de inicio extensible, bien documentado y de nivel empresarial, ¡debe consultarlo!