Electrobun: Sem Node, Sem Chromium, Apenas Performance Pura com Bun

BBetter Stack
Computing/SoftwareInternet Technology

Transcript

00:00:00Este é o ElectroBun, um framework de aplicações desktop multiplataforma que produz arquivos
00:00:05muito menores que o Electron, não exige escrever em Rust como o Tauri e oferece
00:00:11performance nativa com o poder do Bun e seus wrappers em C++. Sem Node.js ou V8.
00:00:18Mas o fato de usar a WebView nativa do sistema em vez do Chromium para
00:00:22todos os sistemas operacionais torna difícil criar apps realmente multiplataforma?
00:00:27Inscreva-se no canal e vamos conferir.
00:00:32Desde que o Bun anunciou executáveis full-stack no ano passado,
00:00:36fiquei muito animado com uma alternativa decente ao Electron.
00:00:40Mas após a aquisição pela Anthropic, da qual falarei mais adiante no vídeo,
00:00:44é menos provável que essa seja a direção que a equipe do Bun vá seguir.
00:00:49e ele já construiu coisas legais, como uma ferramenta híbrida de navegador, terminal e editor
00:00:55e ele já construiu coisas legais com isso, como um navegador híbrido, terminal e editor de código
00:01:01chamada Colab, um app de texto para fala com Qwen, e até rodou Doom em um
00:01:07app ElectroBun usando WebGPU. Vamos ver como usá-lo em um projeto simples.
00:01:12Ao iniciar o ElectroBun pela primeira vez, você tem acesso a vários templates
00:01:17para ver como o app funciona, como este app básico de notas, um app multi-janelas,
00:01:22e até um app de bandeja que abre a documentação no seu navegador.
00:01:26E como o ElectroBun suporta tecnologias web, você pode usar qualquer framework JS,
00:01:31de Svelte a Vue, Solid.js e até Angular.
00:01:35Mas vou mostrar um projeto básico do zero para ajudar você a entender tudo.
00:01:40Aqui tenho um app básico Bun React, que vamos transformar em um app nativo de Mac
00:01:45através do ElectroBun. Para isso, já tenho o ElectroBun instalado
00:01:49e já possuo um script para iniciar a build de desenvolvimento,
00:01:53assim como um script para compilar o app final.
00:01:55Na verdade, não precisamos deste “type module” aqui, pois não vamos usá-lo.
00:01:59Na raiz do projeto, criei um arquivo de configuração do ElectroBun,
00:02:03que contém o nome do meu app, um identificador e um ponto de entrada da build do Bun.
00:02:09Ainda não criei este ponto de entrada, então vamos fazer isso agora.
00:02:12No diretório source, criei uma pasta Bun e farei um arquivo index.ts,
00:02:17que instancia a classe browser window e recebe um título como argumento,
00:02:22que é o texto da nossa barra de título, e uma URL,
00:02:25que é para onde o app navegará ao carregar pela primeira vez.
00:02:28Se rodarmos “bun start”, devemos ver nosso app carregar com o título correto,
00:02:32mas nada aparece aqui. Isso ocorre porque após o Bun compilar o app,
00:02:36transpilar TypeScript para JavaScript, fazer tree shaking e tudo mais,
00:02:41ele coloca os arquivos em um diretório diferente, que precisamos referenciar.
00:02:46E não fizemos isso muito bem por aqui.
00:02:48Para corrigir, abrimos o arquivo de configuração e adicionamos um novo
00:02:53objeto “views”, que conterá as visualizações que o ElectroBun deve acessar.
00:02:57Daremos o nome de “main” à nossa view e o ponto de entrada index.html,
00:03:02que contém o JS do front-end referenciando o app,
00:03:06onde estão todo o JavaScript e CSS necessários para rodar corretamente.
00:03:09Você encontra mais informações sobre a config de build na documentação do ElectroBun.
00:03:13Agora que temos nossa main view dentro do diretório source Bun,
00:03:17podemos abrir o index.ts e atualizar a URL para usar o diretório views/main.
00:03:23Isso significa que agora, ao compilar o app, tudo deve funcionar como esperado.
00:03:28Podemos até dar um ar mais profissional removendo a barra de título.
00:03:34E também usar o objeto application menu para criar um menu personalizado.
00:03:39Quando estiver pronto, podemos compilar para produção, o que gera um arquivo DMG
00:03:44ele tem 271 MB — mais de quatro vezes o tamanho do app ElectroBun.
00:03:50dá para ver que tem 271 megabytes, mais de quatro vezes o tamanho do app ElectroBun.
00:03:56Como o ElectroBun usa webviews nativas (WebKit no Mac,
00:04:01Edge WebView 2 no Windows e WebKit GTK no Linux), você deve considerar
00:04:08recursos que as webviews não suportam ao criar apps multiplataforma.
00:04:11Embora o ElectroBun suporte o Chromium Embedded Framework para consistência
00:04:16entre plataformas, isso adiciona o navegador Chromium inteiro ao seu app,
00:04:22impactando no tamanho e performance, ficando igual ao Electron, exceto pelo uso do Bun.
00:04:27Existem outros recursos legais do ElectroBun que não mencionei,
00:04:32como arquitetura de iframe fora do processo para rodar webviews isoladas,
00:04:38RPC tipado para comunicação entre processos, compressão ZSTD e um wrapper
00:04:44auto-extraível para downloads iniciais menores, assinatura de código e muito mais.
00:04:48Mas, infelizmente, encontrei alguns problemas ao construir o app de demonstração,
00:04:54como documentação incompleta, especialmente sobre o arquivo de entrada.
00:04:58A página piscava em recarregamentos e o uso das ferramentas de inspeção quebrou meu layout.
00:05:03Eu sei que o ElectroBun é muito novo — o primeiro commit é de fevereiro.
00:05:09Digo isso apenas para ressaltar que esses problemas devem ser corrigidos no futuro.
00:05:13Na verdade, espero que sim, pois a equipe do Bun, após ser
00:05:19adquirida pela Anthropic, focou mais em melhorias de CLI e executáveis
00:05:25em vez de criar uma alternativa ao Electron. Portanto, o ElectroBun parece ser
00:05:31nossa melhor chance de ter uma ferramenta desktop multiplataforma com Bun.
00:05:37E se você não sabe nada sobre a aquisição do Bun pela Anthropic ou quer saber
00:05:42o novo rumo da equipe, confira este vídeo do James, que explica
00:05:48tudo detalhadamente.

