academia/docs/architecture/decisions/ADR-003-angular-signals.md

ADR-003: Signals vs RxJS para Estado Local

Estado: Aceptado Fecha: 2026-01-07

Contexto

Angular 21 introduce Signals como alternativa a RxJS para estado reactivo. Necesitamos decidir el enfoque para manejo de estado en el frontend.

Decisión

Usar Signals para estado local + Apollo Client para estado del servidor.

// Estado local con Signals
students = signal<Student[]>([]);
loading = signal(true);

// Estado del servidor con Apollo
this.apollo.watchQuery<GetStudentsQuery>({...})

Consecuencias

Positivas

• Simplicidad: Signals más intuitivos que BehaviorSubject
• Performance: Integración nativa con OnPush
• Menos boilerplate: No requiere async pipe en templates
• Type-safe: Mejor inferencia de tipos

Negativas

• Tecnología relativamente nueva
• Menos operadores que RxJS
• Apollo aún usa Observables internamente

Patrón Adoptado

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class StudentListComponent {
  // Estado local
  students = signal<Student[]>([]);
  loading = signal(true);

  // Suscripción a Apollo
  ngOnInit() {
    this.studentService.getStudents().subscribe(({ data, loading }) => {
      this.students.set(data);
      this.loading.set(loading);
    });
  }
}

Alternativas

Alternativa	Razón de Descarte
RxJS puro	Mayor complejidad, más boilerplate
NgRx	Overkill para esta aplicación
Akita	Dependencia adicional innecesaria

Referencias

• Angular Signals