Electron.js: Construindo Aplicações Desktop Profissionais com JavaScript, HTML e CSS

Criar aplicações desktop sempre foi um desafio para desenvolvedores web. Era preciso aprender C++, C# ou linguagens específicas de cada plataforma. O Electron.js mudou completamente esse cenário, permitindo que milhares de aplicações profissionais sejam construídas com HTML, CSS e JavaScript. Neste artigo, você vai entender como o Electron funciona, seus casos de uso reais e como criar sua primeira aplicação desktop.

O que é o Electron.js?

O Electron.js é um framework open-source mantido pela OpenJS Foundation que permite criar aplicações desktop multiplataforma (Windows, macOS e Linux) utilizando tecnologias web. Ele combina o Chromium (para renderização) com o Node.js (para acesso ao sistema operacional), oferecendo o melhor dos dois mundos.

Lançado inicialmente pelo GitHub em 2013 como "Atom Shell", o Electron foi renomeado em 2015 e rapidamente se tornou a base de aplicações icônicas como VS Code, Slack, Discord, Figma, WhatsApp Desktop e Spotify. Sua proposta é simples: se você sabe desenvolver para a web, já sabe desenvolver para desktop.

Arquitetura do Electron

O Electron possui uma arquitetura baseada em dois tipos de processos:

Processo Main (Main Process): Executa o Node.js, gerencia a janela da aplicação, interage com o sistema operacional (arquivos, menus, notificações) e orquestra os processos renderer. Cada aplicação Electron tem exatamente um processo main.
Processo Renderer (Renderer Process): Executa o Chromium para renderizar a interface. Cada janela ou aba tem seu próprio processo renderer isolado. Aqui você escreve HTML, CSS e JavaScript como em uma aplicação web comum.

A comunicação entre os processos é feita via IPC (Inter-Process Communication), um sistema de mensagens assíncronas que permite ao renderer solicitar operações do sistema (como ler um arquivo) e ao main enviar dados atualizados para a interface.

// Processo Main (main.js)
const { app, BrowserWindow, ipcMain } = require("electron")

ipcMain.handle("ler-arquivo", async (event, caminho) => {
  const fs = require("fs")
  return fs.readFileSync(caminho, "utf-8")
})

// Processo Renderer (renderer.js)
const { ipcRenderer } = require("electron")

const conteudo = await ipcRenderer.invoke("ler-arquivo", "/dados.txt")

Por que Electron é tão Popular?

Diversos fatores contribuem para a adoção massiva do Electron no mercado:

Multiplataforma nativo: Um único código-base gera executáveis para Windows, macOS e Linux sem modificações.
Ecossistema Web: Utilize npm, React, Vue, Angular, Svelte — toda a imensa biblioteca de pacotes JavaScript está disponível.
Atualizações automáticas: O módulo electron-updater permite distribuir atualizações seamless para os usuários.
Ferramentas de debug: Chrome DevTools integrado, inspeção de elementos e profiling de performance.
Segurança: Context isolation, sandboxing dos processos renderer e Content Security Policy para mitigar ataques XSS.
Comunidade ativa: Milhares de pacotes no npm específicos para Electron, documentação robusta e exemplos práticos.

Criando sua Primeira Aplicação Electron

Vamos construir um aplicativo simples que exibe uma lista de tarefas (To-Do) usando Electron puro. Primeiro, inicialize o projeto:

mkdir meu-electron-app
cd meu-electron-app
npm init -y
npm install electron --save-dev

Crie o arquivo main.js — o ponto de entrada do processo main:

const { app, BrowserWindow } = require("electron")

function criarJanela() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true
    }
  })
  win.loadFile("index.html")
}

app.whenReady().then(criarJanela)

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") app.quit()
})

Agora crie o index.html — a interface do renderer:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Meu App Electron</title>
  <style>
    body { font-family: system-ui; padding: 2rem; }
    input, button { padding: 0.5rem; font-size: 1rem; }
    li { margin: 0.5rem 0; }
  </style>
</head>
<body>
  <h1>Lista de Tarefas</h1>
  <input id="tarefa" placeholder="Nova tarefa..." />
  <button id="adicionar">Adicionar</button>
  <ul id="lista"></ul>

  <script>
    const input = document.getElementById("tarefa")
    const lista = document.getElementById("lista")

    document.getElementById("adicionar").onclick = () => {
      if (input.value.trim()) {
        const item = document.createElement("li")
        item.textContent = input.value
        lista.appendChild(item)
        input.value = ""
      }
    }
  </script>
