Antes do projeto Electron, o desenvolvimento de aplicativos de desktop para várias plataformas não era particularmente fácil, porque os desenvolvedores frequentemente tinham que manter bases de código separadas para cada sistema operacional. Embora houvesse algumas APIs genéricas para construir aplicativos de plataforma cruzada, criar elementos de GUI personalizados era difícil.

A Electron introduziu uma nova maneira de desenvolver aplicativos de plataforma cruzada para desktop com uma base de código e tecnologias da web (HTML, JavaScript e CSS). Os desenvolvedores podem construir GUIs altamente flexíveis e amigáveis ​​ao usuário com seus frameworks front-end favoritos. Além disso, eles podem fazer controles GUI personalizados facilmente com HTML e CSS. Além disso, Electron tem uma API completa para operações de sistema nativo.

No entanto, os aplicativos Electron consomem recursos acima da média nos computadores dos usuários, o que significa que muitos desenvolvedores estão procurando alternativas leves do Electron. Neste artigo, discutirei duas alternativas ao Electron: Tauri e Neutralinojs. Também mostrarei como instalar e usar essas estruturas.

O que é elétron?

Electron (anteriormente conhecido como Atom Shell) é uma estrutura de desenvolvimento de aplicativo de plataforma cruzada criada pelo GitHub. Electron integrou o projeto Chromium e Node.js em um pacote e expôs uma API JavaScript genérica para recursos nativos, como exibição de caixas de diálogo, envio de notificações e criação de ícones de notificação e bandeja.

Os desenvolvedores podem criar a GUI do aplicativo com sua estrutura de front-end preferida e kit de ferramentas de IU da web. Por exemplo, podemos usar React e Material UI para construir o front-end do aplicativo. Recursos nativos, como manuseio de arquivos, podem ser feitos com a ajuda do Node.js. Conforme mencionado, podemos usar a API JavaScript do Electron para lidar com os recursos necessários do sistema operacional.

Se precisarmos mostrar uma caixa de mensagem, podemos usar o método dialog.showMessageBox da API Electron. Não precisamos nos preocupar com o código específico da plataforma porque Electron tem implementações de caixa de diálogo para Linux, macOS e Windows.

Vantagens do elétron

Hoje em dia, a maioria dos desenvolvedores faz seus aplicativos de plataforma cruzada com Electron por causa das seguintes vantagens impressionantes:

Base de código única

O Electron fornece uma abstração flexível para recursos nativos do sistema operacional. Portanto, os desenvolvedores podem manter uma única base de código para seu aplicativo de plataforma cruzada que será executado nas plataformas mais populares.

Entrega rápida de recursos

Criar interfaces de usuário com HTML e CSS no Electron é moleza; essas tecnologias da web oferecem a liberdade de criar qualquer elemento GUI personalizado. Além disso, o Node.js tem um grande ecossistema de bibliotecas para que você possa adicionar recursos semelhantes aos nativos muito rapidamente.

Estrutura amadurecida

O Electron foi lançado inicialmente há cerca de oito anos, por isso tem uma forte base de usuários e comunidade. Existem recursos integrados benéficos, como atualizações automáticas, também. Empresas respeitáveis ​​como a Microsoft escolhem a Electron para construir seus aplicativos de plataforma cruzada. Por exemplo, Visual Studio Code, Teams e Skype foram desenvolvidos com base no Electron.

Problemas ocultos no elétron

Embora impressionante no geral, a estrutura do Electron tem vários problemas críticos de desempenho.

O Electron agrupa o Chromium e o Node.js no pacote final do aplicativo; portanto, mesmo se você estiver escrevendo um aplicativo simples e leve escolhendo cuidadosamente bibliotecas e estruturas de front-end, seu aplicativo ficará inchado.

Chromium e Node.js são projetos complexos e esses módulos irão consumir recursos acima da média em seu computador. Em outras palavras, os aplicativos desenvolvidos com o Electron ocuparão toneladas de memória física e espaço em disco.

Além disso, os aplicativos Electron esgotam a bateria do seu laptop rapidamente devido ao alto consumo de recursos. Os aplicativos de plataforma cruzada feitos com Electron muitas vezes se tornam bloatware devido aos problemas críticos de desempenho do Electron mencionados acima.

Hardware poderoso pode esconder essa desvantagem do usuário comum. No entanto, quando os usuários começam a executar vários aplicativos Electron, é fácil sentir esse problema oculto de desempenho.

Alternativas para o elétron

Há algum tempo, várias alternativas, como Electrino e O DeskGap chegou como solução para os problemas de desempenho do Electron. Ambos os projetos tentaram reduzir o tamanho do pacote final usando o webview do sistema operacional em vez do Chromium. Infelizmente, esses dois projetos não puderam ser concluídos com a estrutura do Electron amadurecida.

No entanto, existem duas alternativas leves de tendência para Electron: Tauri e Neutralinojs . Ambos os projetos tentam resolver o problema de desempenho do Electron substituindo o Chromium e o Node por alternativas mais leves e melhores.

Ambos os projetos usam a conhecida biblioteca webview para renderizar HTML e CSS em vez de Chromium. A biblioteca webview usa o componente de navegador da web existente para renderização. Por exemplo, ele usará gtk-webkit2 em plataformas baseadas em Linux, Cocoa Webkit no macOS e Edge/MSHTML no Windows.

O que é Tauri?

Tauri é uma estrutura leve de desenvolvimento de aplicativos de desktop multiplataforma escrita em Rust. Os desenvolvedores podem fazer o front-end de um aplicativo Tauri usando sua estrutura de front-end preferida.

