Zero Native: El asesino de Electron de Vercel que nadie vio venir

Españolالعربية Deutsch English Français हिन्दी Bahasa Indonesia 日本語 한국어 Português Русский 中文

Computing/SoftwareSmall Business/StartupsInternet Technology

Transcript

00:00:00Esto es Xero Native, un generador de apps nativas basado en Zig que puede usar la vista web del sistema

00:00:05o empaquetar todo Chromium como Electron para apps de escritorio o móviles, ofreciendo binarios minúsculos

00:00:12y reconstrucciones instantáneas para el desarrollo.

00:00:14Pero, ¿el tener que saber un poco de Zig para usarlo bien desanimará a los desarrolladores de JavaScript?

00:00:18Suscríbete y vamos a descubrirlo.

00:00:20Aunque el equipo de BUN se está alejando de Zig hacia Rust, sigue siendo un lenguaje genial

00:00:28sin verificador de préstamos ni tiempos de vida, y puede llamar a C directamente, por lo que cualquier librería C está a una importación

00:00:35sin necesidad de código puente.

00:00:37Y es lo suficientemente legible para que los desarrolladores de JavaScript lo aprendan.

00:00:39De hecho, si quieres verme aprender a programar en Zig desde cero, házmelo saber en los comentarios.

00:00:44Creo que será algo bastante divertido de hacer.

00:00:46Pero básicamente, Xero Native es una capa ligera de Zig que aloja una vista web para renderizar el front-end

00:00:51que usa puentes JSON para que el JavaScript en la vista web se comunique con la capa nativa de Zig y viceversa,

00:00:58que es como logra acceder a las API a nivel de sistema operativo.

00:01:01Y si crees que esto suena como ElectroBUN, bueno, en parte lo es.

00:01:04Pero con una gran diferencia de la que hablaremos más adelante en el video.

00:01:07Por ahora, veamos una demostración muy sencilla.

00:01:10Para empezar, primero necesitas tener Zig instalado, lo cual hice con Miez.

00:01:13Pero también puedes usar Brew, y luego instalar Xero Native.

00:01:16Después de hacer ambas cosas, puedes ejecutar el comando “xero native init” para crear un proyecto nuevo.

00:01:22Este es el nombre de mi proyecto, pero puede ser el que tú quieras.

00:01:25Voy a usar el flag de front-end con React, lo que instalará un proyecto de Vite React.

00:01:30Pero también podría ser Svelte, Vue, Next o simplemente Vite.

00:01:34Si pulso enter, Xero Native añadirá unos cuantos directorios.

00:01:37Si entramos en el proyecto demo, vemos el archivo app.zon (Zig Object Notation), que explicaré luego.

00:01:43Tenemos los assets para iconos y otros archivos estáticos, el archivo build.zig,

00:01:48que es para el grafo de construcción de Zig, el puente JS, el motor web y el directorio front-end con nuestro código.

00:01:54De hecho, si entramos, vemos archivos que nos resultan familiares como desarrolladores de JavaScript.

00:01:58Llegados a este punto, si ejecutamos “zig build run”, instalará las dependencias y abrirá la app en una ventana.

00:02:04Nota: si quieres instalar Xero Native en un proyecto de JavaScript ya existente,

00:02:08recomiendo usar Vite, que es una versión mínima, y luego cambiar el contenido del directorio front-end por tu app.

00:02:15Xero Native también tiene un servidor de desarrollo genial que gestiona todo el ciclo de vida del front-end.

00:02:19Si ejecutamos “zig build dev”, compila el binario y lanza el servidor de desarrollo de Xero Native.

00:02:24Así, si edito el código, vemos que nuestra app nativa se actualiza en tiempo real.

00:02:28Incluso puedo ejecutar “zig build package”, que construirá la app nativa para que pueda distribuirla.

00:02:33Y podemos verla aquí dentro del directorio zig-out/package con solo 2.9 megabytes, lo cual es muy poco.

00:02:39Y algunas personas incluso han logrado que ocupe menos de 1 megabyte.

00:02:43¿Pero qué pasa si quiero cambiar el icono de la app, el nombre o el motor web?

00:02:46Bueno, aquí entra el archivo app.zon, donde puedo cambiar el icono, el nombre del proyecto, el motor de ejecución y el tamaño de la ventana.

00:02:55Y esa es una visión general muy, muy rápida de Xero Native.

00:02:58Hay muchísimas cosas que no llegué a ver, como iconos en la bandeja del sistema, firma de código y apps para iOS y Android.

00:03:05De hecho, necesito dedicarle más tiempo, lo que podría dar lugar a otro video.

00:03:09Pero, por muy bueno que sea Xero Native, ¿cómo se compara con algo como Electrobun, que también crea apps pequeñas y rápidas?

