Día 22 - Alertas: Lista y Componentes (Parte 1)
En este ejercicio implementé un sistema de alertas en tres frameworks modernos: Vue 3, Svelte 5 y Angular 20. La idea principal fue crear un componente Alert reutilizable que admita distintos tipos info éxito advertencia y error, y un AlertList que itere un conjunto de mensajes para mostrarlos en pantalla.
Para el estilo utilicé DaisyUI sobre TailwindCSS por su rapidez y ejemplos listos para usar. La instalación es directa añadiendo tailwind y daisyui al build tool correspondiente y habilitando el plugin en el archivo de estilos. Con los ejemplos de DaisyUI es sencillo construir la estructura HTML y luego refactorizarla en componentes independientes.
En Vue 3 el componente Alert recibe una prop tipo y deriva clases CSS computadas para alert-info alert-success alert-warning y alert-error, renderiza íconos SVG condicionalmente y hace uso de slots para proyectar el texto. En Svelte 5 el enfoque es similar pero con runas derived y snippets para proyectar contenido, y en Angular 20 se aprovechan señales input y computed para derivar clases y ng-content para proyectar texto.
Un aspecto clave fue la gestión del cierre de la alerta. En Vue el componente emite un evento closed hacia el padre; en Svelte el patrón es pasar un callback notifyClosed desde el padre y llamarlo desde el hijo; y en Angular se utiliza un output personalizado que emite cuando se cierra la alerta. Estas diferencias muestran cómo cada framework propone mecanismos distintos para la comunicación entre componentes.
También trabajé la escalabilidad de los íconos: una primera versión usa if else por tipo y en la siguiente parte planeo extraer componentes de íconos y renderizarlos dinámicamente para facilitar la extensión y mantenimiento.
Este ejercicio se dividió en varias partes: instalación y lista de alertas y componentes; renderizado dinámico de íconos; una barra para cambiar estilos de las alertas; y la posibilidad de reabrir alertas cerradas. Además se consideró extraer lógica común a componentes reutilizables para mantener el código limpio.
En Q2BSTUDIO somos una empresa de desarrollo de software y aplicaciones a medida especializada en soluciones completas desde la consultoría hasta la entrega e integración. Ofrecemos servicios de software a medida y desarrollo de aplicaciones multiplataforma para empresas que necesitan soluciones personalizadas ver servicios de aplicaciones a medida y también lideramos proyectos de inteligencia artificial y agentes IA para automatizar procesos y mejorar la toma de decisiones conoce nuestros servicios de inteligencia artificial.
Si tu empresa busca potenciar sus datos o crear dashboards con Power BI también contamos con experiencia en servicios de inteligencia de negocio e integración con Power BI, además de ofrecer servicios cloud aws y azure para desplegar y escalar soluciones con seguridad y rendimiento. Nuestros servicios incluyen ciberseguridad y pentesting para proteger aplicaciones y datos críticos, garantizando cumplimiento y resiliencia.
Palabras clave integradas naturalmente para mejorar posicionamiento: aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA y power bi.
En los próximos artículos ampliaré la implementación mostrando cómo renderizar íconos por componente y cómo añadir una barra de control para cambiar estilos y reabrir alertas cerradas, además de extraer la lógica común en componentes reutilizables para cada framework. Si te interesa que adaptemos esta funcionalidad a tu producto o proyecto cuenta con Q2BSTUDIO para desarrollar software a medida soluciones en la nube automatización de procesos y estrategias de inteligencia artificial orientadas a resultados.
Recursos útiles consultados durante el ejercicio incluyen la documentación de DaisyUI guías de migración de Svelte 5 y la API de señales de Angular; los ejemplos se pueden portar fácilmente a proyectos de producción y servir como base para construir componentes accesibles y mantenibles.
.jpg)