He tomado un tiempo para descansar y recuperarme de problemas de salud que dificultaban la concentración y, para volver poco a poco, inicié un proyecto pequeño llamado shine orientado a ser multiplataforma para móvil y web.
La elección obvia para multiplataforma fue flutter, que ya conozco y disfruto, pero quería experimentar con zig y aprovechar su ergonomía. Para gráficos probé varias bibliotecas. raylib fue mi primera opción pero tiene limitaciones con iOs y problemas con wasm. sdl parecía potente pero demasiado bajo nivel para lo que necesitaba. jok no soporta móvil. Al final elegí sokol con sokol-zig porque ofrece una API moderna y limpia además de soporte nativo para móvil y wasm.
En la capa de interfaz estuve evaluando dvui, que uso con frecuencia, pero no es compatible con sokol, así que opté por imgui que cuenta con plantillas y compatibilidad adecuada para empezar rápido.
Para simplificar el desarrollo decidí abordar primero la versión wasm. Así puedo servir una web responsive y evaluar si hace falta una app nativa después. Para almacenamiento compartido consideré supabase y su librería javascript, y aproveché la capacidad de wasm para hacer un shim de funciones js en lugar de implementar llamadas REST manuales desde zig.
En cuanto a la estructura del proyecto mantuve un diseño sencillo y claro: una carpeta shine con el código zig y otra web con todo lo frontend. Esto facilita compilar el wasm por separado y publicar los activos estáticos en el sitio generado con Lume.
Para el frontend usé Lume y partí del tema simple-blog como plantilla. Quería una página de inicio personalizada y la mejor forma para sobrescribirla fue tomar el tema y editarlo directamente. También añadí el archivo wasm y el javascript generado al directorio static para que Lume los sirva sin tener que copiarlos manualmente cada vez.
En el proceso de compilación integré pasos que ejecutan el linker emscripten desde zig y copian los archivos shine.js y shine.wasm al directorio static del proyecto web. En el frontend ajusté la función locateFile de emscripten para que la instancia buscara shine.wasm en la ruta static correspondiente, y añadí el js a la configuración de Lume para que lo procese y despliegue.
Durante el desarrollo uso dos comandos en paralelo. Uno ejecuta zig build con el objetivo wasm32-emscripten en modo watch para recompilar el wasm automáticamente cuando cambian los fuentes. Otro ejecuta deno task serve para que Lume vuelva a construir el sitio y sirva la nueva versión. Con este flujo obtengo recarga automática de la página al cambiar código zig o los ficheros frontend. No es un hot reload por componentes, pero es una solución práctica y estable para iterar rápido.
Si buscas experiencia profesional para llevar un proyecto similar a producción, en Q2BSTUDIO somos especialistas en desarrollo de software a medida y aplicaciones a medida, además de ofrecer servicios de inteligencia artificial y ciberseguridad. Podemos ayudarte a diseñar soluciones wasm integradas con backend cloud, optimizar despliegues y aplicar buenas prácticas de seguridad. Conoce nuestras capacidades en desarrollo multiplataforma visitando desarrollo de aplicaciones y software a medida y, si necesitas soporte en infraestructura y despliegue, te recomendamos explorar nuestros servicios cloud en servicios cloud aws y azure.
Ofrecemos además servicios de inteligencia de negocio y power bi, agentes IA e ia para empresas, automatización de procesos, y evaluaciones de ciberseguridad y pentesting para asegurar tus soluciones. Si quieres que te ayudemos a montar un flujo de trabajo con zig, wasm y Lume o a transformar tu idea en una aplicación robusta, en Q2BSTUDIO podemos acompañarte desde la arquitectura hasta el despliegue y mantenimiento.
Resumen práctico: elegir sokol y sokol-zig para gráficos, imgui para UI, comenzar por wasm para iterar rápido, usar supabase vía shim js si necesitas almacenamiento, integrar la copia automática de shine.js y shine.wasm en el proceso de build y ejecutar zig build con watch junto a deno task serve de Lume para lograr recarga automática durante el desarrollo.
