Sabe aquele app desktop multiplataforma que você precisa desenvolver e ainda não decidiu que tecnologia utilizar? Pois é, talvez seja o caso de conhecer o Electron.
Electron é uma biblioteca que permite o desenvolvimento de aplicações desktop multiplataforma utilizando JavaScript, HTML e CSS. Os aplicativos criados com Electron podem ser empacotados para Mac, Windows e Linux.
Criado pela equipe do Github, ficou conhecido inicialmente como Atom Shell. O Electron foi criado utilizando tecnologias como o Node.js e o Chromium.
Primeira aplicação
Construir sua primeira aplicação com Electron é uma tarefa bem simples.Você precisa ter o Node.js instalado e adicionar globalmente o pacote electron-prebuilt.
npm install -g electron-prebuilt
Você pode organizar a estrutura de pastas do projeto como desejar. Neste primeiro exemplo serei bem simplista. Crie uma pasta para seu projeto, por exemplo “appdemo”. Dentro desta pasta você precisa criar o arquivo package.json, para isso execute o comando:
npm init
Após configurar seu package.json será necessário criar dois novos arquivos, um HTML e outro JS. Note que o nome do arquivo JS de ser configurado em seu package.json.
Arquivo HTML (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Electron</title>
</head>
<body>
<p>Olá, Electron!</p>
</body>
</html>
Nada de mais neste arquivo. Um HTML simples contendo um título.
Arquivo JS (main.js):
const {app, BrowserWindow} = require('electron');
const url = require('url');
function boot() {
win = new BrowserWindow()
win.loadURL(url.format({
pathname: 'index.html',
slashes: true
}))
}
app.on('ready', boot);
Bem tranquilo por aqui também, as primeiras linhas carregam os módulos necessários. A função boot se encarregará de montar uma janela e carregar um arquivo. A última linha chama a função boot quando o electron estiver pronto.
Com os arquivos criados podemos testar nossa aplicação. Dentro da pasta execute o seguinte comando:
electron .
A aplicação será apresentada:
Fácil hein!
Breve escreverei mais sobre o Electron. Você pode ver toda a documentação disponível também em português.
Até!