00:00:00Este es ElectroBun, un framework de aplicaciones de escritorio multiplataforma que produce
00:00:05paquetes mucho más pequeños que Electron, no requiere escribir en Rust como Tauri y ofrece
00:00:11un rendimiento nativo gracias al poder de Bun y sus propios wrappers de C++. Sin Node.js ni V8.
00:00:18Pero, ¿el hecho de que use el WebView nativo del sistema en lugar de Chromium en
00:00:22todos los sistemas operativos dificulta la creación de apps realmente multiplataforma?
00:00:27Suscríbete y vamos a descubrirlo.
00:00:32Desde que Bun anunció los ejecutables full-stack el año pasado,
00:00:36me entusiasmó mucho la idea de una alternativa decente a Electron.
00:00:40Pero tras la adquisición por parte de Anthropic, de la que hablaré más adelante,
00:00:44parece menos probable que ese sea el camino que tome el equipo de Bun.
00:00:49Así que Yoav, de Blackboard, creó ElectroBun, lo más parecido que tendremos a un Electron con Bun,
00:00:55y ya ha creado cosas geniales como Colab, una herramienta híbrida de navegador, terminal y editor,
00:01:01una app de texto a voz con Quen, e incluso hizo funcionar Doom en una
00:01:07app de ElectroBun usando WebGPU. Veamos cómo usarlo en un proyecto sencillo.
00:01:12Al inicializar ElectroBun por primera vez, tienes acceso a varias plantillas que puedes
00:01:17usar para ver cómo funciona, como esta app básica de notas, una de múltiples ventanas,
00:01:22o una app de bandeja que abre la documentación directamente en tu navegador.
00:01:26Y como ElectroBun admite tecnologías web, puedes usar el framework de JS que quieras,
00:01:31desde Svelte y Vue hasta Solid.js e incluso Angular.
00:01:35Pero voy a explicar un proyecto básico desde cero para que lo entiendas por completo.
00:01:40Aquí tengo una app básica de React con Bun, que vamos a convertir en una app nativa de Mac
00:01:45mediante ElectroBun. Para ello, ya tengo instalado ElectroBun
00:01:49y cuento con un script para iniciar la compilación de desarrollo,
00:01:53así como un script para compilar la aplicación final.
00:01:55De hecho, no necesitamos este módulo de tipo aquí, ya que no vamos a usarlo.
00:01:59En la raíz del proyecto he creado un archivo de configuración de ElectroBun,
00:02:03que por ahora contiene el nombre de mi app, un identificador y el punto de entrada de Bun.
00:02:09Todavía no he creado ese punto de entrada, así que vamos a hacerlo ahora.
00:02:12Dentro del directorio source, he creado una carpeta Bun y haré un archivo index.ts,
00:02:17que instancia la clase Browser Window y recibe un título como argumento,
00:02:22que es el texto que se verá en la barra de título, y una URL,
00:02:25que es a donde navegará la aplicación cuando se cargue inicialmente.
00:02:28Si ejecutamos “Bun start”, deberíamos ver nuestra aplicación cargarse con el título correcto,
00:02:32pero no se muestra nada. Esto se debe a que después de que Bun compila la app,
00:02:36transpilando TypeScript a JavaScript, haciendo tree shaking y demás,
00:02:41coloca los archivos en un directorio distinto que debemos referenciar en nuestro punto de entrada.
00:02:46Y eso no lo hemos hecho muy bien por aquí.
00:02:48Para solucionarlo, abrimos la configuración de ElectroBun y añadimos un nuevo objeto
00:02:53“views”, que contendrá las nuevas vistas a las que queremos que ElectroBun acceda.
00:02:57Llamaremos a nuestra vista “main” y le daremos un punto de entrada de index.html,
00:03:02que contiene el JS del frontend que hace referencia a la aplicación,
00:03:06la cual contiene todo el JavaScript y CSS necesarios para que funcione correctamente.
00:03:09Puedes encontrar más información sobre la configuración de compilación en su documentación.
00:03:13Ahora que tenemos nuestra vista principal en el directorio source de Bun,
00:03:17podemos abrir index.ts y actualizar la URL para que use el directorio de vistas y main.
00:03:23Esto significa que al compilar la app, todo debería funcionar como se espera.
00:03:28Incluso podemos darle un aspecto más de aplicación nativa ocultando la barra de título.
00:03:34También podríamos usar el objeto del menú de la aplicación para darle un menú personalizado.
00:03:39Cuando estemos listos, compilamos para producción, lo que genera un archivo DMG
00:03:44de 17 MB y una aplicación de 65 MB. Si comparamos eso con un “Hola Mundo” en Electron,
00:03:50verás que pesa 271 MB, más de cuatro veces el tamaño de la aplicación de ElectroBun.
00:03:56Como las apps de ElectroBun usan web views nativos (WebKit en Mac,
00:04:01Edge WebView 2 en Windows y WebKit GTK en Linux), hay que considerar que
00:04:08ciertas funciones no son compatibles con todos los web views al ser multiplataforma.
00:04:11Aunque ElectroBun admite el Chromium Embedded Framework para mayor consistencia,
00:04:16esto añade el navegador Chromium completo a tu app, afectando al tamaño y rendimiento,
00:04:22lo que lo hace casi igual a Electron, con la única diferencia de que utiliza Bun.
00:04:27Hay otras funciones geniales de ElectroBun de las que no he hablado,
00:04:32como una arquitectura de iframes fuera de proceso para aislar cada WebView,
00:04:38RPC con tipos para comunicación entre procesos, compresión ZSTD y un envoltorio
00:04:44autoextraíble para descargas iniciales más pequeñas, firma de código y mucho más.
00:04:48Pero desafortunadamente, tuve algunos problemas al crear la aplicación de demostración,
00:04:54como falta de documentación, especialmente sobre el archivo de entrada de ElectroBun.
00:04:58La página parpadeaba a veces al recargar y el inspector de elementos desajustaba el diseño.
00:05:03Sé que ElectroBun es muy reciente; el primer commit es de febrero y
00:05:09seguro hubo algunos antes. Solo digo que estos detalles se solucionarán en el futuro.
00:05:13De hecho, espero que así sea, porque el equipo de Bun, tras ser adquirido por Anthropic,
00:05:19se ha centrado más en mejoras de CLI y ejecutables en lugar de
00:05:25seguir el camino de crear una alternativa a Electron. Así que parece que ElectroBun es
00:05:31nuestra mejor opción para una herramienta de escritorio multiplataforma basada en Bun.
00:05:37Y si no sabes nada sobre la adquisición de Bun por Anthropic o quieres saber más
00:05:42sobre la nueva dirección que está tomando el equipo de Bun desde entonces,
00:05:48echa un vistazo a este video de James, que lo explica todo.