Key Takeaway

O ElectroBun posiciona-se como uma alternativa de alta performance e baixo consumo de recursos ao Electron, aproveitando a velocidade do Bun e das WebViews nativas para criar apps desktop modernos.

Highlights

O ElectroBun é um framework desktop que utiliza o Bun e wrappers em C++ para oferecer performance nativa sem Node.js ou V8.

Diferente do Electron, ele gera binários significativamente menores por utilizar as WebViews nativas do sistema operacional (WebKit, Edge WebView 2).

Suporta qualquer framework de front-end moderno, como React, Vue, Svelte, Solid.js e Angular.

Oferece recursos avançados como arquitetura de iframe fora do processo, RPC tipado para comunicação e compressão ZSTD.

Apesar do potencial, o projeto ainda é muito recente, apresentando lacunas na documentação e pequenos bugs de interface.

Com a mudança de foco da equipe oficial do Bun após a aquisição pela Anthropic, o ElectroBun surge como a principal alternativa comunitária ao Electron.

Timeline

Introdução ao ElectroBun e Comparação com Competidores

O vídeo inicia apresentando o ElectroBun como um novo framework multiplataforma que promete arquivos menores que o Electron e facilidade de uso superior ao Tauri. O palestrante destaca que a ferramenta utiliza o poder do Bun com wrappers em C++, eliminando a dependência do Node.js e do motor V8. Um ponto central de discussão é o uso de WebViews nativas em vez de embutir o Chromium em todas as versões. Isso levanta questões sobre a consistência visual entre diferentes sistemas operacionais. O objetivo inicial é mostrar como obter performance nativa mantendo a flexibilidade do desenvolvimento web.

