Neutralinojs - Alternativa para o Electron
Tags: electron, neutralino, programming, builder
Published: 2022-03-21 23:57:21

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?

![What](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eoefe5hz3lifow4xoxcz.gif)
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](https://github.com/neutralinojs/evaluation) 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`

![Printscreen do terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1yiwcaoe4i8suzqdnsjc.png)

### 4. Rodando a aplicação
```
$ cd <nome-do-projeto> && neu run
```
O resultado deve ser este:

![Resultado](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o097jgijk1v2raucgxgd.png)

🚨 **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](https://neutralino.js.org/docs/contributing/framework-developer-guide/) é 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:

![HTML do Pomodoro](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hvn5yhftx6lwzuwuqkf3.png)
Para acessar o código HTML desse projeto [clique aqui](https://github.com/EuCarlos/neu-to-devto/blob/main/resources/index.html).

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

![CSS do pomodoro](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xz471w4a60ry69p8092z.png)
Para acessar o código CSS desse projeto [clique aqui](https://github.com/EuCarlos/neu-to-devto/blob/main/resources/styles.css).

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](https://github.com/EuCarlos/neu-to-devto/blob/main/resources/js/main.js).

#### 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:
![Icon do programa](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xrwq6vnyxel5e608jnyh.png)
Todo esse código que criei para este projeto pode ser encontrado no repositório [@EuCarlos/example-neu-to-devto](https://github.com/EuCarlos/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.
- **<nome-do-projeto>-win_x64.exe**: É para ser executado no Windows.
- **<nome-do-projeto>-linux_x64**: É para ser executado no linux.
- **<nome-do-projeto>-mac_x64**: É para ser executado no Mac OS.

## Outras alternativas
- [NW.js](https://nwjs.io/)
- [Tauri](https://tauri.studio/)
- [NodeGUI](https://docs.nodegui.org/)

## 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](https://carlosalves.vercel.app)
Gitub: [@EuCarlos ](https://github.com/EuCarlos)
Dribbble: [@EuCarlos](https://dribbble.com/eucarlos)
LinkedIn: [linkedin.com/in/josecarlos98](https://www.linkedin.com/in/josecarlos98)

## Referencias:
[Site oficial](https://neutralino.js.org/)
[Comparativos Neutralino vs Electron](https://github.com/neutralinojs/evaluation)
[Setup and build the framework](https://neutralino.js.org/docs/contributing/framework-developer-guide/)