</body>
</html>

Adicione o script de inicialização no package.json:

"scripts": {
  "start": "electron ."
}

Execute com npm start e sua janela desktop aparecerá!

Boas Práticas de Segurança

Segurança em Electron merece atenção especial, pois sua aplicação tem acesso ao sistema do usuário. Siga estas recomendações:

Context Isolation: Sempre mantenha contextIsolation: true para isolar o script do renderer do Node.js.
Sandbox: Habilite sandbox: true nos webPreferences para restringir o que o renderer pode fazer.
Sem nodeIntegration: Mantenha nodeIntegration: false — nunca exponha o Node.js diretamente ao renderer.
IPC Validado: Sempre valide os dados recebidos via IPC no processo main. Nunca confie cegamente no renderer.
Content Security Policy: Defina CSP no HTML para mitigar ataques XSS e injeção de scripts.
Evite eval(): Nunca use eval(), new Function() ou similares no processo renderer.

Performance e Tamanho do Executável

Uma crítica comum ao Electron é o tamanho dos executáveis (cerca de 150-200MB) e o consumo de memória. É importante entender o motivo: cada aplicação Electron embarca o runtime completo do Chromium e do Node.js. No entanto, existem estratégias para mitigar esses impactos:

ASAR: O formato de arquivo ASAR empacota os assets em um único arquivo, melhorando performance de leitura.
electron-builder: Ferramenta que otimiza o bundle final, comprime binários e gera instaladores específicos para cada plataforma.
Lazy loading: Carregue módulos pesados apenas quando necessário, especialmente no processo main.
Native modules: Para operações críticas, considere módulos nativos via N-API ou ffi-napi.

Electron vs Alternativas Modernas

O cenário de desenvolvimento desktop com tecnologias web hoje oferece várias alternativas. Veja como Electron se compara:

Tauri: Usa o webview nativo do sistema (WebKit no macOS/Linux, WebView2 no Windows), resultando em executáveis muito menores (~5MB). Oferece melhor performance e menor consumo de memória, mas o ecossistema é menos maduro e algumas APIs nativas são mais limitadas.
.NET MAUI / WinUI 3: Soluções da Microsoft para apps Windows/macOS com C# e XAML. Excelente integração com o ecossistema Windows, mas exige aprender uma stack diferente.
Flutter Desktop: Compila para nativo com código Dart. Crescendo rapidamente, mas ainda em maturação para casos de uso complexos.
NW.js: Similar ao Electron, porém permite acesso direto ao Node.js do renderer (menos seguro). Perdeu espaço para o Electron ao longo dos anos.

Para projetos que priorizam ecossistema maduro, produtividade imediata e compatibilidade total com npm, Electron continua sendo a escolha mais segura.

Casos de Uso Reais

Empresas de todos os portes utilizam Electron em produção. Alguns exemplos emblemáticos:

VS Code (Microsoft): O editor mais popular do mundo, com milhares de extensões e suporte a Remote Development.
Slack: Cliente desktop com notificações nativas, chamadas de áudio/vídeo e integração com calendário.
Discord: Comunicação em tempo real com streaming de tela, compartilhamento de áudio e games overlay.
Figma: Ferramenta de design colaborativo rodando em desktop com performance de renderização vetorial.
Obsidian: Aplicativo de notas baseado em Markdown com uma vasta comunidade de plugins.
1Password 7: Gerenciador de senhas com integração nativa ao sistema.

Conclusão

O Electron.js democratizou o desenvolvimento de aplicações desktop ao permitir que qualquer desenvolvedora ou desenvolvedor web crie software profissional multiplataforma com ferramentas que já conhece. Apesar das críticas sobre tamanho e consumo de recursos, as otimizações modernas e cases de sucesso como VS Code e Slack provam que Electron é uma solência madura e confiável para produção.

Se você é desenvolvedor web e quer expandir seu alcance para o desktop, Electron é o ponto de partida ideal. Comece com uma aplicação simples, explore o sistema de IPC e, quando sentir confiança, contribua com projetos open-source ou crie sua própria ferramenta.

Entrar em contato

Entre em contato