Abandon d'Excalidraw Electron au profit de la version Web

Découvrez pourquoi le projet Excalidraw a décidé d'abandonner son wrapper Electron au profit du Web version.

Thomas Steiner

Pour le projet Excalidraw, nous avons décidé de abandon d'Excalidraw Desktop, Wrapper Electron pour Excalidraw à la place de la version Web que vous pouvez trouver sur excalidraw.com, que vous pourriez toujours y trouver. Après une analyse minutieuse, nous ont décidé que la progressive web app (PWA) serait l'avenir que nous souhaitons développer. de données. Poursuivez votre lecture pour découvrir pourquoi.

Comment Excalidraw Desktop a-t-il été créé ?

Peu de temps après la création de la version initiale d'Excalidraw par @vjeux, janvier 2020, et a publié un article sur son blog, il a proposé ce qui suit dans Problème 561:

Il serait intéressant d'encapsuler Excalidraw dans la technologie Electron (ou son équivalent) et de la publier en tant que [plate-forme spécifique]. sur les différentes plates-formes de téléchargement d'applications.

La réaction immédiate de @voluntadpear a été de suggérer:

Pourquoi ne pas en faire une PWA ? Android permet actuellement de les ajouter au Play Store en tant que Activités Web fiables et nous espérons qu'iOS fera de même prochainement. Sur ordinateur, Chrome vous permet télécharger un raccourci vers une PWA sur le bureau.

Au final, @vjeux a pris la décision la plus simple:

Nous devons faire les deux :)

La conversion de la version d'Excalidraw en PWA a débuté. @voluntadpear et d'autres marques plus tard, @lipis indépendamment a pris de l'avance et a créé un dépôt distinct pour Excalidraw Desktop.

À ce jour, l'objectif initial défini par @vjeux, à savoir d'envoyer Excalidraw sur les différentes plates-formes de téléchargement d'applications n'est pas encore disponible. Honnêtement, personne n’a même commencé le processus d'envoi à l'un des magasins. Mais pourquoi ? Avant de répondre, la plate-forme Electron.

Qu'est-ce qu'Electron ?

L'argument de vente unique d'Electron est qu'il vous permet de "créer des applications de bureau multiplates-formes avec JavaScript, HTML et CSS". Les applications développées avec Electron sont "compatible avec Mac, Windows et Linux", c'est-à-dire "Les applications Electron sont créées et exécutées sur trois plates-formes. Selon la page d'accueil, les parties difficiles que facilite la technologie Electron sont mises à jour automatiques, les menus et les notifications au niveau du système, Crash Reporting, débogage et profilage Programmes d'installation Windows. Il s’avère que certains de les caractéristiques annoncées nécessitent un examen détaillé des petits caractères.

• Par exemple, les mises à jour automatiques sont [actuellement] uniquement [compatibles] sur macOS et Windows. Il y a pas de prise en charge intégrée de l'outil de mise à jour automatique sous Linux, il est donc recommandé d'utiliser le gestionnaire de packages pour mettre à jour votre application".

• Les développeurs peuvent créer des menus au niveau du système en appelant Menu.setApplicationMenu(menu). Sous Windows et Linux, le menu sera défini comme le menu supérieur de chaque fenêtre, tandis que sur macOS, il existe de nombreux les menus standards définis par le système, comme Services . Pour que leurs menus deviennent un menu standard, les développeurs doivent définir le role de leur menu en conséquence. et Electron les reconnaît et en fait des menus standards. Cela signifie que beaucoup de le code associé au menu utilisera la vérification de plateforme suivante: const isMac = process.platform === 'darwin'

• Les programmes d’installation Windows peuvent être créés avec windows-installer. Le fichier README du projet indique que "pour une application de production, vous devez signer votre application. Internet Explorer Le filtre SmartScreen bloque le téléchargement de votre application, et de nombreux fournisseurs d'antivirus considérer votre application comme un logiciel malveillant, sauf si vous obtenez un certificat valide" [sic].

En considérant seulement ces trois exemples, il est clair que la société Electron est loin de « écrire une fois, exécuter partout." La distribution d'une application sur des plates-formes de téléchargement la signature de code, une technologie de sécurité pour certifier la propriété de l'application. Le packaging d'une application nécessite l'utilisation d'outils tels que forge électronique et à réfléchir à l'endroit où des packages hôtes pour les mises à jour d’applications. Elle se complexifie relativement rapidement, surtout lorsque l'objectif est véritablement compatible avec plusieurs plates-formes. Je tiens à noter qu'il est absolument possible de créer de superbes Les applications électron avec assez d'effort et de dévouement. Pour Excalidraw Desktop, nous n'étions pas là.

Là où Excalidraw Desktop s'est arrêté

Excalidraw Desktop est jusqu'ici l'application Web Excalidraw, intégrée à un .asar avec une fenêtre À propos d'Excalidraw ajoutée. Style et la convivialité de l'application sont presque identiques à la version Web.

</ph>

</ph>

Sous macOS, il y a maintenant un menu au niveau du système en haut de l’application, mais comme aucun des menus autres que Fermer la fenêtre et À propos d'Excalidraw sont connectés à n'importe quel élément : le menu est, dans son état actuel, plutôt inutile. Par ailleurs, toutes les actions peuvent bien sûr être effectuées les barres d'outils standards d'Excalidraw et le menu contextuel.

</ph>

Nous utilisons l'outil électron-builder, qui prend en charge associations de types de fichiers. En double-cliquant sur un fichier .excalidraw, l'application Excalidraw sur ordinateur doit idéalement s'ouvrir. La extrait pertinent de notre fichier electron-builder.json se présente comme suit:

{
  "fileAssociations": [
    {
      "ext": "excalidraw",
      "name": "Excalidraw",
      "description": "Excalidraw file",
      "role": "Editor",
      "mimeType": "application/json"
    }
  ]
}

