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