Iniciando em Electron JS
A uns anos atrás escrevi a respeito do meu primeiro contato com o framework Electron JS. Agora estou aqui repostando esse conteúdo.
Iniciando
Electron JS é um framework atualmente desenvolvido pelo GitHub, que permite o desenvolvimento de aplicações nativas para Desktop, com a utilização de Javascript, HTML e CSS. Para permitir a utilização de tecnologias Web o Electron utiliza o navegador Chromium para rodar suas aplicações.
Aplicações desenvolvidas em Electron:
- Discord: Aplicativo de bate-papo multiplataforma projetado para gamers.
- VSCode: Editor de textos da Microsoft.
- Atom : Editor de textos do GitHub.
Antes de eu demonstrar um exemplo básico de uma aplicação em Electron JS, explicarei alguns conceitos e módulos básicos. Lembrando que é apenas uma introdução e mostrarei o que julgo notável de início.
Processo Principal
Toda aplicação em Electron possui sempre um(apenas um) processo principal, ele seria o script main referenciado no package.json.
Processo de Renderização
Cada página web na sua aplicação Electron executa um processo próprio, denominado processo de renderização.
BrowserWindow
Objeto que cria, controla e customiza uma página web na sua aplicação Electron.
Algumas propriedades
- Frame : Caso true, remove o frame padrão do Sistema Operacional para aplicações.
- Fullscreen : Caso true, abre sua página em fullscreen.
webContents
Propriedade do BrowserWindow que emite um evento para sua página.
ipcMain
Módulo do Electron que lida com mensagens assíncronas e síncronas enviadas de um processo de renderização.
É utilizado também para enviar mensagem do processo principal para processos de renderização.
ipcRenderer
Exerce a função contrário do ipcMain, lidando com mensagens enviadas do processo principal.
É utilizado para enviar mensagens do processo de renderização para o principal.
Lembrando que, processos de renderização não podem se comunicar entre si, mas conseguem se comunicar com o processo principal.
Abaixo um exemplo de como a comunicação entre processo pode ocorrer.
remote
Facilita a comunicação entre o processo principal e o processo de renderização ao permitir que módulos do processo principal sejam chamados dentro do processo de renderização.
Iniciando no framework
Para começar a trabalhar com o Electron você pode ir diretamente na página do framework e instalá-lo via NPM, mas para este artigo disponibilizei um repositório no GitHub.
Baixando o repositório
A intenção deste artigo é mostrar o Electron JS em ação, para acompanhar essa explicação, é recomendado baixar o repositório GitHub que criei com os códigos que iremos conferir a seguir. Após o download, para rodar o código instale os módulos do node.
Estrutura de pastas do repositório
Electron-App-Base/
|____css/
| |_____style.css
|____js/
| |_____ipc.js
| |_____menu-btn.css
|_node_modules/
|_hiddenRenderer.html
|_index.html
|_main.js
|_package.json
Vamos a prática
Irei mostrar como criar duas páginas, a primeira página rodando em uma janela sem frame, contendo a clássica frase "Hello World" e textos que servirão de botões e controlarão a janela.
Já a segunda página estará rodando em segundo planto e enviará uma mensagem para o renderer principal que posteriormente a repassará para a primeira página, disparando um alert() e mostrando a mensagem.
Criando a primeira página
main.js
const { app, BrowserWindow, ipcMain } = require('electron')
app.on('ready', createWindows);
app.on('window-all-closed', () =>{
if(process.platform !== 'darwin'){
app.quit();
}
});
No main.js atribuímos como parâmetro para o método on do objeto app a variável createWindows, ela é a função que irá criar nossas páginas.
function createWindows()
Na função createWindows é criado uma página web frameless com tamanho 1000x600.
index.html
Arquivo HTML da primeira página. Note a presença de 3 tags preenchidos com ações comumente realizadas por aplicativos nativos desktop, eles serão "botões" que irão substituir o frame padrão do Sistema Operacional.
menu-btns.html
Com a utilização do módulo remote posso atribuir eventos em tags HTML para que executem métodos do processo principal.
Nesse caso, com a ajuda do remote eu atribuo eventos as tags para que elas exerçam as funções de minimizar, maximizar e fechar a aplicação.
Como ficou a primeira página?
Criando a segunda página em segundo plano
Dentro da função createWindows no arquivo main.js, adicionamos o seguinte script.
Este script cria uma página web ou "processo de renderização" rodando em segundo plano, com a propriedade show podemos permitir que uma janela não apareça para o usuário, mas que continue rodando seus scripts.
hiddenRenderer.html
Arquivo HTML da segunda página, que roda em segundo plano. Contém um script que utiliza o módulo ipcRenderer, que transmite uma mensagem para o ipcMain do processo principal.
Como o ipcMain recebe a mensagem transmitida da segunda página?
Dentro da função createWindows no arquivo main.js, adicionamos o seguinte script para que a mensagem transmitida pela segunda página seja ouvida pelo processo principal.
function sendMessage()
Dentro do arquivo main.js criamos a função sendMessage, que irá transmitir nossa mensagem recebida da segunda página para a primeira página.
Para a função sendMessage transmitir a mensagem do ipcMain para o ipcRenderer, é necessário o uso do método send() da propriedade webContents do módulo BrowserWindow.
Como o ipcRenderer da primera página recebe a mensagem transmitida do ipcMain?
ipc.js
Com este script nós podemos "ouvir" quando o evento "message-from-worker" carregando a mensagem transmitida chegar do processo principal.
Resultado
Como resultado temos que nossa primeira página recebe uma string vinda da página rodando em segundo plano e a mostra em tela com um alert().
Repositório GitHub
https://github.com/luishjacinto/Electron-App-Base
Conclusão
Neste artigo você aprendeu o básico sobre os conceitos e os principais módulos do framework Electron JS, como controlar suas páginas e como funciona a comunicação entre os processos.
Referências:
https://www.electronjs.org/docs
https://medium.com/swlh/how-to-run-background-worker-processes-in-an-electron-app-e0dc310a93cc