Saiba por que o projeto Excalidraw decidiu descontinuar o wrapper Electron em favor da versão da Web.
No projeto Excalidraw, decidimos descontinuar o Excalidraw Desktop, um wrapper Electron do Excalidraw, em favor da versão da Web que você pode e sempre pode encontrar em excalidraw.com. Após uma análise cuidadosa, decidimos que o Progressive Web App (PWA) é o futuro que queremos criar. Continue lendo para saber o motivo.
Como o Excalidraw Desktop surgiu
Logo depois de @vjeux criar a versão inicial do Excalidraw em janeiro de 2020 e fazer um blog sobre isso, ele propôs o seguinte no Problema no 561:
Seria ótimo incluir o Excalidraw no Electron (ou equivalente) e publicá-lo como um aplicativo [específico da plataforma] nas várias app stores.
A reação imediata de @voluntadpear foi sugerir o seguinte:
Que tal transformá-lo em um PWA? Atualmente, o Android oferece suporte à adição delas à Play Store como Atividades confiáveis na Web, e esperamos que o iOS faça o mesmo em breve. No computador, o Chrome permite fazer o download de um atalho na área de trabalho para um PWA.
A decisão que @vjeux tomou no final foi simples:
Devemos fazer as duas coisas :)
Embora o trabalho de conversão da versão do Excalidraw em um PWA tenha sido iniciado por @voluntadpear e mais tarde, a @lipis avançou de maneira independente e criou um repositório separado para o Excalidraw Desktop.
Até hoje, a meta inicial definida por @vjeux, ou seja, enviar o Excalidraw para as várias app stores, ainda não foi alcançada. Honestamente, ninguém sequer iniciou o processo de envio para nenhuma das lojas. Mas por que isso acontece? Antes de responder, vamos analisar a Electron, a plataforma.
O que é o elétron?
A vantagem exclusiva da Electron é que ela permite "criar apps para computador em várias plataformas com JavaScript, HTML e CSS". Os apps criados com o Electron são "compatíveis com Mac, Windows e Linux", ou seja, "apps Electron são criados e executados em três plataformas". De acordo com a página inicial, as partes difíceis que o Electron facilita são atualizações automáticas, menus e notificações no nível do sistema, relatórios de erros, depuração e criação de perfis e instalados do Windows. Acontece que alguns dos recursos prometidos precisam de uma visão detalhada das letras miúdas.
Por exemplo, as atualizações automáticas "são [atualmente] [compatíveis] apenas no macOS e no Windows. Não há suporte integrado para a atualização automática no Linux. Por isso, é recomendável usar o gerenciador de pacotes da distribuição para atualizar o app".
Os desenvolvedores podem criar menus no nível do sistema chamando
Menu.setApplicationMenu(menu). No Windows e no Linux, o menu será definido como o menu superior de cada janela. No macOS, há muitos menus padrão definidos pelo sistema, como o menu Services. Para tornar os menus de um menu padrão, os desenvolvedores precisam definir oroledo menu adequadamente, e o Electron os reconhecerá e os transformará em menus padrão. Isso significa que muitos códigos relacionados a menus vão usar a seguinte verificação de plataforma:const isMac = process.platform === 'darwin'.Os instaladores do Windows podem ser feitos com o windows-installer. O README do projeto destaca que "para um app de produção, você precisa assinar seu aplicativo. O filtro SmartScreen do Internet Explorer bloqueia o download do seu app, e muitos fornecedores de antivírus consideram seu app como malware, a menos que você receba um certificado válido" [sic].
Analisando apenas esses três exemplos, fica claro que o Electron está longe de ser "escreva uma vez, execute em qualquer lugar". Distribuir um app em app stores requer a assinatura de código, uma tecnologia de segurança para certificar a propriedade do app. O empacotamento de um app requer o uso de ferramentas como electron-forge e a reflexão sobre onde hospedar pacotes para atualizações de apps. Isso se torna complexo relativamente rápido, especialmente quando o objetivo realmente é o suporte entre plataformas. É com certeza possível criar apps incríveis no Electron com esforço e dedicação suficientes. No caso do Excalidraw Desktop, não estávamos lá.
De onde o Excalidraw Desktop parou
Até agora, o Excalidraw para computador é basicamente o app da Web Excalidraw empacotado como um arquivo
.asar com uma janela Sobre o Excalidraw adicionada. A aparência do aplicativo é quase idêntica à versão para a Web.
No macOS, agora há um menu no nível do sistema na parte de cima do aplicativo, mas, como nenhuma das ações do menu, além de Close Window e About Excalidraw, está vinculada a algo, o menu está, no estado atual, bastante inútil. Enquanto isso, todas as ações podem ser realizadas pelas barras de ferramentas normais do Excalidraw e pelo menu de contexto.
Usamos electron-builder, que oferece suporte a
associações de tipo de arquivo.
Quando você clica duas vezes em um arquivo .excalidraw, o app Excalidraw para computador deve ser aberto. O
trecho relevante do nosso arquivo electron-builder.json é semelhante a este:
{
"fileAssociations": [
{
"ext": "excalidraw",
"name": "Excalidraw",
"description": "Excalidraw file",
"role": "Editor",
"mimeType": "application/json"
}
]
}
Infelizmente, na prática, isso nem sempre funciona como pretendido, já que, dependendo do tipo de instalação (para o usuário atual, para todos os usuários), os apps no Windows 10 não têm direitos de associar um tipo de arquivo a si mesmos.
Essas deficiências e o trabalho pendente para tornar a experiência realmente semelhante a um app em todas as plataformas (o que, novamente, é possível) foram um forte argumento para reconsiderar nosso investimento no Excalidraw Desktop. No entanto, o maior argumento para nós foi que prevemos que, para nosso caso de uso, não precisaremos de todos os atributos que a Electron oferece. O conjunto crescente de recursos da Web nos atende igualmente bem, se não melhor.
Como a Web nos atende hoje e no futuro
Mesmo em 2020, o jQuery ainda é incrivelmente popular (links em inglês). Para muitos desenvolvedores, tornou-se um hábito usá-lo, apesar de hoje eles talvez não precisarem do jQuery. Existe um recurso semelhante para o Electron, adequadamente chamado You Might Not Need Electron. Vou descrever por que achamos que não precisamos do Electron.
Progressive Web App instalável
O Excalidraw atualmente é um App Web Progressivo instalável com um service worker e um manifesto de app da Web. Ele armazena todos os recursos em dois caches: um para fontes e CSS relacionado a fontes e outro para todo o restante.
Isso significa que o aplicativo funciona off-line e pode ser executado sem uma conexão de rede. Os navegadores baseados no Chromium em computadores e dispositivos móveis solicitam que o usuário instale o app. Você pode conferir o pedido de instalação na captura de tela abaixo.
O Excalidraw é configurado para ser executado como um aplicativo autônomo. Portanto, quando você o instala, um aplicativo é executado na própria janela. Ele é totalmente integrado à interface multitarefa do sistema operacional e recebe o próprio ícone de app na tela inicial, na base ou na barra de tarefas, dependendo da plataforma em que o app for instalado.
Acesso ao sistema de arquivos
O Excalidraw usa browser-fs-access para acessar o sistema de arquivos do sistema operacional. Em navegadores compatíveis, isso possibilita um fluxo de trabalho aberto → editar → salvar, além de salvar em excesso e "salvar como", com um substituto transparente para outros navegadores. Saiba mais sobre esse recurso na minha postagem do blog Como ler e gravar arquivos e diretórios com a biblioteca browser-fs-access.
Suporte ao recurso de arrastar e soltar
Os arquivos podem ser arrastados e soltos na janela do Excalidraw, assim como em aplicativos específicos da plataforma. Em um navegador com suporte à API File System Access, um arquivo solto pode ser editado imediatamente e as modificações são salvas no arquivo original. Isso é tão intuitivo que, às vezes, você esquece que está lidando com um app da Web.
Acesso à área de transferência
O Excalidraw funciona bem com a área de transferência do sistema operacional. Desenhos inteiros do Excalidraw ou apenas
objetos individuais podem ser copiados e colados nos formatos image/png e image/svg+xml, permitindo
uma integração fácil com outras ferramentas específicas da plataforma, como Inkscape ou ferramentas
baseadas na Web, como SVGOMG (link em inglês).
Gerenciamento de arquivos
O Excalidraw já oferece suporte à API File Handling experimental, o que significa que arquivos .excalidraw podem ser clicados duas vezes no gerenciador de arquivos do sistema operacional e abertos diretamente no app Excalidraw, já que o Excalidraw é registrado como um gerenciador de arquivos .excalidraw no sistema operacional.
Captura declarativa de links
Os desenhos do Excalidraw podem ser compartilhados por link. Confira um exemplo. No futuro, se as pessoas tiverem o Excalidraw instalado como um PWA, esses links não serão abertos em uma guia do navegador, mas iniciarão uma nova janela autônoma. Pendente da implementação, isso vai funcionar graças à captura de links declarativa, uma proposta inovadora até o momento para um novo recurso de plataforma da Web.
Conclusão
A Web avançou um longo caminho, com cada vez mais recursos chegando em navegadores que apenas alguns anos ou meses atrás eram impensáveis na Web e exclusivos para aplicativos específicos de cada plataforma. O Excalidraw está na vanguarda do que é possível nos navegadores, reconhecendo que nem todos os navegadores de todas as plataformas oferecem suporte a todos os recursos que usamos. Ao apostar em uma estratégia de aprimoramento progressivo, aproveitamos o que há de melhor e mais recente sempre que possível, mas sem deixar ninguém para trás. Melhor visualização em qualquer navegador.
O elétron nos ajudou muito, mas em 2020 e além, poderemos viver sem ele. Ah, e para esse objetivo de @vjeux: como a Android Play Store agora aceita PWAs em um formato de contêiner chamado Atividade confiável na Web e como a Microsoft Store oferece suporte a PWAs, você também pode esperar o Excalidraw nessas lojas em um futuro não muito distante. Enquanto isso, você sempre pode usar e instalar o Excalidraw no navegador.
Agradecimentos
Este artigo foi revisado por @lipis, @dwelle e Joe Medley.