00:03:17Bueno, con Electrobun, el propio Bun es el entorno de ejecución porque tienes que escribir TypeScript para el proceso principal.

00:03:24Así, aunque un binario Zig arranca la app, el código corre en un web worker de Bun, que se comunica con las API nativas vía FFI de Bun, pasando por capas de C++ y Objective-C.

00:03:37Pero con Xero Native, solo necesitas el binario Zig; nada de JavaScript ni de Bun, solo Zig, que se comunica con el SO y librerías C mediante un simple import de C.

00:03:50Esto resulta en tener el cascarón nativo más ligero posible comparado con Electrobun.

00:03:54Pero ahora mismo puede que tengas que escribir un poquito de Zig para obtener todo lo que quieres o al menos cambiar configuraciones en el archivo .zon.

00:04:03Además, Xero Native no tiene tantas funciones como Electrobun, que me permitía cambiar el estilo de la barra de título o añadir menús personalizados.

00:04:11Y esas cosas, lamentablemente, no están soportadas todavía en el archivo app.zon.

00:04:15También tuve que reportar un problema porque empaquetar en MacOS no me funcionó a la primera, aunque pudo ser falta de habilidad por mi parte.

00:04:22No obstante, estoy seguro de que el equipo trabaja duro para añadir funciones, corregir fallos y añadir soporte para móviles.

00:04:29Y si no puedes esperar a esas funciones, bueno, es de código abierto.

00:04:32Así que dale el código a Claude, dile lo que quieres y seguro que podrá añadir esas funciones por ti, ¿verdad?

Key Takeaway

Xero Native utiliza una capa ligera de Zig y puentes JSON para crear aplicaciones nativas multiplataforma con binarios de menos de 3 megabytes que superan la eficiencia de Electron y Electrobun.

Highlights

Xero Native genera binarios de solo 2.9 megabytes, con casos optimizados que alcanzan tamaños inferiores a 1 megabyte.
El sistema utiliza puentes JSON para comunicar el JavaScript de la vista web con la capa nativa escrita en Zig.
La herramienta permite empaquetar todo Chromium al estilo de Electron o utilizar la vista web nativa del sistema operativo.
La integración directa con C permite que cualquier librería en ese lenguaje funcione con un simple import sin código puente.
El comando 'zig build dev' activa un servidor de desarrollo que ofrece reconstrucciones instantáneas y actualizaciones en tiempo real.
El archivo app.zon centraliza la configuración del icono, el nombre del proyecto, el motor de ejecución y las dimensiones de la ventana.

Timeline

Arquitectura y ventajas del lenguaje Zig

Xero Native opera como una capa de Zig que aloja una vista web para el renderizado del front-end.
El acceso a las API del sistema operativo se realiza mediante puentes JSON entre JavaScript y la capa nativa.
Zig carece de verificador de préstamos o tiempos de vida, lo que facilita su aprendizaje para desarrolladores de JavaScript.

Esta herramienta se posiciona como una alternativa a Electron mediante el uso de Zig, un lenguaje capaz de llamar a C directamente. A diferencia de otros entornos, permite elegir entre usar la vista web del sistema o empaquetar Chromium. Esta flexibilidad técnica resulta en binarios minúsculos y una velocidad de reconstrucción superior durante el ciclo de desarrollo.

Proceso de instalación y flujo de trabajo

El comando 'xero native init' con el flag de front-end permite integrar React, Svelte, Vue o Next.js.
La estructura del proyecto incluye archivos específicos como app.zon para metadatos y build.zig para el grafo de construcción.
El binario final para distribución se genera en el directorio zig-out/package con un peso de 2.9 megabytes.

La configuración requiere tener instalado Zig a través de gestores como Miez o Brew antes de inicializar el proyecto. El flujo de trabajo se apoya en comandos de compilación que gestionan automáticamente las dependencias y abren la aplicación en una ventana dedicada. Para proyectos existentes, se recomienda el uso de Vite como base para sustituir el contenido del directorio front-end.

Configuración personalizada y comparativa con Electrobun

Xero Native elimina la dependencia de un entorno de ejecución intermedio como Bun para el proceso principal.
La comunicación con el sistema operativo es directa mediante Zig, prescindiendo de capas adicionales de C++ u Objective-C.
El soporte para personalización avanzada de la interfaz como menús y barras de título sigue en fase de desarrollo.

A diferencia de Electrobun, donde el código corre en un web worker de Bun y requiere FFI, Xero Native solo necesita el binario de Zig para funcionar. Esta arquitectura produce el cascarón nativo más ligero posible actualmente. Aunque carece de algunas funciones de personalización estética presentes en competidores, su naturaleza de código abierto permite la extensión de funcionalidades mediante la edición directa de los archivos de configuración.

Community Posts

No posts yet. Be the first to write about this video!

Write about this video