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.