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 a-t-il été créé ?
Peu après la création de la première version d'Excalidraw en janvier 2020 et des articles sur son blog, @vjeux a proposé ce qui suit dans le numéro 561:
Il serait intéressant d'encapsuler Excalidraw dans Electron (ou é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 Excalidraw 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é le processus d'envoi dans les 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 transformer les menus en menu standard, 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 la considéreront comme un logiciel malveillant, à moins que vous n'obteniez 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 rapide, en particulier lorsque l'objectif est une 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 pour ordinateur 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, il existe désormais un menu système en haut de l'application. Cependant, comme aucune des actions de menu, à l'exception de Fermer la fenêtre et À propos d'Excalidraw, n'est connectée à quoi que ce soit. Par conséquent, le menu est assez inutile dans son état actuel. 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 l'outil électron-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 ne sont pas autorisées à 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. Les capacités du Web, toujours plus nombreuses, nous servent tout aussi, 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 d'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. Toutes ses ressources sont mises en cache dans deux caches : un pour les polices et le code CSS associé aux polices, et un 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 sur 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. Ainsi, 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 une véritable ouverture → Modifier → Enregistrer le workflow, et des économies excessives et "Enregistrer sous", avec une solution de remplacement transparente 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. Des dessins Excalidraw entiers ou uniquement 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 des outils 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 des utilisateurs ont installé Excalidraw en tant que PWA, ces liens ne s'ouvriront pas dans un onglet du navigateur, mais s'ouvriront dans une nouvelle fenêtre autonome. En attendant la mise en œuvre, cela fonctionnera grâce à la capture de lien déclarative, une proposition de pointe pour une nouvelle fonctionnalité de la plate-forme Web au moment de la rédaction de ce document.
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 à l'avant-garde des possibilités offertes par le navigateur, tout en reconnaissant que les navigateurs de toutes les plates-formes ne sont pas tous compatibles avec chacune des 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. Concernant l'objectif de @vjeux: comme le Play Store d'Android accepte désormais les PWA dans un format de conteneur appelé Trusted Web Activity et que le Microsoft Store prend également en charge les PWA, vous pouvez vous attendre à Excalidraw sur 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é examiné par @lipis, @dwelle et Joe Medley.