Bienvenido de nuevo a Campfire Logs: El arte del ensayo y error. En mi anterior entrega hablé sobre la refactorización de una demo frontend para hacerla más modular y accesible. Aquí resumo y amplío ese trabajo, explicando las mejoras funcionales que implementé, las nuevas capacidades interactivas y cómo separar las capas de datos, presentación y lógica mejoró la mantenibilidad al desacoplar componentes.
Primero, un principio que guiaba todo fue la integridad en el desarrollo. La demo original era un proyecto de curso y tuve que sustituir imágenes y recursos para evitar problemas de derechos de autor. Para respetar a los autores creé una página de Créditos y Atribuciones que recoge enlaces a los creadores, la plataforma y la licencia correspondiente. En lugar de codificar esos créditos directamente en la plantilla Nunjucks, extraje los datos a un archivo de datos que 11ty procesa al compilar. Así puedo cambiar la información en un solo lugar y que esos cambios se propaguen por todo el sitio.
Separar la capa de datos de la presentación y de la lógica no solo ordenó el código, también facilitó reutilizar información entre secciones. Por ejemplo, los productos destacados en la página principal y la galería compartían imágenes, descripciones y precios, pero estaban repartidos entre HTML y scripts. Convertí esa información en un array de objetos estandarizados en un archivo de datos. De este modo Nunjucks puede generar el slideshow de la página de inicio para carga rápida y JavaScript puede poblar dinámicamente el carrusel de la galería para ofrecer funciones interactivas como scroll infinito y descripciones ampliadas al enfocar.
No mezclé todas las entidades en un solo archivo por una razón: la separación evita God Objects y facilita una migración futura a una base de datos relacional donde tablas separadas y claves foráneas mantienen la integridad y escalabilidad. Ese mismo enfoque lo aplico en Q2BSTUDIO cuando diseñamos arquitecturas de software a medida para clientes, asegurando que los datos, la presentación y la lógica escalen con facilidad.
La página de Comunidad necesitaba una transformación mayor. El iframe de Google Calendar y los eventos estáticos resultaban planos respecto al resto del sitio. Opté por integrar Zoho Calendar mediante su API para tener una fuente única de verdad. El flujo consistió en determinar las fechas de inicio y fin del mes al tiempo de build, validar y refrescar el token OAuth2, solicitar los eventos del calendario de prueba, normalizar la carga útil y exportarla como módulo que 11ty convierte a JSON en la compilación. En el cliente el carrusel consume ese JSON local y renderiza tarjetas de evento interactivas.
Normalizar fechas y horas fue el punto más laborioso. Aprendí que los eventos all day y los eventos con hora regresan propiedades datetime en formatos distintos. Detectar el flag isAllDay en la respuesta simplificó la lógica para parsear cada caso. Para mantener la información actualizada sin intervención manual, programé un cron que reconstruye el sitio el primer día de cada mes a las 00:01. Como tengo eventos recurrentes configurados en el calendario de prueba, la demo siempre muestra los eventos pertinentes al mes en curso.
Todo este proceso generó trabajo extra que no esperaba, pero las ganancias en mantenibilidad y en demostración de buenas prácticas valieron la pena. Refactorizar un código monolítico en módulos bien definidos reduce el coste de futuras mejoras y facilita la incorporación de características avanzadas, como agentes IA para automatizar tareas o integraciones con servicios cloud.
En Q2BSTUDIO aplicamos esos mismos principios en proyectos reales. Somos una empresa de desarrollo de software y aplicaciones a medida que también ofrece servicios de inteligencia artificial, ciberseguridad y arquitectura cloud. Diseñamos soluciones que contemplan desde la etapa de datos hasta la experiencia de usuario, pasando por la seguridad y el despliegue en servicios cloud aws y azure cuando la estrategia lo requiere. Para empresas que buscan potenciar sus decisiones tenemos servicios de inteligencia de negocio y Power BI que convierten datos en insights accionables.
Si tu objetivo es una plataforma personalizada que integre modelos de IA, automatizaciones y protección frente a amenazas, en Q2BSTUDIO creamos software a medida que combina desarrollo robusto con prácticas de ciberseguridad y despliegue seguro. También ofrecemos consultoría y servicios de implementación de inteligencia artificial y agentes IA para empresas que quieren mejorar procesos, atención al cliente o toma de decisiones automatizada.
Lecciones clave que extraje del proyecto: mantener los datos separados facilita la reutilización; automatizar builds regulares mantiene la demo relevante; documentar y normalizar contratos de API evita sorpresas; y, sobre todo, la refactorización es una inversión que paga en agilidad y calidad. Cada decisión técnica debería responder no solo a la necesidad inmediata, sino a cómo escalará y se mantendrá en el tiempo.
TL;DR Refactoricé una demo monolítica en un sistema modular usando 11ty, Nunjucks y JavaScript, separando datos (créditos, productos, eventos) de la presentación y la lógica. Implementé una página dedicada de Créditos, convertí la galería y el slideshow en componentes dinámicos, y conecté eventos con la API de Zoho para una fuente de verdad sincronizada mediante builds programados. El esfuerzo aumentó el trabajo a corto plazo, pero mejoró la mantenibilidad, la ética en las atribuciones y la demostración de evolución técnica.
Si te interesa una solución profesional que incluya aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA o power bi para tu organización, en Q2BSTUDIO podemos ayudarte a diseñar e implementar la solución adecuada. Me encantaría leer tus experiencias con APIs de terceros o tus estrategias de refactorización, deja un comentario y conversemos.
Continuará en el siguiente registro donde compartiré avances en la plataforma de blogging y el tablero en React y KendoReact, mostrando cómo mantener coherencia entre diseño, rendimiento y funcionalidades inteligentes.
