Edge computing en el navegador

Cuando pruebo una nueva tecnología web quiero experimentar en el navegador antes de instalar nada localmente o configurar un entorno de desarrollo. Últimamente he estado explorando GitHub Codespaces para esto, trabajando en proyectos que te guían para construir y desplegar aplicaciones en el edge directamente desde el navegador. En esta guía presento la nueva experiencia de aprendizaje Fastly Compute que puedes probar en segundos y que permite mejorar la experiencia de usuario de un sitio manipulando la solicitud del usuario y la respuesta del origen en el edge.

En un Compute app puedes escribir lógica en varios lenguajes; los SDK de Fastly la compilan a Web Assembly WASM para ejecutarse entre tus usuarios y el host del sitio. Aquí usamos JavaScript para la lógica del edge. El flujo general es sencillo: haces fork de un repo en GitHub, abres tu fork en un codespace, la app se ejecuta y abre una vista previa, el proyecto incluye un sitio de origen de ejemplo, modificas el código del Compute y ves la vista previa actualizarse, y cuando estás listo añades tu clave API de Fastly y publicas.

Pasos rápidos para poner en marcha tu app: inicia sesión en GitHub y visita el repositorio de aprendizaje, haz fork en tu cuenta, abre tu fork en un codespace desde el botón Code creando un codespace en la rama main. Cuando se abra el codespace intentará construir, ejecutar y abrir una vista previa para el sitio de origen de ejemplo y para la app Compute inicial. Encontrarás botones en la parte inferior del editor para facilitar el proceso y un botón Split para separar la vista previa del código y ver los cambios en tiempo real.

Conoce tu nueva app: el código del sitio de origen está en la carpeta origin y la lógica del Compute en src, revisa index.js. En el área Terminal selecciona PORTS para ver las versiones origin y edge del sitio y usa los botones para alternarlas en la vista previa. Observa las diferencias funcionales: el estilo cambia porque la app Compute intercambia la hoja de estilos en el edge; se escribe una cookie con información de geolocalización pasada en el edge; el enlace ohno devuelve una página HTML sintética en el edge en lugar de un error de servidor; el enlace data devuelve una página sintética en lugar de JSON crudo.

Desarrolla en el navegador: modifica tu app Compute. En el README hay un cambio sugerido que puedes copiar en index.js; idealmente la app se recompilará y la vista previa se actualizará automáticamente. El ejemplo añade información a la cookie de geolocalización indicando la hora del día en la ubicación del usuario. Ten en cuenta que la geolocalización no será precisa hasta desplegar al edge porque inicialmente la app se ejecuta 'localmente' dentro del codespace que corre en un contenedor de GitHub. También puedes cambiar el sitio de origen en la carpeta origin modificando HTML y CSS. Comparte tu app en borrador con colaboradores usando el botón Share; solo necesitan iniciar sesión en GitHub para verla.

Despliegue en el edge: regístrate en Fastly y consigue una clave API. Añade tu clave al codespace con el nombre FASTLY_API_TOKEN y pulsa Publish en el editor. El tooling de Fastly construirá y empaquetará tu app, creará un nuevo servicio en tu cuenta y subirá el paquete. Los scripts en el codespace también desplegarán tu sitio de origen en GitHub Pages y lo configurarán como origen para tu Compute app. Cuando esté listo verás una dirección edgecompute.app en la salida del Terminal para comprobar tu app desplegada.

Puedes seguir editando y pulsar Publish cada vez que quieras publicar cambios en el edge. Recuerda commitear tus cambios en el fork del repo desde el área Source Control del editor si quieres conservarlos. Explora las carpetas helpers y .devcontainer para entender mejor cómo funciona todo y aprende más sobre desarrollo local y ejemplos en JavaScript para Compute.

En Q2BSTUDIO somos especialistas en desarrollo de software y aplicaciones a medida, ofrecemos soluciones completas que incluyen inteligencia artificial, ciberseguridad, servicios cloud y mucho más. Si necesitas crear aplicaciones escalables y seguras podemos ayudarte con servicios de aplicaciones a medida y con la integración en plataformas en la nube mediante nuestros servicios cloud aws y azure para optimizar despliegues en el edge puedes conocer más en servicios cloud aws y azure. También trabajamos en inteligencia de negocio, ia para empresas, agentes IA, power bi, ciberseguridad y automatización de procesos para que tu proyecto funcione de forma inteligente y segura.

Palabras clave relacionadas: 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. Si quieres que te ayudemos a diseñar o desplegar soluciones edge computing integradas con tus sistemas empresariales contacta con Q2BSTUDIO para una evaluación y propuesta personalizada.