Trying out Electron

January 2nd at 12:00am

Within the next year or so I would like to be using Linux as my full-time desktop. To get there I need to find a development platform that lets me create small, stand-alone, cross-platform GUI tools. While scripts are great, sometimes things can be a lot easier with a GUI.

One contender for this development framework role comes in the form of electron: a cross-platform development framework that lets you build desktop applications using HTML, CSS and JavaScript. I decided to take it for a spin and used it to create a small tool to examine a note taking database I exported from an old BlackBerry app.


References


Initial Setup

It took me awhile to get properly setup with Electron, partially due to my unfamiliarity with NodeJS as well as partially due to my desire to package Electron apps to work across platforms. My initial foray into building the electron-quick-start application on Running the package on windows ran into problems when I couldn't unzip the compressed archive on windows due to this error:

The specified path, file name, or both are too long

Another big challenge in getting my dev environment setup for Electron is that most of the tutorials and videos 'out there' on the internet are out of date. Electron moves fast- if you stray from the official docs or look for outside help you may end up with more questions than answers.

One final note on getting setup: Be sure to install NodeJS 6 or higher. Things will go a lot more smoothly if you do!


UI Development

This was not fun. It took forever to create a horrible user interface that looks nothing like the user interface of a real, native application. To be fair, I am not a UI designer and front-end work has always been tedious for me. With that said I have had far greater success in putting together functional user interfaces using WinForms in C#. When I create a utility I want a UI that is easy to piece together that doesn't exhibit any 'gotchas'

Worth noting here: you can't just 'include' jQuery and expect it to work out of the box in your application. I struggled for quite awhile without any real indicator of what was going wrong until I stumbled across this StackOverflow question that described my problem exactly. There is some fiddling you need to do to get jQuery working in Electron, and while it is not a whole lot of work I was blindsided by it.


Cross-platform packaging

I mentioned above that packaging for non-linux platforms was a bit tricky for me. The instructions for packaging and distributing Electron applications leave a lot to be desired for new users (at least in my opinion). Being new to the platform it was hard to really wrap my head around what is needed to successfully package and distribute applications across platforms.

I'm not one for 'magic' and prefer to understand the end to end process to write, package and successfully distribute applications no matter the framework. Eventually I settled on accepting some degree of magic so I could move forward and sample the experience. electron-packager proved to be invaluable in getting cross-platform packaging working. While it is a bit rough around the edges, it gets the job done!

When working with electron-packager, you might notice that your package is missing its node_modules. If you do encounter this problem, passing the '--no-prune' flag seems to do the trick. This problem went away for me once I moved to NodeJS 6 instead of relying on my Linux Distribution's built-in Node version.


Final Thoughts

Electron works as advertised: I was able to create a stand-alone utility with a GUI that can run across all the platforms that Electron supports. My set of target platforms is included in the supported platform matrix (modern/recent versions of Windows, Linux and Mac). There are a tonne of modules available for NodeJS which makes getting things done pretty easy. I was even able to find an SQLite library written entirely in JavaScript which greatly simplified the cross-platform deployment of my application.

With all that said, I am on the hunt for a cross-platform development environment that makes it easy to design a simple GUI that ties back to utility code. The UI I was able to put together for my note viewing application is more ugly than just about anything else I have ever seen. Creating the UI was the hardest part because I had to deal with HTML, CSS and JavaScript to pull it off. Coming from a WinForms/.NET background, this was more than a little tiring. The goal is to create a usable utility with a basic UI: this shouldn't take forever.

Another problem I have with Electron is the size of the resulting executable package: 145MB for a simple application that reads an SQLite database and displays text. If I am going to create a number of utilities I'd like to have a greater application/MB ratio. Realistically this is a fairly minor quibble: Disk space is cheap, and unless you are running the most bare-bones MacBook (128GB Storage at the time of this writing) you are likely not going to care as long as the download is quick.

If you are skilled at creating applications using web technologies and want to venture into creating Desktop applications, look no further than Electron to meet your needs. If you are not so great at WebUI development and want to create presentable applications, it might be best to look elsewhere.