JavaScript se destaca como uma das linguagens de programação mais prevalentes. Sua versatilidade, permitindo o desenvolvimento tanto de back-end quanto de front-end, a consolidou como uma favorita entre muitos desenvolvedores.
O ecossistema JavaScript é vasto, com inúmeras bibliotecas e frameworks que amplificam suas capacidades além do JavaScript puro e simples.
Electron.js surge como um framework poderoso de código aberto, capacitando desenvolvedores web a criar aplicações nativas com seus conhecimentos existentes. Este artigo detalha o Electron.js e como você pode utilizá-lo para dar vida à sua próxima ideia inovadora.
Electron JS: Uma Visão Geral
Electron JS é um framework que permite aos desenvolvedores construir aplicações para desktop usando HTML, CSS e JavaScript. Criado e mantido pelo GitHub, o Electron JS é uma ferramenta valiosa no arsenal de um desenvolvedor.
Este framework combina as funcionalidades do Node.JS e do Chromium, permitindo que desenvolvedores mantenham uma única base de código JavaScript e produzam aplicações de desktop multiplataforma, compatíveis com Windows, macOS e Linux.
A jornada do Electron.js começou em janeiro de 2013, com a visão original de um editor de texto multiplataforma que pudesse operar com JavaScript, HTML e CSS.
Inicialmente denominado Atom Shell, o projeto se tornou open source em 2014. Em abril de 2015, foi renomeado para Electron e sua primeira API foi lançada em 2016.
Recursos Notáveis do Electron JS
- Compatibilidade Ampla: O Electron JS é compatível com todas as bibliotecas e frameworks JavaScript. Vue.js, Angular e React.js são apenas alguns exemplos de frameworks que podem ser utilizados em conjunto com o Electron JS. Essa compatibilidade facilita a incorporação de recursos dessas bibliotecas e frameworks em aplicações Electron.
- Reutilização de Código: O Electron JS oferece a vantagem da reutilização de código, o que pode reduzir custos. Ele pode ser usado tanto para aplicações web quanto para desktop. A base de código única também se traduz em compatibilidade com diversos sistemas operacionais.
- Acesso a APIs Nativas: Desenvolvedores que trabalham com Electron JS têm acesso às APIs nativas dos sistemas operacionais, permitindo que criem aplicações de desktop com funcionalidades de baixo nível, como notificações.
- Tecnologia Web Familiar: O Electron JS é adaptável, pois dispensa a necessidade de aprender uma nova linguagem de programação para desenvolver aplicações. Se você já tem familiaridade com as tecnologias web, pode usá-las para criar aplicativos de desktop.
- Gestão Centralizada de Código e Aplicação: Com o Electron JS, não há necessidade de manter equipes separadas para cada sistema operacional. Ele permite manter a mesma base de código para Linux, Windows e Mac.
- Construção e Implantação Simplificadas: O gerenciador de pacotes do Electron simplifica o processo de empacotamento. Isso permite lançar aplicações para Linux, Mac e Windows a partir da mesma base de código.
Arquitetura do Electron JS
A arquitetura do Electron assemelha-se à de um navegador web moderno, com uma arquitetura multiprocesso herdada do Chromium.
Essa arquitetura é composta pelo V8 JavaScript Engine, Node.JS e Libchromiumcontent.
- Node.JS: Um ambiente de execução JavaScript de código aberto que opera no motor V8. Ele permite que o JavaScript seja executado fora da janela do navegador, além de executar código JavaScript bruto através de seu shell interativo.
- Libchromiumcontent: Uma biblioteca de renderização do Chromium, de código aberto e mantida pelo Google Chrome. O Chrome utiliza uma interface de usuário minimalista e emprega o Blink como motor de layout e o V8 como motor JavaScript.
- V8 JavaScript Engine: Um motor JavaScript de código aberto, desenvolvido pelo Google, escrito em C++ e JavaScript.
#1. Node.js
Para começar a usar o Electron JS, é preciso ter o Node.js instalado em seu sistema.
Selecione a versão correta do Node, considerando o sistema operacional em uso.
Verifique se a instalação foi bem-sucedida executando os seguintes comandos:
node -v
npm -v
Se instalado corretamente, esses comandos exibirão as versões do node e npm, respectivamente.
#2. Linha de Comando
O método para acessar a linha de comando varia de acordo com o sistema operacional.
- Linux: Dependerá da distribuição.
- Windows: PowerShell ou Prompt de Comando.
- macOS: Terminal.
Alguns editores de código, como o Visual Studio Code, incluem um terminal integrado.
#3. Editor de Código
É necessário um editor de código para escrever o código Electron JS. O Visual Studio Code é uma ótima opção.
Como Instalar o Electron JS
Passo 1: Crie um projeto Node.js.
Utilize os comandos a seguir para começar:
mkdir my-electron-app && cd my-electron-app
npm init
O comando `npm init` solicitará que você preencha campos como nome do aplicativo, ponto de entrada e descrição.
Você pode usar o nome padrão da pasta como nome do aplicativo, mas lembre-se de definir o ponto de entrada do aplicativo como `main.js`.
Campos como autor e descrição são opcionais. O arquivo `package.json` terá uma estrutura semelhante a esta ao concluir esses passos:
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Olá Mundo!",
"main": "main.js",
"author": "Seu Nome",
"license": "MIT"
}
Passo 2: Instale o Electron
Use este comando:
npm install --save-dev electron
Passo 3: Adicione o comando ‘start’ ao seu `package.json`
{
"scripts": {
"start": "electron ."
}
}
Passo 4: Inicie seu Aplicativo
Use este comando para iniciar seu aplicativo em modo de desenvolvimento:
npm start
Processo de Trabalho do Electron JS
Vamos continuar construindo o aplicativo com base na configuração acima. Uma aplicação Electron possui dois tipos de processos: principal e renderizador.
O Processo Principal
O script principal é o ponto de entrada de qualquer aplicação Electron, executado em um ambiente Node.js completo. O Electron busca o script principal no arquivo `package.json` configurado durante a criação do projeto.
Crie o arquivo `main.js` na pasta raiz para inicializar o script principal. Isso pode ser feito manualmente ou com este comando:
touch main.js
Adicione o seguinte código ao arquivo `main.js`:
const { app, BrowserWindow } = require('electron');
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
});
win.loadFile('index.html');
};
app.whenReady().then(() => {
createWindow();
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
As páginas web no Electron podem ser carregadas de um endereço web remoto ou de um arquivo HTML local. Utilizaremos um arquivo HTML local para fins de demonstração.
Crie um arquivo `index.html` na sua pasta raiz. O código inicial é fornecido a seguir, mas você pode personalizar:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'"
/>
<meta
http-equiv="X-Content-Security-Policy"
content="default-src 'self'; script-src 'self'"
/>
<title>Olá do Renderizador Electron!</title>
</head>
<body>
<h1>Olá do Renderizador Electron!</h1>
<p>👋</p>
<p id="info"></p>
</body>
<script src="./renderer.js"></script>
</html>
O Processo de Renderização
O processo de renderização é responsável por exibir o conteúdo web. Scripts de pré-carregamento executam código nesse processo antes que o conteúdo web comece a ser carregado.
Crie um arquivo `preload.js` na sua pasta raiz e adicione este código:
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {
replaceText(`${type}-version`, process.versions[type])
}
})
Inicie o servidor de desenvolvimento usando `npm start`, e a aplicação será exibida.
Exemplos de Aplicações: Electron JS
#1. Aplicação Slack para Desktop
Slack é uma ferramenta de colaboração remota muito popular. Os usuários podem enviar e receber mensagens, fazer chamadas e compartilhar arquivos. O Slack possui aplicações web e de desktop para Mac, Linux e Windows. A aplicação de desktop do Slack utiliza o mecanismo Chromium e Node.js para renderizar código de alta qualidade.
#2. Aplicação WordPress para Desktop
WordPress é o maior sistema de gerenciamento de conteúdo. A facilidade com que se pode lançar um site, mesmo sem habilidades de programação, atraiu muitos usuários. O WordPress pode ser acessado através do navegador e de aplicações de desktop para Mac, Linux e Windows. A aplicação de desktop do WordPress utiliza o Electron JS.
#3. Aplicação WhatsApp para Desktop
WhatsApp é um dos aplicativos de mensagens mais populares, usado por mais de 2 bilhões de pessoas. Projetado originalmente como um aplicativo móvel, o WhatsApp se tornou uma plataforma entre dispositivos. A aplicação de desktop utiliza o Electron JS e está disponível para os principais sistemas operacionais.
#4. Visual Studio Code
O Visual Studio Code, da Microsoft, é um dos editores de código mais populares. Ele oferece suporte a HTML, CSS e código escrito em várias linguagens de programação. A aplicação de desktop, construída com Electron JS, está disponível para Windows, Mac e Linux.
Recursos de Aprendizado: Electron JS
#1. Documentação Oficial Electronjs
A documentação do Electronjs é criada e mantida por Electronjs.org. Nela, você aprenderá sobre o Electron JS, como configurar sua primeira aplicação e como criar aplicações de desktop multiplataforma. A documentação é constantemente atualizada com novas funcionalidades e melhorias.
#2. Master Electron: Aplicações de Desktop com HTML, JavaScript e CSS
Master Electron é um curso pago na Udemy que apresenta o Electron JS. Você aprenderá como criar aplicações para desktop para diferentes sistemas operacionais. É um recurso ideal para entender todo o processo da API do Electron.
#3. Tutorial Electron React
Electron React é um curso pago na Udemy que ensina como criar aplicações Electron utilizando React.js, uma das bibliotecas JavaScript mais populares, criada pela Meta (anteriormente Facebook).
Conclusão
O Electron JS é uma biblioteca JavaScript poderosa para criar aplicações de desktop, essencial no mundo moderno, onde aplicações multiplataforma são cada vez mais necessárias. A possibilidade de utilizar HTML, CSS e JavaScript dispensa a necessidade de aprender novas tecnologias. A presença de uma comunidade grande e ativa garante suporte contínuo.
Você também pode explorar outros frameworks JavaScript excelentes para criar aplicações modernas de forma eficiente.