Découvrez pourquoi le projet Excalidraw a décidé d'abandonner son wrapper Electron au profit de la version Web.
Pour le projet Excalidraw, nous avons décidé d'abandonner Excalidraw Desktop, un wrapper Electron pour Excalidraw, au profit de la version Web que vous pouvez trouver sur excalidraw.com. Après une analyse minutieuse, nous avons décidé que les applications Web progressives (PWA) sont l'avenir sur lequel nous voulons nous appuyer. Lisez la suite pour découvrir pourquoi.
Comment Excalidraw Desktop est né
Peu de temps après que @vjeux a créé la version initiale d'Excalidraw en janvier 2020 et en a parlé sur son blog, il a proposé ce qui suit dans l'issue 561:
Il serait idéal d'encapsuler Excalidraw dans Electron (ou un équivalent) et de le publier en tant qu'application [spécifique à la plate-forme] sur les différentes plates-formes de téléchargement d'applications.
@voluntadpear a immédiatement suggéré les solutions suivantes:
Pourquoi ne pas en faire une PWA ? Android permet actuellement de les ajouter au Play Store en tant qu'activités Web fiables. Nous espérons que ce sera bientôt le cas sur iOS. Sur ordinateur, Chrome vous permet de télécharger un raccourci pour ordinateur vers une PWA.
La décision prise par @vjeux est simple:
Nous devrions faire les deux :)
La conversion de la version d'Excalidraw en PWA a été lancée par @voluntadpear et d'autres personnes par la suite. @lipis a poursuivi indépendamment et a créé un dépôt distinct pour Excalidraw Desktop.
À ce jour, l'objectif initial fixé par @vjeux, à savoir envoyer Excaliburdraw sur les différentes plates-formes de téléchargement d'applications, n'a pas encore été atteint. Honnêtement, personne n'a encore commencé à envoyer de demandes à l'un des magasins. Mais pourquoi ? Avant de répondre, examinons 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 créées avec Electron sont compatibles avec Mac, Windows et Linux, c'est-à-dire que les applications Electron sont compilées et exécutées sur trois plates-formes. Selon la page d'accueil, les éléments difficiles que Electron simplifie sont les mises à jour automatiques, les menus et notifications au niveau du système, les rapports d'erreur, le débogage et le profilage, ainsi que les programmes d'installation Windows. Il s'avère que certaines des fonctionnalités promises nécessitent un examen détaillé des petits caractères.
Par exemple, les mises à jour automatiques ne sont [actuellement] compatibles qu'avec macOS et Windows. Il n'existe aucune prise en charge intégrée de l'outil de mise à jour automatique sous Linux. Il est donc recommandé d'utiliser le gestionnaire de paquets de la distribution 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 est défini comme menu supérieur de chaque fenêtre, tandis que sous macOS, il existe de nombreux menus standards définis par le système, comme le menu Services. Pour que les menus soient des menus standards, les développeurs doivent définir lerolede leur menu en conséquence. Electron les reconnaîtra et les transformera en menus standards. Cela signifie que de nombreux codes liés au menu utiliseront la vérification de plate-forme suivante :const isMac = process.platform === 'darwin'.Vous pouvez créer des programmes d'installation Windows avec windows-installer. Le fichier README du projet indique que "pour une application de production, vous devez signer votre application. Le filtre SmartScreen d'Internet Explorer empêchera le téléchargement de votre application, et de nombreux fournisseurs d'antivirus considéreront votre application comme un logiciel malveillant, sauf si vous obtenez un certificat valide" [sic].
En se basant sur ces trois exemples, il est clair qu'Electron est loin du principe "écrire une fois, exécuter partout". La distribution d'une application sur des plates-formes de téléchargement d'applications nécessite la signature de code, une technologie de sécurité permettant de certifier la propriété de l'application. Pour empaqueter une application, vous devez utiliser des outils tels que electron-forge et réfléchir à l'emplacement d'hébergement des packages pour les mises à jour de l'application. Cela devient relativement complexe assez rapidement, en particulier lorsque l'objectif est vraiment la compatibilité multiplate-forme. Je tiens à préciser qu'il est absolument possible de créer des applications Electron époustouflantes avec suffisamment d'efforts et de dévouement. Pour Excalidraw Desktop, nous n'avons pas été là.
Là où Excalidraw Desktop s'était arrêté
Excalidraw Desktop est pour le moment essentiellement l'application Web Excalidraw groupée sous la forme d'un fichier .asar avec une fenêtre À propos d'Excalidraw ajoutée. L'apparence de l'application est presque identique à celle de la version Web.
Sous macOS, un menu au niveau du système se trouve désormais en haut de l'application. Toutefois, aucune des actions du menu (à l'exception de Close Window (Fermer la fenêtre) et About Excalidraw (À propos d'Excalidraw)) n'est associée à quoi que ce soit. Par conséquent, le menu est, dans son état actuel, assez inutile. En attendant, toutes les actions peuvent bien sûr être effectuées via les barres d'outils Excalidraw standards et le menu contextuel.
Nous utilisons electron-builder, qui prend en charge les associations de types de fichiers.
En double-cliquant sur un fichier .excalidraw, l'application Excalidraw pour ordinateur devrait idéalement s'ouvrir. L'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, en pratique, cela ne fonctionne pas toujours comme prévu, car, selon le type d'installation (pour l'utilisateur actuel, pour tous les utilisateurs), les applications sous Windows 10 n'ont pas le droit d'associer un type de fichier à elles-mêmes.
Ces lacunes et le travail en attente pour rendre l'expérience véritablement semblable à une application sur toutes les plates-formes (ce qui, encore une fois, est possible avec suffisamment d'efforts) nous ont poussés à reconsidérer notre investissement dans Excalidraw Desktop. Cependant, l'argument le plus important pour nous est que nous prévoyons que, pour notre cas d'utilisation, nous n'avons pas besoin de toutes les fonctionnalités qu'Electron propose. L'ensemble des fonctionnalités du Web, qui ne cesse de croître, nous sert tout aussi bien, voire mieux.
Comment le Web nous sert aujourd'hui et à l'avenir
Même en 2020, jQuery reste incroyablement populaire. Pour de nombreux développeurs, il est devenu une habitude de l'utiliser, même si aujourd'hui ils n'en ont peut-être pas besoin. Une ressource similaire est disponible pour Electron, intitulée Vous n'avez peut-être pas besoin d'Electron. Permettez-moi de vous expliquer pourquoi nous pensons que nous n'avons pas besoin d'Electron.
Progressive Web App installable
Excalidraw est aujourd'hui une progressive web app installable avec un service worker et un fichier manifeste d'application Web. Il met en cache toutes ses ressources dans deux caches, l'un pour les polices et les CSS associés, et l'autre pour tout le reste.
Cela signifie que l'application est entièrement compatible avec le mode hors connexion et qu'elle peut s'exécuter sans connexion réseau. Les navigateurs basés sur Chromium sur ordinateur et mobile invitent l'utilisateur à installer l'application. Vous pouvez voir l'invite d'installation dans la capture d'écran ci-dessous.
Excalidraw est configuré pour s'exécuter en tant qu'application autonome. Par conséquent, lorsque vous l'installez, vous obtenez une application qui s'exécute dans sa propre fenêtre. Elle est entièrement intégrée à l'interface utilisateur multitâche du système d'exploitation et dispose de son propre icône d'application sur l'écran d'accueil, dans le Dock ou dans la barre des tâches, en fonction de la plate-forme sur laquelle vous l'installez.
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, cela permet un véritable workflow d'ouverture → modification → enregistrement, ainsi qu'un enregistrement en trop et un "Enregistrer sous", avec un remplacement transparent pour les 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.
Prise en charge du glisser-déposer
Vous pouvez faire glisser des fichiers dans la fenêtre Excalidraw, comme dans les applications spécifiques à la plate-forme. Dans un navigateur compatible avec l'API File System Access, un fichier déposé peut être immédiatement modifié et les modifications 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. Vous pouvez copier et coller des dessins Excalidraw entiers ou des objets individuels au format image/png et image/svg+xml, ce qui permet une intégration facile avec d'autres outils spécifiques à la plate-forme tels que Inkscape ou des outils basés sur le Web tels que SVGOMG.
Gestion des fichiers
Excalidraw est déjà compatible avec l'API de gestion des fichiers 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 les ouvrir directement dans l'application Excalidraw, car Excalidraw s'enregistre en tant que gestionnaire de fichiers pour les fichiers .excalidraw dans le système d'exploitation.
Capture de lien déclarative
Vous pouvez partager les dessins Excalidraw via un lien. Voici un exemple. À l'avenir, si les utilisateurs ont installé Excalidraw en tant que PWA, ces liens ne s'ouvriront plus dans un onglet de navigateur, mais lanceront une nouvelle fenêtre autonome. En attendant l'implémentation, cela fonctionnera grâce à la capture de liens déclarative, une proposition de nouvelle fonctionnalité de plate-forme Web à la pointe de la technologie au moment de la rédaction de cet article.
Conclusion
Le Web a parcouru un long chemin, avec de plus en plus de fonctionnalités dans les navigateurs qui, il y a à peine quelques années ou même quelques mois, étaient impensables sur le Web et réservées aux applications spécifiques à la plate-forme. Excalidraw est à la pointe de ce qui est possible dans le navigateur, tout en reconnaissant que tous les navigateurs sur toutes les plates-formes ne sont pas compatibles avec toutes les fonctionnalités que nous utilisons. En misant sur une stratégie d'amélioration progressive, nous profitons des dernières nouveautés dans la mesure du possible, sans laisser personne de côté. À voir dans n'importe quel navigateur.
Electron nous a bien servi, mais en 2020 et au-delà, nous pouvons nous en passer. Et pour l'objectif de @vjeux: comme le Play Store Android accepte désormais les PWA dans un format de conteneur appelé activité Web sécurisée et que le Microsoft Store est également compatible avec les PWA, vous pouvez vous attendre à voir Excalidraw dans ces plates-formes dans un avenir proche. En attendant, vous pouvez toujours utiliser et installer Excalidraw dans et depuis le navigateur.
Remerciements
Cet article a été relu par @lipis, @dwelle et Joe Medley.