Angular: Buenas Prácticas — Rendimiento, arquitectura y calidad

Este no es un curso de “Angular de cero a experto”. Es un curso para quien ya escribe Angular y quiere que ese código sea rápido, mantenible y seguro. Cada capítulo ataca una dimensión de la calidad: diseño (SOLID), reactividad (signals y RxJS), rendimiento (change detection, Core Web Vitals), seguridad, testing y el catálogo de patrones y antipatrones que separan un proyecto sano de uno que se pudre con cada sprint.

Todos los ejemplos usan Angular 22 (la versión estable a mediados de 2026): componentes standalone por defecto, signals y zoneless ya estables, httpResource, Signal Forms y el nuevo control flow (@if/@for/@defer). Donde una práctica dependa de una versión concreta lo indicamos explícitamente.

El mapa del curso

mindmap
  root((Angular<br/>de calidad))
    Diseño
      SOLID en componentes
      Organización del proyecto
      Inyección de dependencias
    Reactividad
      Signals y estado
      RxJS con criterio
      Formularios
    Rendimiento
      Change detection y zoneless
      Core Web Vitals y defer
      HTTP y complejidad
    Robustez
      Seguridad
      Testing
      Librerías del ecosistema
    Cierre
      Patrones y antipatrones
      Auditoría con agente IA

Índice de capítulos

#	Capítulo	Qué aprenderás
1	Mentalidad y arquitectura moderna	La filosofía del Angular actual: standalone, signals, zoneless. Qué significa “pensar en Angular 22” y qué hábitos del Angular clásico dejar atrás.
2	Organización del proyecto	Estructura por features, core/shared, límites de dependencia, monorepo Nx y el antipatrón del barrel file.
3	Componentes con SOLID	SRP en componentes, patrón smart/dumb, ChangeDetectionStrategy.OnPush, input()/output()/model() y el nuevo control flow.
4	Signals y estado reactivo	signal/computed/effect/linkedSignal/resource, gestión de estado sin librerías, y los antipatrones de signals.
5	RxJS con criterio	Cuándo RxJS y cuándo signals, operadores clave, memory leaks, takeUntilDestroyed e interoperabilidad toSignal/toObservable.
6	Change Detection y rendimiento de runtime	Cómo funciona la detección de cambios, OnPush, zoneless, @for con track, NgOptimizedImage y cómo medir con profiling.
7	Carga inicial y Core Web Vitals	Lazy loading, @defer, SSR e hydration incremental, bundle budgets y optimización de LCP/INP/CLS.
8	Formularios	Reactive forms tipados, Signal Forms, estrategias de validación, formularios dinámicos y antipatrones frecuentes.
9	Inyección de dependencias	inject(), InjectionToken, providedIn, jerarquía de inyectores, funciones de fábrica e inversión de control como base del diseño.
10	HTTP, datos y complejidad	HttpClient, interceptores funcionales, caching, httpResource, deduplicación y complejidad algorítmica en el cliente.
11	Seguridad	XSS y sanitización, DomSanitizer, CSP con Trusted Types, XSRF, autenticación, y por qué no hay secretos en el bundle.
12	Testing	Pirámide de tests, Vitest, TestBed y harnesses del CDK, testing de signals, Playwright para e2e y antipatrones de testing.
13	Librerías del ecosistema	Gestión de estado (NgRx SignalStore, NGXS), TanStack Query, Angular Material/CDK, Transloco, y cómo elegir sin acoplarte.
14	Catálogo de patrones y antipatrones	Resumen accionable: los patrones que valen la pena y los antipatrones que hay que erradicar, con señales de alarma.
15	Auditoría con agente IA	Un protocolo completo para que un agente de IA audite un proyecto Angular: checklist, comandos, heurísticas de detección y formato de informe.

¿Para quién es este curso?

Para desarrolladores y desarrolladoras que ya trabajan con Angular y sienten alguna de estas cosas: la app se puso lenta y no saben por qué, el estado se volvió imposible de razonar, los tests son frágiles, o cada feature nueva rompe algo viejo. Necesitás manejar TypeScript, componentes, servicios y routing. Lo que agrega el curso es criterio: no cómo se hace, sino cuál de las formas de hacerlo escala.

Cómo usar el curso

Los capítulos se pueden leer en orden o saltar al que te duele hoy. Los capítulos 3 a 10 son el núcleo técnico (diseño, reactividad y rendimiento); el 11 y 12 cubren robustez; el 14 es un resumen que sirve como checklist de revisión de código; y el 15 convierte todo el curso en un protocolo ejecutable por un agente de IA.

Consejo: leé cada antipatrón preguntándote “¿esto está en mi proyecto?”. La mayoría de los problemas de rendimiento y mantenibilidad en Angular no vienen de no saber la API, sino de arrastrar hábitos que dejaron de tener sentido hace tres versiones.

Empecemos por la mentalidad: Mentalidad y arquitectura moderna →