Zero Native: O Assassino do Electron da Vercel que Ninguém Esperava

PortuguêsالعربيةDeutschEnglishEspañolFrançaisहिन्दीBahasa Indonesia日本語한국어Русский中文
BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology

Transcript

00:00:00Este é o Xero Native, um construtor de apps nativos baseado em Zig da Vercel que pode usar a web view do sistema
00:00:05ou agrupar todo o Chromium como o Electron para apps de desktop ou mobile, fornecendo binários minúsculos
00:00:12e reconstruções instantâneas para desenvolvimento.
00:00:14Mas será que o fato de ter que saber um pouco de Zig para usá-lo bem afastará os desenvolvedores JavaScript?
00:00:18Inscreva-se e vamos descobrir.
00:00:20Embora a equipe do BUN esteja migrando do Zig para o Rust, ainda é uma linguagem muito legal,
00:00:28sem borrow checker, sem lifetimes e que pode chamar C diretamente, ou seja, qualquer biblioteca C está a um import de distância
00:00:35sem precisar de nenhum código de ligação.
00:00:37E é legível o suficiente para devs JavaScript aprenderem.
00:00:39Na verdade, se quiser me ver aprendendo a programar em Zig do zero, me avise nos comentários.
00:00:44Acho que seria algo bem divertido de fazer.
00:00:46Mas, essencialmente, o Xero Native é uma camada fina em Zig que hospeda uma web view renderizando um front-end
00:00:51que usa pontes JSON para que o JavaScript na web view se comunique com a camada nativa Zig e vice-versa,
00:00:58que é como ele consegue acessar APIs de nível de sistema operacional.
00:01:01E se você acha que isso soa como Electrobun, bem, é quase isso.
00:01:04Mas com uma grande diferença, que discutiremos mais adiante no vídeo.
00:01:07Mas por enquanto, vamos passar por uma demonstração bem simples.
00:01:10Para começar, primeiro você precisa ter o Zig instalado, o que fiz com o Miez.
00:01:13Mas você também pode usar o Brew, e então instalar o Xero Native.
00:01:16Depois de fazer essas duas coisas, você pode rodar o comando “xero-native init” para criar um novo projeto.
00:01:22Este é o nome do meu projeto, mas pode ser o que você quiser.
00:01:25Vou usar a flag frontend com React, o que vai instalar um projeto Vite React.
00:01:30Mas também poderia ser Svelte, Vue, Next ou até apenas Vite.
00:01:34Então, se eu der enter, o Xero Native adicionará alguns diretórios.
00:01:37Se entrarmos no projeto demo, veremos o arquivo “app.zon” (Zig Object Notation), que explicarei depois.
00:01:43Temos ativos para coisas como ícones e outros recursos estáticos, o arquivo build Xig,
00:01:48que serve para o grafo de build do Zig, a ponte JS, o motor web e o diretório frontend, que contém nosso código de front-end.
00:01:54Se entrarmos nele, veremos arquivos que estamos acostumados a ver como desenvolvedores JavaScript.
00:01:58Neste ponto, se rodarmos “zig build run”, isso instalará as dependências e abrirá o app em uma nova janela.
00:02:04Nota: se quiser instalar o Xero Native em um projeto JavaScript existente,
00:02:08recomendo usar o Vite, que é uma versão mínima, e então mudar o conteúdo do diretório frontend para o código do seu app.
00:02:15O Xero Native também tem um servidor de dev muito legal que gerencia todo o ciclo de vida do front-end.
00:02:19Ao rodar “zig build dev”, o binário é compilado e o servidor de dev do Xero Native é iniciado.
00:02:24Se eu editar algum código, vemos nosso app nativo atualizar em tempo real.
00:02:28Posso até rodar “zig build package”, que construirá o app nativo para que eu possa distribuí-lo.
00:02:33E podemos vê-lo aqui dentro do diretório de pacotes do Zig com apenas 2,9 megabytes, o que é muito pequeno.
00:02:39E algumas pessoas conseguiram deixá-lo com menos de 1 megabyte.
00:02:43Mas e se eu quisesse mudar o ícone do app, o nome ou o motor web?
00:02:46Bem, é aqui que entra o arquivo “app.zon”, onde posso mudar o nome do ícone, do projeto e até o motor onde o app roda e o tamanho da janela.
00:02:55E essa é uma visão geral bem rápida do Xero Native.
00:02:58Há muitas coisas que não tive tempo de abordar, como ícones na bandeja do sistema, assinatura de código e apps embutidos para iOS e Android.
00:03:05Na verdade, preciso passar mais tempo com ele, o que pode render outro vídeo.
00:03:09Mas por melhor que o Xero Native seja, como ele se compara ao Electrobun, que também cria apps pequenos e rápidos usando a web view nativa?
00:03:17Bem, com o Electrobun, o próprio Bun é o ambiente de execução, pois você precisa escrever TypeScript para o processo principal.
00:03:24Embora um binário Zig inicie o app, o código roda em um web worker do Bun, que se comunica com APIs nativas via FFI do Bun, passando por camadas C++ e Objective-C.
00:03:37Já com o Xero Native, você só precisa do binário Zig; sem JavaScript, sem Bun, apenas Zig se comunicando com as APIs do SO e bibliotecas C via uma simples importação C.
00:03:50Isso resulta em ter a camada nativa mais fina possível em comparação ao Electrobun.
00:03:54Mas, por enquanto, você talvez precise escrever um pouco de Zig para obter tudo o que deseja do Xero Native ou, pelo menos, alterar algumas configurações em um arquivo Zig Object Notation.
00:04:03Além disso, o Xero Native não é tão rico em recursos quanto o Electrobun, que me permitiu alterar o estilo da barra de título e até adicionar alguns itens de menu personalizados.
00:04:11E essas coisas, infelizmente, não são suportadas no momento no arquivo “app.zon”.
00:04:15Também tive que abrir um chamado porque empacotar no MacOS não funcionou de primeira, mas pode ter sido falta de habilidade da minha parte.
00:04:22Mesmo assim, tenho certeza de que a equipe está trabalhando duro para adicionar mais recursos, corrigir esses problemas e trazer suporte para mobile.
00:04:29E se você não puder esperar por esses recursos, bem, é código aberto.
00:04:32Então é só dar o código para o Claude, dizer o que você quer e tenho certeza de que ele pode adicionar esses recursos para você, certo?

