Neutralinojs - Alternativa para o Electron

Se você estiver procurando por uma alternativa para o framework Electron, você acabou de acessar o artigo certo.

Antes de tudo...

Para quem está perdido, primeiramente vamos responder a pergunta o que são os frameworks Electron e Neutralino?

Basicamente o que esses frameworks fazem é buildar aplicações multiplataforma (Linux, Windows e Mac OS) criadas com HTML, CSS e Javascript para aplicações desktop. Então onde queremos chegar é que você consegue criar aplicações desktop sem necessariamente saber desenvolver nas linguagens Delphi, Java ou C# que são linguagens mais específicas para criação de aplicações desktop. Ou seja, com os mesmos conhecimentos que você tem para criar um simples website com neutralino ou electron você consegue facilmente criar um programa desktop em pouco tempo.

Por que escolher Neutralinojs?

Se você usa VS Code, Microsoft Teams ou Figma Desktop como eu sabe muito bem que essa aplicações são lentas, o fato é que esses softwares são desenvolvendo em electron.

Electron é incrível, porém é um devorador de memória e processamento. Diferente do Neutralinojs que em comparação tem um desempenho muito bom.

Clicando neste link você pode ver um comparativo muito bem elaborado (em 2018) do consumo de disco e memoria do Electron e Neutralinojs.

Como usar o Neutralinojs

1. Abra o terminal

Antes de qualquer coisa precisaremos do terminal, então nossa primeira missão é abri-lo.

2. Instalando Neutralinojs

Com seu terminal de comando aberto, digite o cole o comando abaixo:

$ npm i -g @neutralinojs/neu

O que esse comando vai fazer é instalar globalmente o cliente do Neutralinojs.

3. Criando Projeto

Neutralinojs instalado, a próxima etapa é criar nosso projeto, com o comando abaixo:

$ neu create <nome do projeto>

No meu caso vou desenvolver um relógio pomodoro, então estou nomeado o projeto de pomodoro

4. Rodando a aplicação

$ cd <nome-do-projeto> && neu run

O resultado deve ser este:

🚨 ATENÇÃO USUÁRIOS WINDOWS: Se ao rodar programa, caso esteja aparecendo uma tela em branco. Execute o comando seguinte no terminal cmd(como administrador):

CheckNetIsolation.exe LoopbackExempt -a -n="Microsoft.Win32WebViewHost_cw5n1h2txyewy"

🚨 ATENÇÃO USUÁRIOS LINUX: Se ao rodar o programa e você estiver com o erro neutralino-linux_x64 was stopped with error code 127 no terminal, basta colar o seguinte comando no terminal:

sudo apt install \
    libgtk-3-dev \
    libwebkit2gtk-4.0-37 \
    libwebkit2gtk-4.0-dev \
    libayatana-appindicator3-dev

Essa solução é somente para Ubuntu, mas clicando aqui é fácil encontrar solução para o fedora.

5. Primeiros passos

Antes de começar a codar é bom ter uma noção da estrutura de pastas do framework. Se você abrir em seu projeto em um editor de código vai encontrar uma estrutura semelhante a esta:

.
├── .tmp
│    └──  auth_info.json
├── bin
│    ├── neutralino-linux_x64
│    ├── neutralino-mac_x64
│    └── neutralino-win_x64.exe
├── resources
│        ├── icons
│        ├── js
│        ├── index.html
│        └── styles.css
├── LICENSE
├── neutralino.log
└── README.md

5.1 Editando arquivos HTML, CSS e JavaScript

Olhando na estrutura de basta vemos que temos o arquivo index.html é nele que vamos mexer primeiro. Nele vou adicionar a marcação do programa:

Para acessar o código HTML desse projeto clique aqui.

Então agora vamos mexer no styles.css e estilizar nosso relógio pomodoro:

Para acessar o código CSS desse projeto clique aqui.

Precisamos programar o nosso relógio em **js/main.js, nele programei a função de iniciar, pausar e resetar o tempo. Para acessar o código JavaScript desse projeto clique aqui.

5.2 Alterando ícone da aplicação

Vamos agora alterar o ícone, que apesar de não ser nada tão relevante para esse artigo é bem legal de aprender. É só ir em no arquivo neutralino.config.json e procurar pela chave icon e colocar o caminho da imagem ao lado:

"icon": "/resources/icons/medium.png",

E o resultado é esse:

Todo esse código que criei para este projeto pode ser encontrado no repositório @EuCarlos/example-neu-to-devto no github.

6. Buildando aplicação

$ neu build

Com esse comando vai ser criado um arquivo ZIP contendo 3 programas executáveis.

-win_x64.exe: É para ser executado no Windows.
-linux_x64: É para ser executado no linux.
-mac_x64: É para ser executado no Mac OS.

Outras alternativas

Considerações Finais

Aqui aprendemos como criar uma aplicação desktop multiplataforma usando o framework neutralinojs, html, css e javascript. Se houver engajamento para esse artigo posso trazer mais artigos do uso de essa ferramenta muito legal e pouca conhecida. Posso ensinar como usar os templates para usar React, Vue, Angular.js, typescript no Neutralinojs.

Me acompanhe no meu...

Website carlosalves.vercel.app
Gitub: @EuCarlos
Dribbble: @EuCarlos
LinkedIn: linkedin.com/in/josecarlos98

Referencias:

Site oficial
Comparativos Neutralino vs Electron
Setup and build the framework

Blog