Executando verificação de segurança...
6

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

Carregando publicação patrocinada...
1

Tenho um projeto que utiliza o Electron, YTMDesktop, nunca me depepcionou e sempre me permitiu uma grande liberdade de implementações (até de mais kkkk).

Mas de fato, ele pesa um pouco e utiliza bastante RAM se o projeto crescer... mas para pequenas aplicações é ótimo.

Muitos apps, que o pessoal nem imagina, são feitos utilizando o Electron:
https://www.electronjs.org/apps

1
1

Lembrando que algumas coisas não são recomendadas hoje por motivos de segurança. Na documentação tem alguns exemplos e uma checklist recomendada a ser seguida. Portanto, para uma melhor comunicação entre o Renderer e o Main, existe o script Preload.

Particularmente, acho bem trabalhoso lidar com o Electron e já tive alguns problemas que me deixaram batendo a cabeça. Fico surpreso com a qualidade dos aplicativos que utilizam ele, como o VSCode, Notion e Discord.

1
1

vc precisa dizer o motivo pelo qual não deveria usar o electron e outra qual a "melhoria" que esse tauri tem que o electron não tem, pq até onde sei o electron é 1000x mais famoso e usado por plataformas bem conhecidas.

1

Varios motivos:

  1. é muito mais rapido, uma aplicação cerca de 80% mais rapido que o electron
  2. O app fica muito mais leve, cerca de 100mb, enquanto o electron ocupa 300mb
  3. Uso de CPU e Ram é muito mais baixo
  4. Você pode usar qualquer framework js que quiser
  5. O backend é em rust e você consegue chamar os comandos pelo javascript
  6. Todo mundo odeia o electron.
  7. Não usa o chromium