Podemos usar a API JavaScript do Tauri para recursos da plataforma nativa, como manuseio de arquivos e exibição de caixas de diálogo. Outra coisa excelente sobre Tauri é que podemos implementar nossa própria API nativa em Rust e expô-la ao webview como uma API JavaScript.

Vamos escrever um aplicativo multiplataforma simples com Tauri.

Instalação

Os aplicativos Tauri podem ser construídos em qualquer plataforma popular. Nesta demonstração, eu construí no Linux.

Primeiro, precisamos instalar as bibliotecas necessárias digitando o seguinte comando no Terminal:

 $ sudo apt update && sudo apt install libwebkit2gtk-4.0-dev \ construir essencial \ ondulação \ wget \ libssl-dev \ appmenu-gtk3-module \ libgtk-3-dev \ ferramentas de squashfs

Depois disso, precisamos instalar o compilador Rust e o gerenciador de pacotes Cargo:

 $ curl--proto'=https'--tlsv1.2-sSf https://sh.rustup.rs | sh

Finalmente, precisamos instalar o Tauri CLI (certifique-se de que você já possui o Node.js e um gerenciador de pacotes):

 $ npm install-g tauri

Desenvolvimento

Um novo aplicativo Tauri pode ser criado digitando os seguintes comandos:

 $ mkdir tauri-app && cd tauri-app
$ tauri criar

Depois de inserir o comando tauri create , a CLI fará um conjunto de perguntas para configurar o aplicativo. Neste exemplo, os valores padrão foram usados. O nome do aplicativo é tauri-app .

O diretório tauri-app/src-tauri consiste no código de back-end de seu aplicativo. Você pode colocar seu código de front-end no diretório tauri-app/dist . Por enquanto, criei tauri-app/dist/index.html e inseri o seguinte HTML:

 
 Olá Tauri! 

Podemos iniciar nosso aplicativo simplesmente inserindo tauri dev . Como não estou usando um servidor de desenvolvimento, tive que definir devPath para o diretório ../dist no arquivo tauri.conf.json .

Lançamento de um aplicativo Tauri

Tauri permite criar um único binário de seu aplicativo para cada plataforma. Isso pode ser feito simplesmente inserindo o comando tauri build . Mas, se você precisa fazer binários para o Linux, precisa executar este comando em um computador Linux.

O que é Neutralinojs?

Neutralinojs é uma estrutura leve de desenvolvimento de aplicativos de desktop multiplataforma escrita em C/C ++. Semelhante ao Tauri, Neutralino motiva os desenvolvedores a usar qualquer estrutura de front-end para construir a GUI do aplicativo. Ele também oferece uma API JavaScript para operações nativas semelhantes ao Electron.

Vamos escrever um aplicativo simples de plataforma cruzada com Neutralino.

Instalação

O Neutralino não requer nenhuma biblioteca adicional para o desenvolvimento de aplicativos. Tudo que você precisa fazer é instalar seu CLI em qualquer sistema operacional:

 $ npm install-g @ neutralinojs/neu

Desenvolvimento

Um novo aplicativo Neutralino pode ser criado usando o seguinte comando:

 $ neu criar neutralino-app

O comando acima criará um novo projeto baixando o modelo JavaScript pré-construído. Ele também fará o download dos binários Neutralinojs pré-construídos mais recentes para cada sistema operacional. A visualização principal ( app/index.html ) deste aplicativo de exemplo tem o seguinte conteúdo:

 
 Olá, Neutralinojs! 

O aplicativo pode ser iniciado simplesmente inserindo o comando neu run .

Lançando um aplicativo Neutralinojs

Podemos liberar nosso aplicativo para terceiros inserindo o comando neu build . O comando fará binários dentro do diretório dist .

O Neutralino não oferece suporte à criação de binário único como o Tauri. Ele sempre criará um único arquivo de recurso junto com o binário específico da plataforma.

Comparação

O mesmo aplicativo utilizou os seguintes recursos em Electron, Tauri e Neutralinojs. As medições são feitas na plataforma Linux:

Conclusão

Electron, Tauri e Neutralinojs renderizarão um aplicativo inteiro dentro de um navegador da web. No entanto, o processo de renderização de um navegador da web é complexo. Existem várias etapas antes do processo de desenho de elementos de GUI baseados na web.

Primeiro, o conteúdo HTML e CSS será analisado. Depois disso, o navegador fará a árvore DOM com os resultados analisados. Finalmente, o navegador da web desenhará a árvore de renderização que é feita combinando regras de estilo e a árvore DOM.

Portanto, esses frameworks não são adequados para aplicativos muito grandes. Em tais situações, tornar-se nativo ou usar uma estrutura verdadeiramente nativa, como Flutter, pode ser uma escolha inteligente.

De acordo com a comparação acima, Tauri e Electronjs têm melhor desempenho do que Electron. Os aplicativos Electron consomem muito espaço em disco porque cada aplicativo vem com Chromium e Node. Por outro lado, Tauri e Electronjs têm tamanhos de pacotes surpreendentemente leves porque essas estruturas estão reutilizando a biblioteca do navegador da web do sistema operacional do usuário.

O Electron permite que você envie um aplicativo de desktop confortavelmente, mas criará problemas críticos de desempenho que causarão frustração aos usuários. Portanto, é hora de procurar uma alternativa.

A postagem Por que você deve usar uma alternativa Electron apareceu primeiro em LogRocket Blog .

Source link