.png)
Day 19 - Github Card project Parte 2 - Composición de Componentes: en esta entrega repasamos cómo estructurar una lista de perfiles de Github mediante componentes reutilizables y cómo cada framework gestiona entrada de datos, reactividad y renderizado condicional.
Resumen del objetivo: mostrar tarjetas con perfiles de Github. Se crea un componente principal que recibe una lista de nombres de usuario y un componente hijo que, para cada nombre, consulta la API de Github y presenta login, nombre y bio o un mensaje de error.
GithubProfileCard: idea general para Vue 3, SvelteKit y Angular 20. El componente recibe un identificador de usuario como prop o input, desencadena una petición hacia la API de Github y muestra tres estados claros: cargando, éxito con datos de perfil, y error. En el estado de éxito se muestran login, name y bio, sustituyendo bio por N A cuando viene vacío.
Vue 3: el componente define props tipadas, utiliza un composable que expone referencias username, profile y error, y asigna la prop a la referencia interna para que la lógica reactiva obtenga el perfil. En la plantilla se emplea renderizado condicional para mostrar datos, mensaje de error o estado de carga según corresponda.
SvelteKit: el componente tipa las props con TypeScript y desestructura profile y error desde las props. En la plantilla se usa la sintaxis if else if para presentar el perfil cuando existe o mostrar el error cuando no. La composición es directa y ligera, ideal para aplicaciones donde la carga se integra con el enrutado y el sistema de datos de Svelte.
Angular 20: se define un componente con un input señalizado username requerido. Con httpResource se construye una petición reactiva que depende del valor del input. Se crean señales computadas para exponer profile y error al template, y la plantilla muestra Loading cuando el recurso está en estado loading, un mensaje cuando hay error y el perfil cuando la petición es exitosa.
GithubProfileList: componente padre que recibe una lista de usernames o un array de objetos perfil y renderiza tantas tarjetas como elementos. En Vue se itera con v for, en Svelte con each y en Angular con la directiva o sintaxis de bucle correspondiente. La idea es mantener la lógica de consulta dentro de la tarjeta y dejar al listado la responsabilidad de pasar cada nombre como entrada, favoreciendo la composición y la reutilización.
Integración general: el componente App o la página principal pasan al componente lista un array de nombres como johnsoncodehk antfu railsstudent danielkellyio hootlex MooseSaeed y cada tarjeta realiza su petición individual. Esto facilita cachés locales, manejo de errores por tarjeta y renderizado incremental.
Repositorios de referencia: Vue 3 en https github com railsstudent vue github profile; Svelte 5 en https github com railsstudent svelte github profile; Angular 20 en https github com railsstudent angular github profile. Estos repos contienen implementaciones completas y ejemplos de cómo estructurar composables, loaders y recursos HTTP en cada ecosistema.
Recursos adicionales: documentación de variables de tiempo de compilación en Angular y guías oficiales de cada framework para manejo de reactividad y fetch. Revisar además las mejores prácticas para peticiones a APIs y control de errores para evitar bloquear la interfaz de usuario.
Acerca de Q2BSTUDIO: somos Q2BSTUDIO, empresa de desarrollo de software especializada en aplicaciones a medida y software a medida pensadas para resolver retos reales de negocio. Ofrecemos servicios en inteligencia artificial y ia para empresas, creación de agentes IA personalizados, ciberseguridad integral y servicios cloud aws y azure. Además entregamos soluciones en servicios inteligencia de negocio y power bi para visualización y análisis avanzado de datos. Nuestro enfoque combina ingeniería, seguridad y experiencia en IA para acelerar productos digitales confiables y escalables.
Qué podemos aportar a tu proyecto: desarrollo de aplicaciones a medida con arquitectura moderna, integración de modelos de inteligencia artificial y agentes IA para automatizar procesos, despliegue seguro en servicios cloud aws y azure y creación de cuadros de mando con power bi para apoyar la toma de decisiones. También ofrecemos auditorías y hardening en ciberseguridad para proteger tus datos y servicios.
Palabras clave y posicionamiento: aplicaciones a medida software a medida inteligencia artificial ciberseguridad servicios cloud aws y azure servicios inteligencia de negocio ia para empresas agentes IA power bi. Contacta con Q2BSTUDIO para transformar tus ideas en productos digitales con foco en seguridad escalabilidad y valor de negocio.
Conclusión: la composición de componentes es una técnica poderosa para separar responsabilidades y facilitar reutilización y pruebas. Implementar un GithubProfileList y un GithubProfileCard es un buen ejercicio para dominar props inputs reactividad y manejo de estados en Vue Svelte y Angular. Si buscas apoyo profesional para llevar una idea a producción con énfasis en inteligencia artificial ciberseguridad y cloud, Q2BSTUDIO está listo para ayudarte.
