Saiba por que o projeto Excalidraw decidiu descontinuar o wrapper Electron em favor da Web para a versão anterior.
No projeto Excalidraw, decidimos descontinuamos o Excalidraw Desktop, um Wrapper do Electron para o Excalidraw, em favor da versão da Web que você podem (e sempre podem) ser encontradas em excalidraw.com. Após uma análise cuidadosa, decidiram que o Progressive Web App (PWA) é o futuro que queremos desenvolver Continue lendo para saber por quê.
Como o Excalidraw Desktop surgiu
Logo depois, @vjeux criou a versão inicial do Excalidraw em janeiro de 2020 e postou no blog, ele propôs o seguinte em Problema 561:
Seria ótimo incluir o Excalidraw no Electron (ou equivalente) e publicá-lo como um elemento [específico da plataforma] do aplicativo às várias app stores.
A reação imediata de @voluntadpear foi sugerir:
Que tal transformar esse elemento em um PWA? Atualmente, o Android oferece suporte para adicioná-los à 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 :)
O trabalho de conversão da versão do Excalidraw em um PWA foi iniciado por @voluntadpear e mais tarde outras pessoas, @lipis de forma independente foi em frente e criou um repositório separado para o Excalidraw Desktop.
Até hoje, a meta inicial definida por @vjeux, ou seja, enviar Excalidraw para as várias app stores, ainda não foi alcançado. Honestamente, ninguém nem começou o processo de envio a qualquer loja. Mas por quê? Antes de responder, vamos vamos analisar a plataforma Electron.
O que é o Electron?
A vantagem exclusiva da Electron é que você pode "criar apps multiplataforma para computador com JavaScript, HTML e CSS". Os aplicativos criados com o Electron são "compatível com Mac, Windows e Linux", ou seja, "Os 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 do sistema, relatórios de erros, depuração e criação de perfis Instaladores do Windows. Acontece que alguns os recursos prometidos precisam de uma análise detalhada das letras pequenas.
Por exemplo, as atualizações automáticas "são [no momento] [compatíveis] apenas no macOS e no Windows. Há não há suporte integrado para o atualizador automático no Linux, portanto, é recomendável usar o gerenciador de pacotes para atualizar seu app".
Os desenvolvedores podem criar menus no nível do sistema chamando
Menu.setApplicationMenu(menu). No Windows e No Linux, o menu é definido como o menu superior de cada janela. No macOS, há vários menus padrão definidos pelo sistema, como Serviços . Para tornar os menus padrão, os desenvolvedores precisam definir aroledo menu de acordo com isso, e o Electron vai reconhecê-los e transformá-los em menus padrão. Isso significa que muitos código relacionado ao menu usará a seguinte verificação de plataforma:const isMac = process.platform === 'darwin':É possível criar instaladores do Windows windows-installer (em inglês). O README do projeto destaca que "em um app de produção, é necessário assinar seu aplicativo. do Internet Explorer, O filtro SmartScreen vai bloquear o download do seu app, e muitos fornecedores de antivírus considerar seu app como malware, a menos que você consiga um certificado válido" [sic].
Analisando apenas esses três exemplos, fica claro que o Electron está longe de "escrever uma vez, executar em todos os lugares". Distribuir um app em app stores exige assinatura de código, uma tecnologia de segurança para certificando a propriedade do app. Para empacotar um aplicativo, é necessário usar ferramentas como falsificação eletrônica e pensando em onde hospedar pacotes para atualizações de aplicativos. A complexidade se torna relativamente rápida, especialmente quando o objetivo é o suporte multiplataforma. Quero destacar que é absolutamente possível criar impressionantes Apps do Electron com dedicação e esforço suficientes. No Excalidraw Desktop, não estávamos lá.
Onde o Excalidraw Desktop parou
Até agora, o Excalidraw Desktop é basicamente o app da Web Excalidraw empacotado como um
.asar com a janela Sobre o Excalidraw adicionada. O visual
do aplicativo é quase idêntica à versão da Web.
No macOS, agora há um menu no nível do sistema na parte superior do aplicativo, mas como nenhum dos outras ações, além de Fechar janela e Sobre o Excalidraw, estão vinculadas a qualquer item, o menu é, no estado atual, bastante inútil. Enquanto isso, todas as ações podem ser realizadas através do as barras de ferramentas regulares do Excalidraw e o menu de contexto.
Usamos o electron-builder, que aceita
associações de tipo de arquivo.
Ao clicar duas vezes em um arquivo .excalidraw, o ideal é que o app Excalidraw para computador seja aberto. A
trecho relevante do arquivo electron-builder.json será assim:
{
"fileAssociations": [
{
"ext": "excalidraw",
"name": "Excalidraw",
"description": "Excalidraw file",
"role": "Editor",
"mimeType": "application/json"
}
]
}
Infelizmente, na prática, isso nem sempre funciona como pretendido, pois, 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 a para associar um tipo de arquivo a si mesmos.
Essas deficiências e o trabalho pendente para tornar a experiência verdadeiramente semelhante a um aplicativo em todas as plataformas (que, novamente, com esforço suficiente é possível) foram um argumento forte para reconsiderarmos nossa no Excalidraw para computadores. No entanto, o maior argumento para nós é que prevemos que para nosso caso de uso, não precisamos de todos os recursos oferecidos pelo Electron. A equipe já está em crescimento de recursos da Web nos ajuda igualmente, se não melhor.
Como a Web nos atende hoje e no futuro
Mesmo em 2020, o jQuery ainda incrivelmente popular. Para muitos e desenvolvedores, tornou-se um hábito usá-lo, apesar do fato de que hoje eles pode não precisar do jQuery. Há um recurso semelhante chamado Você talvez não precise do elétron. Quero de explicar por que achamos que não precisamos do Electron.
App Web Progressivo instalável
O Excalidraw hoje é um App Web Progressivo instalável com um service worker e um manifesto do 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 é totalmente compatível com o modo off-line e pode ser executado sem uma conexão de rede. Navegadores baseados no Chromium em computadores e dispositivos móveis solicitam que o usuário instale o app. O prompt de instalação aparece na captura de tela abaixo.
O Excalidraw está configurado para ser executado como um aplicativo autônomo. Portanto, ao instalá-lo, você recebe um aplicativo que é executado na própria janela. Ele está totalmente integrado à interface multitarefa do sistema operacional e tem o próprio ícone do app na tela inicial, no Dock ou na barra de tarefas; dependendo da plataforma em que você instalar reimplantá-lo.
Acesso ao sistema de arquivos
O Excalidraw usa browser-fs-access para ao acessar o sistema de arquivos do sistema operacional. Em navegadores compatíveis, isso possibilita uma verdadeira abrir → editar → salvar fluxo de trabalho e 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 compatível com a API File System Access, um pode ser editado imediatamente e as modificações salvas no arquivo original. Isso é tão intuitiva que às vezes se 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. Faça desenhos completos do Excalidraw ou apenas
objetos individuais podem ser copiados e colados nos formatos image/png e image/svg+xml, permitindo
integração fácil com outras ferramentas específicas da plataforma, como o Inkscape ou baseadas na Web,
ferramentas como SVGOMG.
Processamento de arquivos
O Excalidraw já é compatível com a API File Handling experimental,
o que significa que é possível clicar duas vezes nos arquivos .excalidraw no gerenciador de arquivos do sistema operacional e
serão abertos diretamente no app Excalidraw, já que o Excalidraw é registrado como um gerenciador de arquivos para .excalidraw.
no sistema operacional.
Captura de links declarativos
Os desenhos do Excalidraw podem ser compartilhados por link. Veja um exemplo. No futuro, se pessoas que têm o Excalidraw instalado como um PWA, esses links não serão abertos em uma guia do navegador, mas iniciarão uma nova janela independente. Se a implementação estiver pendente, isso funcionará graças a captura de links declarativa, na época em que este artigo foi escrito, uma proposta de vanguarda absoluta para um novo recurso de plataforma da web.
Conclusão
A web já percorreu um longo caminho, com cada vez mais recursos chegando em navegadores que apenas alguns anos ou até meses atrás eram impensáveis na web e exclusivas para aplicativos específicos de plataformas. O Excalidraw está na vanguarda do que é possível no navegador, reconhecendo que não há Todos os navegadores em todas as plataformas são compatíveis com todos os recursos que usamos. Ao apostar em uma estratégia estratégia de aprimoramento, desfrutamos do que há de melhor e mais recente sempre que possível, mas sem deixar ninguém para trás. Melhor visualizado em qualquer navegador.
O Electron nos ajudou muito, mas, em 2020 e além, podemos viver sem ele. Ah, e por isso Objetivo de @vjeux: já que a Play Store do Android agora aceita PWAs em um em um formato de contêiner chamado Atividade na Web Confiável e já que o A Microsoft Store oferece suporte a PWAs, também, pode esperar o Excalidraw nessas lojas em um futuro não muito distante. Enquanto isso, você pode sempre use e instale o Excalidraw no navegador e no navegador.
Agradecimentos
Este artigo foi revisado por @lipis, @dwelle e João Medley.