Key Takeaway

O Xero Native substitui o Electron e o Electrobun ao utilizar uma camada fina em Zig para criar binários de até 1 megabyte que se comunicam diretamente com as APIs do sistema operacional via pontes JSON.

Highlights

  • O Xero Native utiliza a linguagem Zig para criar binários nativos extremamente pequenos, atingindo tamanhos entre 1 e 2,9 megabytes.

  • A ferramenta permite o uso da web view nativa do sistema operacional ou o agrupamento do motor Chromium para renderização de interfaces.

  • O comando zig build dev habilita um servidor de desenvolvimento que atualiza o aplicativo nativo em tempo real após edições no código.

  • Diferente do Electrobun, o Xero Native elimina a necessidade de um ambiente de execução JavaScript como o Bun no processo principal.

  • A integração com bibliotecas C ocorre via importação direta sem a necessidade de escrever códigos de ligação complexos ou camadas intermediárias.

  • O arquivo app.zon centraliza configurações de ícones, nome do projeto, motor web e dimensões iniciais da janela do aplicativo.

Timeline

Arquitetura e capacidades do Xero Native

  • O framework utiliza Zig para hospedar uma web view que renderiza o front-end do aplicativo.
  • Pontes JSON permitem a comunicação bidirecional entre o JavaScript da interface e a camada nativa em Zig.
  • A ausência de borrow checker e lifetimes no Zig facilita a curva de aprendizado para desenvolvedores JavaScript.

A tecnologia foca na criação de binários minúsculos e reconstruções instantâneas. O uso do Zig permite chamadas diretas a qualquer biblioteca C, o que simplifica o acesso a recursos do sistema operacional. Esta estrutura resulta em uma camada nativa muito mais fina do que as soluções baseadas em ambientes de execução JavaScript tradicionais.

Fluxo de desenvolvimento e inicialização de projetos

  • O comando xero-native init cria novos projetos com suporte a frameworks como React, Svelte, Vue e Next.
  • O binário final compilado para distribuição ocupa apenas 2,9 megabytes no diretório de pacotes.
  • A estrutura de arquivos inclui o diretório frontend para o código da aplicação e o arquivo build.zig para o grafo de compilação.

A instalação requer o Zig e a ferramenta Xero Native, podendo ser feita via gerenciadores como Miez ou Brew. Para projetos existentes, a recomendação é utilizar o template Vite e substituir o conteúdo da pasta frontend. O fluxo de trabalho é otimizado com comandos específicos para compilação, execução e empacotamento final do software.

Configuração e comparação com Electrobun

  • O arquivo Zig Object Notation (app.zon) gerencia propriedades visuais e motores de renderização sem necessidade de código complexo.
  • O Xero Native opera sem JavaScript ou Bun no processo principal, reduzindo as camadas de abstração.
  • Suporte para aplicativos móveis em iOS e Android está em desenvolvimento pela equipe do projeto.

Enquanto o Electrobun depende do Bun como ambiente de execução e utiliza Web Workers para o processo principal, o Xero Native executa apenas o binário Zig. Essa diferença elimina a passagem por camadas C++ e Objective-C presentes no FFI do Bun. Atualmente, o projeto foca em expandir recursos como personalização de barras de título e menus, que ainda são limitados comparados a concorrentes mais maduros.

Community Posts

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

Write about this video