O Electron é um framework de código aberto criado por Cheng Zhag – e agora desenvolvido pelo GitHub – que nos permite desenvolver aplicações para desktop usando tecnologias de front-end e back-end, tais como: HTML, CSS, JavaScript, Node.js e Chromium.
O Electron é o principal framework por trás de vários projetos famosos de código aberto, incluindo o editor de texto Atom e o Visual Studio Code (aliás, se quiser aprender uns truques bacanas do editor, dê uma olhada neste link), por exemplo.
Para começarmos a trabalhar com ele, primeiro precisamos instalar a ferramenta de forma global em nossas máquinas, utilizado o bom e velho npm (gerenciador de pacotes do Node). No entanto, nem sempre queremos ter que começar um projeto novo somente para validar algumas hipóteses e fazer testes.
É aí que ferramentas como o JSFiddle, CodePen e afins brilham: elas oferecem todo o ambiente necessário para trabalhar sem a necessidade de instalar, configurar ou começar um novo projeto.
Para ter essa mesma conveniência com o Electron, podemos utilizar o Electron Fiddle.
Utilizando o Electron Fiddle
O Electron Fiddle é um projeto open source – sob licença MIT e com mais de 2.900 estrelas no GitHub – que promete facilitar os testes e codificação de elementos em Electron em uma plataforma fácil, leve e intuitiva. A plataforma é inteiramente baseada em outras plataformas do tipo já citadas, como o CodePen, JSFiddle, Glitch e tantas outras.
O Electron Fiddle nos permite criar, compartilhar e brincar com pequenos experimentos feitos em Electron. Ele vem com um template de início rápido (quick-start template) logo após carregar, o que ajuda os iniciantes a começarem a testar e os veteranos a irem direto ao ponto.
O primeiro passo para utilizar a plataforma é instalar ela no seu computador. Como a plataforma é construída utilizando o próprio framework, ela é multiplataforma, o que significa que podemos utilizá-la em distribuições Linux, no Windows e também no macOS. Você pode fazer o download a partir deste link.
Depois de instalar, você já poderá utilizar a plataforma. Ela tem a seguinte interface:
Assim como nas outras plataformas de Fiddle, a janela é dividida em várias partes. Logo no topo temos o log da aplicação que nos dá vários detalhes sobre a execução em tempo real. Logo abaixo, temos a aba Main Process. É nesta barra que descreveremos o código JavaScript que rodará a nossa aplicação. Essa aba funciona em conjunto com as duas outras ao lado, a de Renderer Process e HTML. Estes dois trechos cuidarão da parte visual da nossa aplicação.
Agora que já demos uma olhada na interface do programa, vamos destacar algumas funcionalidades relevantes.
Inteligência do editor
A plataforma do Electron Fiddle está integrada com o editor Monaco, da Microsoft, o mesmo suportado pelo editor Visual Studio Code.
Além disso, a própria plataforma se encarrega de baixar as definições dos tipos da última versão da Electron API, garantindo sempre que tenhamos acesso ao autocomplete e funções semelhantes da versão mais atual.
Compilação e empacotamento
O Electron Fiddle pode transformar nossos experimentos automaticamente em binários. Isso nos permite compartilhar os experimentos com amigos, colegas de trabalho ou familiares.
Ele é capaz disso graças ao electron-forge, nos permitindo empacotar nosso código como um aplicativo para Windows, macOS ou Linux.
Comece com o Fiddle, continue onde quiser
É importante ressaltar que esta ferramenta não é uma IDE. Isso significa que não podemos desenvolver grandes projetos nele. No entanto, a plataforma facilita de forma muito inteligente essa transição para nós.
E aí, o que achou da ferramenta? Já utiliza o Electron em seus projetos? Seja você novato (como eu!) ou veterano, o Electron Fiddle sem dúvidas será uma grande mão na roda na hora de fazer experimentos.
Referências
De 0 a 10, o quanto você recomendaria este artigo para um amigo?