TL;DR: I am building a desktop app with Electron. The app allows anyone to create widgets for their desktop with HTML, CSS and, optionally, JavaScript. Check it out here. In this article, I am sharing my first impressions, but also some struggles I had to overcome while working with Electron for the first time.

I have been using Ubuntu for most of my development career. What bothered me a lot was the lack of ways I could customize my desktop. On macOS, there exists Übersicht. On Windows, Rainmeter is very popular. Yet on Linux, I am stuck with pre-made widgets from various desktop managers that often look outdated. Even if you are lucky and use macOS/Windows, I found the experience with popular tools is not very user-friendly. I want to be able to write some HTML and CSS that I know how to use and create something beautiful on my desktop, without the steep learning curve.

Be the change you wish to see in the world

I decided to do something about this, and I think you'll like it. I am building Glitter, a tool for almost any OS that allows you to create (or use others') widgets with the technologies you already know - HTML, CSS, and JavaScript. Glitter widgets will be hosted and reviewed on the Glitter platform, making it easy and secure to distribute all kinds of widgets with the world.

Enter Electron

I decided to use Electron for building the app. It's popular to hate on Electron in some circles because of the size of the final application (it includes both Node.js and Chromium runtimes) and memory usage. I think it's an invaluable tool that even further expands the reach of web technologies. It also empowers people like me, who are not versed in "desktop" languages, to create something for the platform. Popular apps powered by Electron include Slack, Discord, VS Code, etc.

First Electron impressions

Getting started with Electron was fairly straightforward. I decided to make use of Electron Forge. They offer a CLI to kick-start the development and also provide handy tools for packaging your application. One other cool thing is the support for Webpack out of the box. If you are going to try it out, I suggest also joining the official Atom slack channel, which includes the #electron channel. The author of Electron Forge hangs out there (but also many other helpful people).

In Electron, the entry point for your application is the main process (basically a Node.js script). From there, you create as many renderer processes (browser window instances) as you need. This was immediately clear to me and it made sense. It also allows for a standard separation of concerns I am used to, where I have a backend (in this case the main process), and a frontend (renderer). I am using React for powering the UI, but Glitter widgets will come with a widget generator that supports Vue.js and React (more after the MVP).

Electron is being updated very often. The team is working hard and keeps introducing very handy features. For example, in version 7.x they introduced a much faster IPC method (basically a way for you to pass stuff between the main process and the browser window instances - it was already supported, but it had some issues).

It's not all roses.

Even though Electron is fairly well documented, I have run into a lot of things that simply don't work as expected.

For example, for my use case, I needed to spawn transparent, borderless windows for each widget. Doing so on Ubuntu by simply following the documentation and passing options to the BrowserWindow instance did not work at all. I instead had to set an arbitrary timeout of 500ms after the start of the application, and only then the option worked.
For some other options, setting them in the constructor never works, however calling the setter for that option after instantiating window, for some weird reason works

I am impressed with what's possible

I really enjoyed my time with Electron so far. I am super thankful for the team maintaining it and I wish only the best for the platform. It brought us many nice apps and will hopefully continue to do so in the future.

If you have any questions about development with Electron, feel free to drop a comment. I plan on writing about using TypeScript for Electron development, as well as how I decided to structure my code.

Also, don't forget to check out the app I am building. I welcome any feedback on that as well, of course.