Componentes compartidos en Angular con ui-shared y utils-common

Construye una base sólida en Angular con bibliotecas compartidas que reducen costos de mantenimiento y aceleran el desarrollo. Aquí verás cómo separar componentes reutilizables, modelos TypeScript y services para API REST en una arquitectura clara con ui-shared y utils-common.

¿Qué proyecto Angular se construye y por qué componentes compartidos?

Dos aplicaciones Angular se integran sobre una misma base: una para inscripción de alumnos y otra donde profesores crean cursos y visualizan inscriptos. La organización parte de la carpeta packages, modificando ui-shared y utils-common con responsabilidades distintas y complementarias.

El objetivo es ahorrar código y centralizar mantenimiento. Un cambio en un punto común impacta en todas las apps que consumen esos recursos, mejorando la mantenibilidad y la consistencia.

• Dos apps: inscripción de alumnos y gestión de cursos por profesores.
• Carpeta packages con bibliotecas compartidas.
• Un solo lugar de cambios para múltiples consumidores.

¿Qué incluye ui-shared: botón, tarjeta y tabla reutilizable?

Ui-shared reúne componentes de interfaz que ambas aplicaciones usarán. Están exportados desde un único index.ts para importaciones simples y coherentes.

• Botón: permite clic, cambio de color y variantes. Funcionalidad simple y clara.
• Tarjeta de curso: muestra título, profesor y descripción. Pensada para repetirse en ambos contextos.
• Tabla: reutilizable para cursos y alumnos, con ordenamiento por flecha hacia arriba o hacia abajo. Diseñada para listar datos con acciones.

Estos componentes garantizan reutilización visual y de comportamiento, además de una experiencia uniforme en las dos aplicaciones.

¿Cómo se exportan y reutilizan estos componentes?

Se centraliza la exportación en index.ts. Así, cualquier app los importa de forma directa, manteniendo una API de componentes estable y fácil de versionar.

• Un punto de exportación común.
• Menos fricción al integrar en múltiples apps.
• Mayor coherencia en el consumo.

¿Qué aporta utils-common: modelos TypeScript y services para API REST?

Utils-common ofrece código puro de TypeScript, agnóstico de Angular, apto para ecosistemas basados en TypeScript como Node.js, e incluso utilizable en React o Next.js para los modelos.

• Modelos: definen estructuras de datos para curso, inscripción (enrollment) y estudiante. Incluyen interfaces para casos como crear un curso nuevo o realizar un get.
• Services: implementan GET, POST, PUT y DELETE contra un servicio Node.js en localhost 3000, consumiendo la API REST de cursos, estudiantes e inscripciones.
• Helpers: funciones de mapeo en TypeScript para transformar datos de forma consistente entre capas.

Esta separación crea un punto de apoyo común para frontend y backend, garantizando tipados coherentes y un flujo de datos predecible.

¿Cómo se conectan services y API REST?

Se definen reglas para apuntar a localhost:3000 y agrupar rutas por dominio de datos: cursos, estudiantes y enrolamientos. Así, el consumo desde las apps es directo y consistente.

• Endpoints para cursos, estudiantes e inscripciones.
• Operaciones CRUD: GET, POST, PUT, DELETE.
• Tipos compartidos desde los modelos.

¿Qué beneficios prácticos obtienes al trabajar así?

La arquitectura mejora la escalabilidad del código sin sacrificar claridad.

• Reutilización transversal en múltiples aplicaciones.
• Mantenibilidad por centralización de cambios.
• Compatibilidad con entornos basados en TypeScript.
• Consistencia entre frontend Angular y backend Node.js.

¿Te gustaría extender el botón con más variantes o sumar columnas calculadas en la tabla? Cuéntame en los comentarios qué componente priorizarías y por qué.