Malheureusement, dans la pratique, cela ne fonctionne pas toujours comme prévu, car, en fonction de la type d'installation (pour l'utilisateur actuel, pour tous les utilisateurs), les applications sous Windows 10 ne disposent pas d'associer un type de fichier à eux-mêmes.

Ces lacunes et le travail en attente pour que l'expérience soit véritablement semblable à celle des applications sur toutes les plates-formes (ce qui, là encore, avec suffisamment d'efforts est possible) s'est avéré être un argument important pour nous de reconsidérer dans Excalidraw pour ordinateur. Mais l'argument le plus important pour nous, c'est que nous prévoyons pour notre cas d'utilisation, nous n'avons pas besoin de toutes les fonctionnalités offertes par Electron. La communauté grandissante et toujours en pleine expansion les possibilités offertes par le Web nous servent tout aussi, voire mieux.

Comment le Web nous sert aujourd'hui et demain

Même en 2020, jQuery est resté incroyablement populaires. Pour beaucoup développeurs, il est devenu une habitude de l'utiliser, bien qu'aujourd'hui, n'ont peut-être pas besoin de jQuery. Il existe une ressource similaire pour Électron, à juste titre You Might Not besoin Electron. Laissez-moi Expliquez pourquoi nous pensons que la technologie Electron n'est pas nécessaire.

Progressive web app installable

Excalidraw aujourd'hui est une progressive web app installable avec un service worker et fichier manifeste d'application Web. Il met en cache toutes ses ressources dans deux caches, une pour les polices et le CSS lié aux polices, et une pour tout le reste.

</ph>

Cela signifie que l'application fonctionne hors connexion et peut s'exécuter sans connexion réseau. Les navigateurs basés sur Chromium sur ordinateur et sur mobile invitent l'utilisateur à installer l'application. Vous pouvez voir l'invite d'installation dans la capture d'écran ci-dessous.

</ph>

Excalidraw est configuré pour s'exécuter en tant qu'application autonome. Lorsque vous l'installez, vous obtenez donc une application. qui s'exécute dans sa propre fenêtre. Il est entièrement intégré à l'interface utilisateur multitâche du système d'exploitation et dispose de sa propre icône d'application sur l'écran d'accueil, le Dock ou la barre des tâches ; en fonction de la plate-forme sur laquelle vous installez

</ph>

</ph>

Accès au système de fichiers

Excalidraw utilise browser-fs-access pour accéder au système de fichiers du système d'exploitation. Sur les navigateurs compatibles, ouvrir → modifier → enregistrer le flux de travail, les économies excessives et "Enregistrer sous", avec une solution de remplacement transparente pour dans d'autres navigateurs. Pour en savoir plus sur cette fonctionnalité, consultez mon article de blog Lire et écrire des fichiers et des répertoires avec la bibliothèque browser-fs-access.

Fonctionnalité de glisser-déposer

Les fichiers peuvent être glissés-déposés dans la fenêtre Excalidraw, comme dans les applications spécifiques à la plate-forme. Sur un compatible avec l'API File System Access, une extension peut être modifié immédiatement et les modifications sont enregistrées dans le fichier d'origine. C’est tellement intuitif que vous oubliez parfois que vous avez affaire à une application web.

Accès au presse-papiers

Excalidraw fonctionne bien avec le presse-papiers du système d'exploitation. Des dessins Excalidraw entiers ou simplement des objets individuels peuvent être copiés et collés aux formats image/png et image/svg+xml, ce qui permet une intégration facile avec d'autres outils spécifiques à la plate-forme, comme Inkscape ou la solution tels que SVGOMG.

</ph>

Gestion de fichiers

Excalidraw est déjà compatible avec l'API File Handling expérimentale. ce qui signifie que vous pouvez double-cliquer sur les fichiers .excalidraw dans le gestionnaire de fichiers du système d'exploitation et s'ouvrent directement dans l'application Excalidraw, car Excalidraw s'enregistre en tant que gestionnaire de fichiers pour .excalidraw. dans le système d'exploitation.

Capture de lien déclarative

Les dessins Excalidraw peuvent être partagés au moyen d'un lien. Voici une exemple. À l'avenir, si Excalidraw est installé en tant que PWA. Par conséquent, ces liens ne s'ouvrent pas dans un onglet du navigateur, mais nouvelle fenêtre autonome. En attente d'implémentation, cela fonctionnera grâce à capture déclarative de lien, une proposition de pointe pour une nouvelle fonctionnalité de la plate-forme Web au moment de la rédaction de cet article.

Conclusion

Le Web a beaucoup progressé, avec de plus en plus de fonctionnalités disponibles dans des navigateurs que seules quelques étaient impensables sur le Web et seulement pour les applications propres à certaines plates-formes. Excalidraw est à l'avant-garde de ce qu'il est possible de faire dans le navigateur, tout en reconnaissant que tous les navigateurs sur toutes les plateformes prennent en charge chaque fonctionnalité que nous utilisons. En pariant sur un rythme d'amélioration des performances. Nous apprécions autant que possible les nouveautés et les meilleurs de retard. Adapté à tous les navigateurs

La technologie Electron nous a bien aidés, mais en 2020 et au-delà, nous pouvons nous en passer. Oh, et pour cela, Objectif de @vjeux: étant donné que le Play Store d'Android accepte désormais les PWA dans un appelé Trusted Web Activity (Activité Web fiable) et depuis le Le Microsoft Store est compatible avec les PWA, Excalidraw est prévu dans un futur proche. En attendant, vous pouvez Utilisez et installez toujours Excalidraw dans et depuis le navigateur.

Remerciements

Cet article a été lu par @lipis, @dwelle, et Joe Medley.