The latest articles on DEV Community by Julian Drets (@juliandrets). https://dev.to/juliandrets https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2023347%2Fd6aff889-9364-4a07-8553-861f02e11a1c.png https://dev.to/juliandrets en Julian Drets Wed, 04 Sep 2024 20:35:48 +0000 https://dev.to/mentatech/construyendo-microfrontends-escalables-y-mantenibles-con-turborepo-1pba https://dev.to/mentatech/construyendo-microfrontends-escalables-y-mantenibles-con-turborepo-1pba <h2> Introducción: </h2> <p>En <strong>mentatech</strong>, la escalabilidad y la eficiencia son claves en nuestro enfoque de desarrollo. Por ello, hemos adoptado una arquitectura de microfrontends que nos permite escalar de manera eficiente y mantener nuestros proyectos organizados y ágiles. Esta arquitectura está construida utilizando <a href="https://turbo.build/" rel="noopener noreferrer"><strong>Turborepo</strong></a>, una herramienta que ha revolucionado la forma en que gestionamos nuestros repositorios de código.</p> <h2> ¿Qué es Turborepo? </h2> <p><strong>Turborepo</strong> es una herramienta de construcción de monorepos que nos ofrece la flexibilidad de alojar múltiples aplicaciones en un solo repositorio. Esto simplifica enormemente la gestión y colaboración en proyectos grandes, permitiéndonos centralizar y coordinar el desarrollo sin complicaciones.</p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftyljjr21ehxyxuqr3r5h.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftyljjr21ehxyxuqr3r5h.png" alt="Image description" width="800" height="450"></a></p> <h2> Ejemplo de estructura de carpetas de un proyecto con <strong>Turborepo</strong> </h2> <p>En la imagen, observamos la estructura del repositorio donde un <code>package.json</code> ubicado en la raíz actúa como núcleo central de dependencias comunes, compartidas entre todas las aplicaciones. Adicionalmente, cada aplicación posee su propio <code>package.json</code>, permitiendo la gestión individualizada de dependencias específicas para cada una. También se destaca una sección denominada packages, que aloja paquetes reutilizables diseñados para ser consumidos por las aplicaciones dentro del monorepo. Esta organización facilita una gestión eficiente y modular de los recursos, optimizando el desarrollo y mantenimiento de cada aplicación.</p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Faq9gqponz826ool2ydfd.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Faq9gqponz826ool2ydfd.png" alt="Image description" width="766" height="352"></a></p> <p>Para mas info sobre como funciona la estructura de carpetas de Turborepo podes hacerlo <a href="https://turbo.build/repo/docs/crafting-your-repository/structuring-a-repository" rel="noopener noreferrer">desde aquí</a></p> <h2> Ventajas de Turborepo en la Gestión de Microfrontends </h2> <p>La adopción de <strong>Turborepo</strong> nos ha permitido implementar una arquitectura de microfrontends donde cada componente o servicio es separado por responsabilidad, lo que facilita el mantenimiento y mejora la eficiencia de los deploys. Aquí algunas de las ventajas clave:</p> <ul> <li><p><strong>Reutilización de Código:</strong> Con <strong>Turborepo</strong>, podemos compartir packages comunes entre nuestras aplicaciones de manera sencilla y eficiente. Esto facilita la reutilización de código y acelera el desarrollo, manteniendo la independencia de cada microfrontend.</p></li> <li><p><strong>Optimización de Deploys:</strong> La estructura de <strong>Turborepo</strong> permite optimizar los procesos de integración y despliegue continuo. Los deploys son más ágiles y menos propensos a errores, ya que cada cambio puede ser testeado y desplegado de manera independiente dentro del mismo repositorio.</p></li> <li><p><strong>Mejora en la Colaboración:</strong> La centralización de múltiples proyectos en un monorepo facilita la colaboración entre equipos. Los desarrolladores pueden trabajar de manera más coordinada, compartiendo dependencias y herramientas sin duplicar esfuerzos.</p></li> </ul> <h2> Experiencias y Resultados en <strong>mentatech</strong> </h2> <p>Desde que implementamos <strong>Turborepo</strong> en nuestra arquitectura de microfrontends, hemos observado mejoras significativas en la escalabilidad y mantenimiento de nuestros proyectos. La capacidad de gestionar múltiples aplicaciones en un entorno unificado ha simplificado nuestro flujo de trabajo y ha mejorado la colaboración entre nuestros equipos de desarrollo.</p> <h2> Conclusión </h2> <p>Adoptar <strong>Turborepo</strong> y una arquitectura de microfrontends ha sido una decisión transformadora para <strong>mentatech</strong>. Nos ha permitido escalar eficientemente mientras mantenemos nuestros proyectos organizados y ágiles. Si estás considerando mejorar la escalabilidad y mantenibilidad de tus proyectos, definitivamente recomendamos explorar las posibilidades que ofrece <strong>Turborepo</strong>.</p> Julian Drets Tue, 03 Sep 2024 22:23:47 +0000 https://dev.to/mentatech/controlando-la-tasa-de-errores-de-nuestros-frontends-con-datadog-rum-4k83 https://dev.to/mentatech/controlando-la-tasa-de-errores-de-nuestros-frontends-con-datadog-rum-4k83 <h2> Introducción: </h2> <p>En <strong>mentatech</strong>, enfrentamos un desafío significativo: <strong>un 46% de nuestras sesiones en aplicaciones presentaban errores.</strong> Sin visibilidad de los problemas en nuestros frontends, la experiencia de nuestros usuarios se veía gravemente afectada. En este artículo, te contamos cómo la implementación de Datadog RUM (Real User Monitoring) transformó nuestra capacidad para detectar y resolver problemas, y cómo mejoró drásticamente la experiencia de nuestros usuarios.</p> <h2> Reducción de Errores y mejora Continua </h2> <p><strong>Gracias a Datadog RUM, logramos reducir la tasa de errores a un sorprendente 0.06%!</strong> 🎉 Este cambio no solo nos permitió detectar y resolver problemas con rapidez, sino que también nos proporcionó una comprensión más profunda de cómo interactúan los usuarios con nuestras aplicaciones. La visibilidad que ahora tenemos nos ha permitido realizar mejoras continuas y garantizar una experiencia de usuario de alta calidad.</p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fygie7qf4qxg6lql6dauy.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fygie7qf4qxg6lql6dauy.png" alt="Image description" width="800" height="577"></a></p> <h2> ¿Qué hace que Datadog RUM sea tan Efectivo? </h2> <p>Datadog RUM ofrece varias características clave que han sido fundamentales para nuestra estrategia de monitoreo y optimización:</p> <ul> <li> <strong>Session Replays:</strong> Una de las características más valiosas es la capacidad de ver exactamente lo que nuestros usuarios experimentan cuando ocurre un error. Esto nos permite reproducir problemas de manera precisa y entender mejor el contexto en el que ocurren.</li> </ul> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdoprvw999c6pbc2lb01f.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdoprvw999c6pbc2lb01f.png" alt="Image description" width="800" height="645"></a></p> <ul> <li> <strong>Datos completos:</strong> Datadog RUM proporciona métricas detalladas y la opción de agregar información personalizada, como el ID del usuario. Esta riqueza de datos facilita el debug y la mejora continua de nuestras aplicaciones al ofrecer una visión completa del rendimiento y la interacción del usuario.</li> </ul> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwgfmdxa9j1kf23d95uhd.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwgfmdxa9j1kf23d95uhd.png" alt="Image description" width="431" height="398"></a></p> <h2> Implementación y beneficios </h2> <p>La integración de Datadog RUM en nuestro flujo de trabajo ha sido un cambio de juego. No solo hemos reducido significativamente la tasa de errores, sino que también hemos optimizado nuestra capacidad para identificar y abordar problemas antes de que afecten a un gran número de usuarios. Esta visibilidad es clave para garantizar una experiencia de usuario excepcional y mantener la confianza en nuestras aplicaciones.</p> <h2> Conclusión </h2> <p>La visibilidad y el control que Datadog RUM nos ha proporcionado han sido fundamentales para mejorar la experiencia del usuario en nuestras aplicaciones. Al reducir la tasa de errores y entender mejor cómo interactúan los usuarios, hemos podido realizar mejoras significativas y ofrecer un servicio de mayor calidad. ¿Cómo manejas tú el monitoreo y la mejora continua en tus aplicaciones? ¡Déjanos tus comentarios y comparte tus experiencias!</p> Julian Drets Tue, 03 Sep 2024 21:58:16 +0000 https://dev.to/mentatech/releases-seguros-y-mantenimiento-proactivo-con-cypressio-45kn https://dev.to/mentatech/releases-seguros-y-mantenimiento-proactivo-con-cypressio-45kn <h2> Introducción: </h2> <p>En <strong>mentatech</strong>, sabemos que la calidad en el lanzamiento de productos es crucial, especialmente cuando no contamos con un equipo de QA dedicado. Para garantizar que nuestros lanzamientos a producción sean lo más seguros y controlados posibles, hemos adoptado un enfoque innovador utilizando Cypress.io. En este artículo, compartiremos cómo implementamos pruebas end-to-end y mantenemos la calidad de nuestros productos de manera continua.</p> <h2> ¿Cómo lo logramos? 🤔 </h2> <p>Implementar pruebas end-to-end es fundamental para asegurar que todos los flujos de usuario se cubran de manera efectiva. Utilizamos <strong><a href="https://www.cypress.io/" rel="noopener noreferrer">Cypress.io</a></strong>, un potente framework de testing, para configurar y ejecutar todos los casos posibles para nuestras aplicaciones. Esto no solo simplifica el proceso de testing, sino que también lo hace extremadamente eficiente.</p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyyx8edjknxij3qmg2a8h.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyyx8edjknxij3qmg2a8h.png" alt="Image description" width="800" height="418"></a></p> <h2> Integración de Entornos de Prueba 🧪 </h2> <p>No nos detenemos en el testing de frontend. También hemos integrado entornos de prueba que cubren tanto el frontend como el backend. Esto nos permite simular todos los escenarios posibles y garantizar que nuestros servicios funcionen correctamente en conjunto. Este enfoque integral mejora significativamente la calidad de nuestros productos y permite a nuestro equipo de backend realizar lanzamientos de manera controlada y segura.</p> <h2> Monitoreo Continuo: Manteniendo la Calidad 🔄 </h2> <p>Además de las pruebas iniciales, implementamos un cron job que ejecuta periódicamente nuestras pruebas end-to-end en un servidor. Este monitoreo continuo no solo detecta degradaciones en nuestros servicios o problemas en producción, sino que también nos alerta de manera inmediata en caso de fallos:</p> <p><strong>- Notificaciones en Slack:</strong> Cuando un test falla, se envía automáticamente una notificación a un canal específico en Slack. La notificación incluye una imagen que muestra el error, y más información que nos ayuda a identificar el problema.</p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjyylo85un8yphl0eozy8.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjyylo85un8yphl0eozy8.png" alt="Image description" width="800" height="467"></a></p> <p><strong>- Alertas en Opsgenie:</strong> Además, se activa una alerta en Opsgenie, que suena en nuestra guardia activa, garantizando que el equipo pueda reaccionar rápidamente a cualquier incidente.</p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg1betb4r1hceojwt4rmm.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg1betb4r1hceojwt4rmm.png" alt="Image description" width="800" height="144"></a></p> <h2> Conclusión 😃 </h2> <p>Implementar <strong><a href="https://www.cypress.io/" rel="noopener noreferrer">Cypress.io</a></strong> para pruebas end-to-end y mantener un monitoreo continuo nos ha permitido garantizar que nuestros lanzamientos a producción sean seguros y eficientes, incluso sin un equipo de QA dedicado. Al integrar estos procesos en nuestro flujo de trabajo, hemos mejorado la calidad y confiabilidad de nuestros productos. </p> <p>¿Qué estrategias utilizas tú para mantener la calidad en tus lanzamientos? ¡Déjanos tus comentarios y comparte tus experiencias!</p>