Image by Electron

Electron for Desktop Apps?

Electron is a tool used widely for web-apps, but is it really any better than alternatives?

Posted by Joseph Keane on August 14, 2019

Recently, me and Michael decided to make a desktop app. There are a lot of API’s in place for this kind of thing – Java Swing or JavaFX, Microsoft’s systems for C# and C++, QT, Avalonia and even Unity could be used if it comes to it.

But we ended up choosing Electron as it had good support and lots of well known applications like Discord make good use of it. When starting with Electron, as with anything, it took some work to get it functioning, but with just a little work it was up and we had it working. As electron is sortof like a mini-browser, we had to decide on a web framework to use. A popular and professional one seemed like Angular, so we decided to use that. It made use of HTML, CSS and Typescript primarily, but we knew and could learn enough to be able to work it out.

It manages software packages using a tool called npm. I found it really useful as it always seems to just work. After some initial problems with getting them to work together, we found we just had to specify to use a specific electron version. Then it came to actually building the application.

By using Angular Material, we were able to build the UI itself very neatly. However, there was more trouble in linking the pages. Angular uses a router system, but strangely the URLs to tell it where to route to went through a different compilation process that restricted the code that could be applied to it. As we were trying to automatically generate them, it posed a challenge and we were forced to make a slightly more complex table to pass directly and access that when we need data.

Angular also has a neat feature that allows you to create sub-module type structures and include them in the HTML. This allowed us to exchange that and make a really efficient way to tell pages what to display by passing some variables and making a content HTML.

Once that was all done, the last step was linking up to an http database we had. However, being web-based, we could use AJAX which made the process extremely simple.

So, in the end most of the work ended up being on Angular rather than Electron itself. However, web has become so popular, there are plenty of frameworks you can use to make it look and work right. In addition, it can always be hosted as a website too. So if you’re looking for a Web App tool, so long as you can handle some Web Dev, Electron is a great choice with lots of flexibility.



Joseph Keane

Black-Photon