A weekend with Electron

Admittedly I found myself being a little hung-over on Saturday. With no bigger plans for the day I decided it would be just the right time to finally tinker with electron a little. I always wanted to find a moment to look into it.

What’s electron?

Electron helps you build cross platform desktop apps with the use of JavaScript, HTML & CSS. That’s right: Use your web development ninja skills and create beautiful computer apps in almost no time. Without the need to learn the native programming language of your favorite operating system. Mine being OSX, but Windows and Linux are supported as well.

Electron is made by the people that also built the Atom Editor from GitHub. It has been around for a couple of years now: In May 2016 the developing team announced Electron’s 1.0 release. I found a v0.34 release on my disk so my first step was to update to the most recent version.

The documentation is done very well and there are lots of great tutorials and code snippets out there to get a glimpse of what’s possible. What got me started was this really short but very helpful “Essential Electron” article by Jessica Lord.

Whenever looking into new programming languages or technologies I try to create something useful out of my learning experience. Best case scenario it is something of value or help to other people too. Often this does not necessarily mean I have to invent new stuff. It’s enough to move an existing great idea by someone else into new or uncharted territories. (If the thing I modify has an open source license or creative commons attribution attached!) I always try to make an effort in a README file or something alike to ensure as clear as possible what’s mine and what’s theirs.

So, what exactly did I do this weekend ?

Two more things, and I tell you shortly.

One: I’m interested in this cryptocurrency thingie. “Bitcoin” and the “Blockchain” — yeah, you might have heard of it! Since some time there’s this really slick website called preev.com online. It lets you calculate BTC and the like into different other currencies. If I understand correctly, it takes recent transactions and exchange rates of different APIs and averages them into a medial exchange rate. I love the site’s simplicity and ease of use.

the preev.com website

I tried to reach out and find the owner/creator of the project but without any success. (Hey, if this is you please feel free to get in touch!)

Two: I’m a big fan of the (OSX) Menubar.

Menubar back in the days…

A lot of useful apps reside in the upper right corner on my computer that help me being productive: Spectacle, ColorPicker2, Dropbox, F.lux just to name few.

So keeping these two things in mind, I thought it would be totally awesome to have preev.com accessible from within the menubar.

And voilà… that’s exactly what I built with electron!

Meet preev-menubar, or “PreevApp” a simple cryptocurrency calculator available in your OSX menubar. (You should be able to compile it in Windows or Linux too.)

The little app I built is based on a very sophisticated electron package called “menubar” that lets you create menubar apps out of the box. I had to update a couple of dependencies but that was it. Bringing up a remote webpage within my app’s main window was a piece of cake too.

As mentioned above electron has a very comprehensive documentation for almost everything you need to know. Anything else that I learned in the rather short time was from a handful of google searches. Also looking at the issues of some electron github repos did the trick. Kudos to all you developers who write easy to understand READMEs that actually do tell everything one would need to know to use your code!

Since all this was so much fun and took me only about two hours on Saturday I started working on a bigger project right away on Sunday morning. I might report about that one in another article.

For now, I’d conclude by saying that electron is awesome! If you know your 2cts of web development you should check it out too!

I recommend following @ElectronJS on Twitter and of course invite you to follow me (@herrhelms) too. If you’re interested in using the preev-menubar check the github repo to learn how to get it running on your machine. If you need any help let me know!