Découvrez pourquoi le projet Excalidraw a décidé d'abandonner son wrapper Electron au profit de la version Web.
Dans le cadre du projet Excalidraw, nous avons décidé d'abandonner Excalidraw Desktop, un wrapper Electron pour Excalidraw, au profit d'une version Web disponible et toujours disponible sur excalidraw.com. Après une analyse minutieuse, nous avons décidé que la progressive web app (PWA) est l'avenir que nous souhaitons développer. Pour en savoir plus, poursuivez votre lecture.
Comment Excalidraw Desktop a vu le jour
Peu de temps après avoir créé la version initiale d'Excalidraw en janvier 2020 et publié sur un blog, @vjeux a proposé ce qui suit dans le problème 561:
Nous vous recommandons 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 réagi:
Pourquoi ne pas en faire plutôt une PWA ? Android permet actuellement de les ajouter au Play Store en tant qu'activités Web fiables. Nous espérons qu'iOS fera de même bientôt. Sur ordinateur, Chrome vous permet de télécharger un raccourci sur le bureau vers une PWA.
La décision finale prise par @vjeux a été simple:
Nous devrions faire les deux :)
La conversion de la version d'Excalidraw en PWA a été lancée par @voluntadpear et d'autres par la suite. Par la suite, @lipis a commencé et a créé un dépôt distinct pour Excalidraw Desktop.
À ce jour, l'objectif initial défini par @vjeux, à savoir envoyer Excalidraw aux différentes plates-formes de téléchargement d'applications, n'a pas encore été atteint. Honnêtement, personne n'a même commencé le processus d'envoi à aucun des magasins. Mais pourquoi ? Avant de répondre, examinons la plate-forme Electron.
Qu'est-ce que 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 conçues avec Electron sont "compatibles avec Mac, Windows et Linux", c'est-à-dire "les applications Electron compilent et s'exécutent 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, et les programmes d'installation Windows. Il s'avère que certaines des fonctionnalités prometteuses nécessitent un examen détaillé des petits caractères.
Par exemple, les mises à jour automatiques "ne sont [actuellement] [compatibles] que sur macOS et Windows. L'outil de mise à jour automatique n'est pas intégré sous Linux. Nous vous recommandons donc d'utiliser le gestionnaire de packages 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 sera défini comme le menu principal 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 deviennent standards, les développeurs doivent définir leurroleen conséquence. Electron les reconnaîtra et les transformera en menus standards. Cela signifie qu'une grande partie du code lié au menu utilisera la vérification de la plate-forme 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. Le filtre SmartScreen d'Internet Explorer empêche le téléchargement de votre application. De nombreux fournisseurs d'antivirus la considèrent comme un logiciel malveillant, à moins que vous n'obteniez un certificat valide [sic].
Si l'on ne prend en compte que ces trois exemples, Electron est loin d'être un processus consistant à "écrire une fois, s'exécuter partout". La distribution d'une application sur une plate-forme 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 où héberger les packages pour les mises à jour d'application. Elle devient complexe relativement rapidement, surtout lorsque l'objectif est de proposer une compatibilité multiplate-forme. Je tiens à noter qu'il est tout à fait possible de créer de superbes applications Electron avec suffisamment d'effort et de dévouement. Pour Excalidraw Desktop, nous n'étions pas là.
Où Excalidraw Desktop s'est arrêté
Jusqu'à présent, Excalidraw Desktop est essentiellement l'application Web Excalidraw sous forme de fichier .asar avec une fenêtre À propos d'Excalidraw. L'apparence de l'application est presque identique à celle de la version Web.
Sous macOS, il existe désormais un menu au niveau du système en haut de l'application, mais comme aucune des actions de menu (à l'exception de Close Window et About Excalidraw) n'est liée à quoi que ce soit, le menu est, dans son état actuel, assez inutile. En attendant, toutes les actions peuvent ê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 fichier.
Idéalement, en double-cliquant sur un fichier .excalidraw, l'application Excalidraw Desktop doit 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, dans la 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 de s'associer à un type de fichier.
Ces lacunes et les efforts à mettre en place pour que l'expérience soit vraiment semblable à une application sur toutes les plates-formes (ce qui, là encore, avec suffisamment d'efforts est possible), nous ont fortement convaincus de réexaminer notre investissement dans Excalidraw Desktop. Toutefois, l'argument le plus important pour nous était que nous n'avions pas besoin de toutes les fonctionnalités offertes par Electron pour notre cas d'utilisation. L'ensemble des capacités du Web, qui ne cesse de croître, nous est tout aussi utile, si ce n'est mieux.
Comment le Web nous sert aujourd'hui et demain
Même en 2020, jQuery reste incroyablement populaire. De nombreux développeurs ont pris l'habitude de l'utiliser, malgré le fait qu'aujourd'hui, ils n'ont peut-être pas besoin de jQuery. Il existe une ressource similaire pour Electron, intitulée You Might Not Need Electron. Permettez-moi de vous expliquer pourquoi 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, un pour les polices et le CSS lié aux polices, et l'autre pour tout le reste.
Cela signifie que l'application est entièrement disponible 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.
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 obtient sa propre icône d'application sur l'écran d'accueil, le dock ou la barre des tâches, selon 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. Dans les navigateurs compatibles, cela permet un véritable workflow de type ouvert → modifier → enregistrement, ainsi qu'une économie excessive et une option "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.
Fonctionnalité de glisser-déposer compatible
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 navigateur compatible avec l'API File System Access, un fichier supprimé peut être immédiatement modifié et les modifications enregistrées dans le fichier d'origine. C'est si intuitif que vous oubliez parfois qu'il s'agit d'une application Web.
Accès au presse-papiers
Excalidraw fonctionne bien avec le presse-papiers du système d'exploitation. Des dessins Excalidraw complets 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 File Handling expérimentale. Il est donc possible de double-cliquer sur les fichiers .excalidraw dans le gestionnaire de fichiers du système d'exploitation et de 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
Les dessins Excalidraw peuvent être partagés par lien. Voici un exemple. À l'avenir, si Excalidraw est installé en tant que PWA, les liens ne s'ouvriront plus dans un onglet de navigateur, mais lanceront une nouvelle fenêtre autonome. En attente d'implémentation, cela fonctionnera grâce à la capture de liens déclarative, une proposition de pointe au moment de la rédaction de ce document pour une nouvelle fonctionnalité de plate-forme Web.
Conclusion
Le Web a beaucoup évolué, avec de plus en plus de fonctionnalités disponibles dans les navigateurs, qui étaient impensables il y a quelques années ou même quelques mois sur le Web et exclusivement réservées aux applications spécifiques à une plate-forme. Excalidraw est à l'avant-garde de ce qui est possible dans le navigateur, tout en reconnaissant que tous les navigateurs de toutes les plates-formes ne sont pas compatibles avec chaque fonctionnalité que nous utilisons. En misant sur une stratégie d'amélioration progressive, nous profitons autant que possible des dernières et meilleures fonctionnalités, mais sans laisser personne de côté. Il est recommandé d'utiliser tous les navigateurs.
Electron nous a bien aidés, mais en 2020 et au-delà, nous pouvons nous en passer. Concernant cet objectif de @vjeux: comme le Play Store Android accepte désormais les PWA dans un format de conteneur appelé Trusted Web Activity (Activité Web fiable), et comme le Microsoft Store est compatible avec les PWA, vous pouvez vous attendre à ce qu'Excalidraw soit disponible dans ces magasins dans un avenir proche. En attendant, vous pouvez toujours utiliser et installer Excalidraw dans et depuis le navigateur.
Remerciements
Cet article a été lu par @lipis, @dwelle et Joe Medley.