Contexto do Ecossistema Bun e Demonstrações Práticas

Nesta seção, é discutido o impacto da aquisição da equipe do Bun pela Anthropic, o que mudou as prioridades de desenvolvimento do runtime original. O palestrante explica que, embora o Bun tenha prometido executáveis full-stack, o ElectroBun agora preenche essa lacuna para aplicações desktop. São mostrados exemplos reais já construídos, como o navegador híbrido Colab e até uma implementação de Doom rodando via WebGPU. Esses casos de uso servem para provar a versatilidade do framework em lidar com tarefas complexas. O apresentador demonstra entusiasmo com a capacidade de criar ferramentas robustas utilizando tecnologias web familiares.

Configuração Inicial e Estrutura de Projetos

O tutorial prático começa com a exploração dos templates disponíveis, que incluem apps de notas, multi-janelas e utilitários de bandeja. É enfatizado que o ElectroBun é agnóstico em relação ao framework de front-end, suportando de Svelte a Angular sem restrições. O palestrante decide criar um projeto do zero usando React para demonstrar o processo de transformação de um app web em um executável nativo de Mac. São detalhados os scripts necessários para o ambiente de desenvolvimento e para o processo final de compilação. Esta parte é fundamental para entender a organização de pastas e os pré-requisitos técnicos do framework.

Desenvolvimento do Ponto de Entrada e Views

O foco aqui recai sobre a criação do arquivo de configuração e do ponto de entrada em TypeScript utilizando a classe Browser Window. O palestrante explica como configurar o título da janela e a URL inicial, além de resolver problemas comuns de carregamento de arquivos após a transpilação do Bun. É introduzido o conceito de "views", onde o desenvolvedor define quais arquivos HTML e ativos de front-end o ElectroBun deve renderizar. O processo inclui ajustes finos, como a remoção da barra de título padrão para dar ao aplicativo um visual mais profissional e moderno. O entendimento desse fluxo de dados entre o processo principal e a visualização é crucial para qualquer desenvolvedor.

Performance, Tamanho de Arquivo e Considerações Multiplataforma

Neste segmento, é feita uma comparação direta de tamanho entre um app Electron (271 MB) e o ElectroBun, que é quatro vezes menor. O segredo reside no uso do WebKit no Mac, Edge WebView 2 no Windows e WebKit GTK no Linux em vez de empacotar o Chromium. No entanto, o palestrante alerta que essa abordagem exige cuidado com recursos web que podem não ser suportados uniformemente em todos os motores. Recursos avançados como RPC tipado e compressão ZSTD são mencionados como diferenciais técnicos para otimização. A possibilidade de usar o Chromium Embedded Framework (CEF) existe para quem busca paridade total, embora isso aumente o tamanho do app final.

Limitações Atuais e o Futuro do Framework

O vídeo encerra com uma análise crítica honesta sobre o estado atual do ElectroBun, mencionando que o projeto ainda é muito jovem, com o primeiro commit datado de fevereiro. O palestrante relata dificuldades com documentação incompleta e alguns bugs visuais durante o uso de ferramentas de inspeção de layout. Apesar desses obstáculos, a conclusão é otimista, especialmente devido ao vácuo deixado pela equipe oficial do Bun em relação a ferramentas de interface desktop. O ElectroBun é apontado como a solução mais promissora para quem deseja utilizar a velocidade do Bun no desktop. O apresentador encoraja a comunidade a acompanhar o desenvolvimento e fornece referências adicionais para entender o novo rumo do ecossistema.

Community Posts

View all posts