In this article, I’ll share how you can avoid some of the mistakes I made when learning about Electron.js. I hope it helps!

A couple of months back, I decided to focus more on building my side product, taggr. I was inspired to build it because of how many photos I have on my computer.

For those of us that keep a backup of their pictures, those collections often get so big and complex that they become a full-time job to manage. A mix of folders and sub-folders may contain instant messaging picture backups, hi-resolution pictures from your trip to Bali, your uncle’s wedding, or last-year’s bachelor party.

Always keeping such collections tidy is tedious (believe me, I have tried for years). It’s also hardto discover the shots that you love the most, hidden deep within the folders.

So taggris a desktop app that solves that problem. It lets users rediscover their memories while keeping their privacy.

I am building taggr as a cross-platform desktop application. Here I’ll share some of the things I’ve learned about cross-platform app development with Electron.js that I wish I knew from the beginning. Let’s get started!

Background

Before presenting my takeaways on this ongoing journey with Electron, I would like to give a little more background about myself and the requirements of taggr.

Every developer comes from a different background, and so do the requirements of the applications they develop.

Contextualizing the choices I made for this project may help future developers select the right tools based on their needs and expertise (rather than what is hyped out there – GitHub 🌟, I am looking at you).

J

As mentioned earlier, from the beginning I envisioned taggr as a cross-platform application. The app would perform all the required pre-processing and machine-learning computations client-side due to the focus on privacy.

As a one-person show, I wanted to be able to write my app once and ship it to different systems without losing my sanity.

From my side, I am a front end engineer in love with the web and JavaScript. I previously worked with Java and C#, but I enjoy the flexibility that the web provides and its vibrant ecosystem.

Having experienced first hand the pain of using tools like Eclipse RCP to build client-side apps before, I knew I didn’t want to work with that tech again.

In short, my stack requirements for taggr boiled down to something like the following:

• It should provide cross-platform support, ideally at the framework level.
• It should allow me to** write the code once**, and tweak for each platform if needed.
• It should enable access to machine-learning capabilities, regardless of the host environment, without specific runtimes to be installed. It should be painless to set up.
• If feasible, it should use web technologies. It would be great to leverage my existing knowledge.

As you can see, the requirements do not read as: I should use React with Redux, observables, and WebSockets. Those are lower-level implementation details, and they should be decided upon_ when and if_ the need arises.

Pick the right tool for the job rather than picking a stack from the beginning, disregarding the problems at hand.

So, after furious googling, I decided to give Electron a try. I hadn’t used that framework before, but I knew that many companies were using it successfully in products such as Atom, VS Code, Discord, Signal, Slack and more.

Open-source and with out-of-the-box compatibility with both the the JS and Node ecosystems (Electron is build using Chromium and Node), Electron.js was an attractive tool for the work at hand.

I won’t go too much into detail regarding the rest of the stack, as I repeatedly changed core parts (persistence and view layers) when needed, and it falls out of the scope of this article.

However, I would like to mention Tensorflow.js, which enables running training and deploying ML models directly in the browser (with WebGL) and Node (with C bindings), without installing specific runtimes for ML in the host.

So back to Electron – thinking it was perfect, the fun began.

Enough talk about the background. Let’s dive into the takeaways.

#electron #electron.js