Deprecating Excalidraw Electron in favor of the Web version
- Published December 17, 2020
- by tomayac
How Excalidraw Desktop came into being
Soon after @vjeux created the initial version of Excalidraw in January 2020 and blogged about it, he proposed the following in Issue #561:
Would be great to wrap Excalidraw within Electron (or equivalent) and publish it as a [platform-specific] application to the various app stores.
The immediate reaction by @voluntadpear was to suggest:
What about making it a PWA instead? Android currently supports adding them to the Play Store as Trusted Web Activities and hopefully iOS will do the same soon. On Desktop, Chrome lets you download a desktop shortcut to a PWA.
The decision that @vjeux took in the end was simple:
We should do both :)
While work on converting the version of Excalidraw into a PWA was started by @voluntadpear and later others, @lipis independently went ahead and created a separate repo for Excalidraw Desktop.
To this day, the initial goal set by @vjeux, that is, to submit Excalidraw to the various app stores, has not been reached yet. Honestly, no one has even started the submission process to any of the stores. But why is that? Before I answer, let’s look at Electron, the platform.
What is Electron?
The unique selling point of Electron is that it allows you to “build cross-platform desktop apps with JavaScript, HTML, and CSS”. Apps built with Electron are “compatible with Mac, Windows, and Linux”, that is, “Electron apps build and run on three platforms”. According to the homepage, the hard parts that Electron makes easy are automatic updates, system-level menus and notifications, crash reporting, debugging and profiling, and Windows installers. Turns out, some of the promised features need a detailed look at the small print.
- For example, automatic updates “are [currently] only [supported] on macOS and Windows. There is no built-in support for auto-updater on Linux, so it is recommended to use the distribution’s package manager to update your app”.
- Developers can create system-level menus by calling
Menu.setApplicationMenu(menu). On Windows and Linux, the menu will be set as each window’s top menu, while on macOS there are many system-defined standard menus, like the Services menu. To make one’s menus a standard menu, developers should set their menu’sroleaccordingly, and Electron will recognize them and make them become standard menus. This means that a lot of menu-related code will use the following platform check:const isMac = process.platform === 'darwin'. - Windows installers can be made with windows-installer. The README of the project highlights that “for a production app you need to sign your application. Internet Explorer’s SmartScreen filter will block your app from being downloaded, and many anti-virus vendors will consider your app as malware unless you obtain a valid cert” [sic].
Looking at just these three examples, it is clear that Electron is far from “write once, run everywhere”. Distributing an app on app stores requires code signing, a security technology for certifying app ownership. Packaging an app requires using tools like electron-forge and thinking about where to host packages for app updates. It gets complex relatively quickly, especially when the objective truly is cross platform support. I want to note that it is absolutely possible to create stunning Electron apps with enough effort and dedication. For Excalidraw Desktop, we were not there.
Where Excalidraw Desktop left off
Excalidraw Desktop so far is basically the Excalidraw web app bundled as an .asar file with an added About Excalidraw window. The look and feel of the application is almost identical to the web version.
Excalidraw Desktop is almost indistinguishable from the Web version
The About Excalidraw menu providing insights into the versions
On macOS, there is now a system-level menu at the top of the application, but since none of the menu actions—apart from Close Window and About Excalidraw—are hooked up to to anything, the menu is, in its current state, pretty useless. Meanwhile, all actions can of course be performed via the regular Excalidraw toolbars and the context menu.
The menu bar of Excalidraw Desktop on macOS
We use electron-builder, which supports file type associations. By double-clicking an .excalidraw file, ideally the Excalidraw Desktop app should open. The relevant excerpt of our electron-builder.json file looks like this:
1{2 "fileAssociations": [3 {4 "ext": "excalidraw",5 "name": "Excalidraw",6 "description": "Excalidraw file",7 "role": "Editor",8 "mimeType": "application/json"9 }10 ]11}
Unfortunately, in practice, this does not always work as intended, since, depending on the installation type (for the current user, for all users), apps on Windows 10 do not have the rights to associate a file type to themselves.
These shortcomings and the pending work to make the experience truly app-like on all platforms (which, again, with enough effort is possible) were a strong argument for us to reconsider our investment in Excalidraw Desktop. The way bigger argument for us, though, was that we foresee that for our use case, we do not need all the features Electron offers. The grown and still growing set of capabilities of the web serves us equally well, if not better.
How the web serves us today and in the future
Even in 2020, jQuery is still incredibly popular. For many developers it has become a habit to use it, despite the fact that today they might not need jQuery. There is a similar resource for Electron, aptly called You Might Not Need Electron. Let me outline why we think we do not need Electron.
Installable Progressive Web App
Excalidraw today is an installable Progressive Web App with a service worker and a Web App Manifest. It caches all its resources in two caches, one for fonts and font-related CSS, and one for everything else.
Excalidraw's cache contents
This means the application is fully offline-capable and can run without a network connection. Chromium-based browsers on both desktop and mobile prompt the user to install the app. You can see the installation prompt in the screenshot below.
The Excalidraw install dialog in Chrome
Excalidraw is configured to run as a standalone application, so when you install it, you get an app that runs in its own window. It is fully integrated in the operating system’s multitasking UI and gets its own app icon on the home screen, Dock, or task bar; depending on the platform where you install it.
The Excalidraw PWA in a standalone window
The Excalidraw icon on the macOS Dock
File system access
Excalidraw uses browser-fs-access for accessing the file system of the operating system. On supporting browsers, this allows for a true open→edit→save workflow and actual over-saving and “save as”, with a transparent fallback for other browsers. You can learn more about this feature in my blog post Reading and writing files and directories with the browser-fs-access library.
Drag and drop support
Files can be dragged and dropped onto the Excalidraw window just as in platform-specific applications. On a browser that supports the File System Access API, a dropped file can be immediately edited and the modifications be saved to the original file. This is so intuitive that you sometimes forget that you are dealing with a web app.
Clipboard access
Excalidraw works well with the operating system’s clipboard. Entire Excalidraw drawings or also just individual objects can be copied and pasted in image/png and image/svg+xml formats, allowing for an easy integration with other platform-specific tools like Inkscape or web-based tools like SVGOMG.
The Excalidraw context menu offering clipboard actions
File handling
Excalidraw already supports the experimental File Handling API, which means .excalidraw files can be double-clicked in the operating system’s file manager and open directly in the Excalidraw app, since Excalidraw registers as a file handler for .excalidraw files in the operating system.
Declarative link capturing
Excalidraw drawings can be shared by link. Here is an example. In the future, if people have Excalidraw installed as a PWA, such links will not open in a browser tab, but launch a new standalone window. Pending implementation, this will work thanks to declarative link capturing, an, at the time of writing, bleeding-edge proposal for a new web platform feature.
Conclusion
The web has come a long way, with more and more features landing in browsers that only a couple of years or even months ago were unthinkable on the web and exclusive to platform-specific applications. Excalidraw is at the forefront of what is possible in the browser, all while acknowledging that not all browsers on all platforms support each feature we use. By betting on a progressive enhancement strategy, we enjoy the latest and greatest wherever possible, but without leaving anyone behind. Best viewed in any browser.
Electron has served us well, but in 2020 and beyond, we can live without it. Oh, and for that objective of @vjeux: since the Android Play Store now accepts PWAs in a container format called Trusted Web Activity and since the Microsoft Store supports PWAs, too, you can expect Excalidraw in these stores in the not too distant future. Meanwhile, you can always use and install Excalidraw in and from the browser.
Acknowledgements
This article was reviewed by @lipis, @dwelle, and Joe Medley.