Nona Blog

First Steps With Electron

This week, I was tasked with putting together a desktop application that could be easily updated, be installed cross platform, and could provide a GUI, as well as create a WebSocket server that other clients on a LAN could connect to.

Initially, a Chrome Packaged App was mentioned as a possible direction to look into. However, it would appear that Chrome Apps Are Not A Thing Anymore on Windows and MacOs.

We use React/Angular and Node.js quite a lot, so it would seem to make sense to leverage those technologies if possible as it would allow people with front-end experience in that realm (most of our company) to jump in and work on various aspects of the application easily, while not creating a codebase that’s wildly different from most of the other projects.

Bearing in mind those points, Electron seemed like a good candidate to check out. Slack’s desktop client and VS Code are built on top of it, as well as Atom (which, to be fair, I stopped using as it would hog all my RAM).

Image via

My thoughts on the whole experience so far:

  • Electron apps by default bundle Chromium, so, even a ‘hello world’ app is not going to be small.
  • It was super easy to get an app up and running, built in this case for macOS. I don’t have the biggest background in javascript, and I had a desktop app running on macOS, with the WebSocket server running in the background, after a day or so.
  • The main app was a simple Angular app, and to get that running with Electron was not too difficult.
  • Getting the WebSocket server (a Node process) to launch on app launch took a little reading up on, but I got that working with child processes. Communication between the main and the child process was accomplished via Inter Process Communication, although I think another approach might be to use a hidden window in Electron.
  • `electron-packager` can really bundle a lot of unnecessary stuff if you have multiple `package.json` files in sub-directories. The `— ignore option` is your friend with regard to making sure your packaged application isn’t massive.
  • Performance seemed pretty snappy, and the memory footprint wasn’t prohibitive to the use case.
  • It will be interesting to see if I still feel as positively about this in a week. I’m not 100% sure yet that using this technology is the way to go, but, given what we want to achieve, and the technologies we are currently using, it seems like a decent fit for this scenario. I think it’s likely that Progressive Web Apps will probably kill Electron in the future, and that to me is a bit of a worry. Right now, we can’t achieve what we want on the Desktop with a PWA for this scenario, at least as far as I can see. I guess I need to do a little more research still.

Thanks to James Gareth Smith. 

Nona designs and builds intuitive software for FinTech businesses. If you’d like to accelerate your FinTech project, book a consultation with us!

Jon Arnold

Senior Fullstack Developer - Nona