Desenvolvimento multiplataforma com Electron

Em mais uma edição do SoftDrops, Victor Silva aproveitou o espaço para compartilhar com os colegas detalhes sobre a sua experiência utilizando o Electron. Anteriormente, o trainee já havia realizado uma edição sobre componentes web – acreditamos que essas trocas de conhecimento são muito importantes para que todos possam  buscar as melhores soluções para o desenvolvimento de produtos digitais.

Na apresentação, Victor destacou que o Electron é um framework pensado para realizar aplicações desktop multiplataforma. Ele utiliza tecnologias web como HTML e CSS, além de outros frameworks reativos como o Angular ou o React.

Um breve histórico do Electron

De acordo com Victor esse framework foi criado por Cheng Zhao, engenheiro da GitHub, em 2011.  Inicialmente, ele foi chamado de node-kit e eraum repositório privado; posteriormente ele cresceu e passou a ser gerenciado pela Open JS Foundation.

Atualmente, o Electron está na sua décima versão e é compatível com Linux, MacOS e Windows. Além disso, diversas plataformas são desenvolvidas com o framework, como por exemplo, o Microsoft Teams e o Facebook Messenger. Veja a seguir outros aplicativos que também o utilizam:

Composição e processos do framework

O Electron é composto por duas ferramentas principais. A combinação delas é o que permite que ele funcione em multiplataforma. A primeira  é o Node.js, que é utilizado para acessar os recursos nativos do sistema operacional. Esse acesso ocorre por meio de APIs que interagem com a máquina. Já a segunda é o Chromium Embedded Framework (CEF), que possibilita que o browser seja incorporado dentro da aplicação de forma leve.

Ainda durante a sua apresentação, Victor salientou que é importante ter em mente que esse framework utiliza dois processos distintos. São eles que permitem que o front-end se comunique com o hardware. São eles:

– Main process: é o responsável pela comunicação da aplicação com os recursos do sistema operacional. Ele também está ligado com os eventos de ciclo de vida – como destruir uma página, por exemplo.

– Render process: esse processo é o que possibilita o carregamento das páginas web. Por exemplo, é ele que busca o HTML criado e o mostra na tela.

Para a compreensão dos participantes, o desenvolvedor comparou  esses processos com uma aplicação do Chrome com várias abas abertas. Cada uma das abas seria o render e o navegador seria a aplicação principal.

Particularidades do Electron

Victor ressaltou que não é recomendado gerenciar os recursos do sistema operacional diretamente das páginas web, pois não há garantias de que ele irá manter um funcionamento apropriado. Sendo assim, é necessário utilizar a comunicação entre processos para informar o main process de que necessitamos de algum recurso do sistema operacional para que ele busque essas informações e as envie para o render process. Isso acontece da seguinte maneira:

Para encerrar a sua apresentação, o trainee comentou sobre alguns detalhes em relação aos testes e debug. É possível utilizar grande parte das ferramentas disponíveis para testes de desenvolvimento web. Porém, para certos tipos de testes, é  necessário utilizar uma ferramenta chamada Spectron, que tem como objetivo certificar que a aplicação Electron esteja rodando antes que os testes dos componentes web sejam iniciados.