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.
Top comments (10)
When I was first working on my Electron app, I found this blog really helpful. It breaks down a lot of small things that can make an Electron app look and feel more "native". Many of these things are lesser known APIs provided by Electron that could take a lot of time otherwise to sort through.
Good luck on your project!
Nice, will give it a look. Thanks!
I'm really interested in the development of Glitter if you're posting more in the future. Is there any way I can follow Glitter's development?
Hey Shaun, I am sharing the development progress with email subscribers. I see you have already subscribed (or some other Shaun did ? :)), so expect to be notified :)
I will also be posting some things here on Dev.to
If you think that's not enough, let me know. Maybe you have a better suggestion?
Yup, I am! Can't wait for more email updates. Will be following you as well just in case I miss anything. I think it's more than enough channels, so thank you so much!
All the best on this journey! :)
I like your project, but I don't think you really answered the concerns about electron? I get it if you don't care, but this is an app where having the whole runtime is a bit of a hog since you'll have it open all the time. Seems like you just didn't want to learn a desktop language, which is fair, the GUI stuff I've done in C and C++ was terrible.
On another note, you couldn't find good widgets on Linux? I'd guess it's more of an Ubuntu problem but the widgets I've used on arch and other distros looked great. Lmk if you want suggestions, I don't like anything being on my desktop but I think I have an old conf file somewhere. I ended up doing polybars instead.
Hi, thanks a lot for your feedback, appreciated!
My main reason for the project is actually reducing barriers for people who want to make their desktop pretty.
I am aware that there are various ways to craft some widgets even on Linux (for example Gnome widgets, which can also make use of web technologies).
The trouble is that:
I am aware that the performance will not be the same as writing a native solution. However, writing a fully native, polished app for each OS would take me years.
In this case, I think the benefits outweigh the drawbacks. Electron is getting constant updates and some further optimizations will surely come in the future. Once the Glitter project validates the need for a solution like this, I can start looking into optimizing/rewriting it. Right now, I don't think it would make sense.
great
Thanks :) Have you played with Electron yourself before?
Feedback is more than welcome. Extra points for liking the cheesy joke from the example desktop :D