alexkras.com

Building a Simple Stopwatch App with Electron

by 14 Comments

Few days ago I decided to find a Stopwatch app for my Mac. I went over to the App Store and noticed that there were no good free options available.

I thought to myself, how hard would it be to make one with Electron? Turns out, it was very easy.

Getting an Electron shell running

As you probably already know, Electron is a very popular open source framework that makes developing cross platform Desktop GUI apps very easy. It works as a wrapper around Chrome browser, so all Electron apps are just regular web apps wrapped in some magic.

Since Chrome runs on most platforms, so does Electron. Electron powers Slack, Atom, Visual Studio Code, Hyper and many other apps.

I’ve read various Electron tutorials a number of times, but never got around to building an actual app myself. I was pleasantly surprised that it took less than 2 minutes to get and run an Electron shell on my computer.

I used the Electron Quick Start project with the following steps:

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start/
npm install
npm start

This opened an Electron shell that looked as such:

Looking inside the index.html file, I noticed the following code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <!-- All of the Node.js APIs are available in this renderer process. -->
    We are using Node.js <script>document.write(process.versions.node)</script>,
    Chromium <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>

  <script>
    // You can also require other files to run in this process
    require('./renderer.js')
  </script>
</html>

So the Electron shell above was just using the content of this index.html file. All I had to do to make the stopwatch app, was to add some HTML, CSS and JavaScript inside the index.html file.

Getting the Stopwatch code

There are a lot of stopwatch examples available online. For inspiration I went to codepen.io and searched for stopwatch there. As a proof of concept I copy/pasted a random example into the index.html file (making sure to wrap it into proper <body></body>, <style></style> and <script></script> tags) and it just worked.

While other people’s example were great, I wanted to write my own version. You can see it bellow running inside Codepen. I also forked the Electron Quick Start and tracked my development in Simple Stopwatch repo on Github. There you can see the final index.html file, as well as the app.js where I implemented all of the JavaScript logic and style.css file with all of the CSS.

See the Pen stop-watch by Alex (@akras14) on CodePen.

I noticed that the default electron window was a little too big for my use case, so I modified the mainWindow = new BrowserWindow({width: 500, height: 300}) line inside main.js file to make it a little smaller.

I believe the code is fairly self explanatory so I am not going to go over it in detail in this post. Please let me know in the comment area if you would like to see a more detailed walk through and I’ll make sure to write one.

Building a native application wrapper

I used another repo called Electron Packager to generate an actual app bundle. I installed it via npm install --save-dev electron-packager. Once installed, I added the following npm script into my package.json file:

"build": "electron-packager ./ simple-stopwatch --icon=icon/stopwatch.icns --overwrite"

The parameters are:

  • The folder my app is in
  • Name that I want to use for the app
  • Icon that I want to use for the app
  • Force over-write the old app on build re-run

Running this command with npm run build would generate a /simple-stopwatch-darwin-x64 folder, inside of which I’ll have the generated simple-stopwatch.app. Finally, I just had to move the generated app into the /Applications folder and I was done.

Few additional notes. In order to generate the app icon I downloaded a free stopwatch image from pixabay.com and converted it to icns format via iconverticons.com. (A reader named Paola suggested that https://www.websiteplanet.com/webtools/favicon-generator/ might be a better tool to generate icns).

Also electron-packager was smart enough to generate an app for the right system (Mac OS in my case). I have not tried it, but I am sure that it would be just as easy to generate a working app for Windows or Linux. The only thing that would vary between platforms is the icon format. More information is available in electron-packager’s documentation.

The final product

I am pretty happy with the final product. It feels and act like a native app.

The UI is not polished, but UX does what I want it to do. It will be very easy to make it even better, since it’s just a regular web app.

Most importantly, I can see why Electron is such a popular project and why so many companies are choosing to build OS specific apps with it.

Update 07/28/2017: Some people criticized me for calling Electron a “native” app. By that I simply meant that I could run the app without having to open a browser. There are a lot of “in browser” stopwatches available, but I wanted to be able to use my stopwatch via regular app hotkeys like “Command + Tab”. Electron project describes itself as follows:

“If you can build a website, you can build a desktop app. Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS.”

I believe that whether Electron apps should be called “native” depends mainly on how “native” is defined.

Another criticism is that Electron apps are very bloated, since they have to package and run a full browser to execute something as simple as a stopwatch. This is true and Electron’s performance implications should be carefully consider when deciding to use it for a production app.

I work for Evernote and we are hiring!

Subscribe to this Blog via Email

New posts only. No other messages will be sent.

You can find me on LinkedIn, GitHub, Twitter or Facebook.

Comments

    Leave a Reply

  1. Packaging a simple app like this (that does not require any native app functions like interacting with file system or OS) with Electron is a massive overkill.. Have you heard about progressive web applications? At least on Windows and android they act like a separate application from chrome but reuse its processes and runtime so they do not have that much bloat as electron..

    Reply

    • I have heard of PWA, but not sure how they manifest themselves on Windows. I am on Mac and I wanted my stopwatch to feel like any other Mac app. I didn’t want to have to open it through my browser for example.

      Reply

  2. “As you probably already know, Electron is a very popular open source framework that makes developing cross platform Desktop GUI apps very easy.”

    This is not true, Electron doesn’t work on FreeBSD and OpenBSD. Cross platform can be GTK+ or QT but not Electron.

    Reply

    • Electron makes Windows, macOS, and Linux development converge. It’s easy to write an app with electron and let any user on those platforms use it. The incredibly insignificant market share of BSD variants doesn’t seem to be a good argument for it not being “cross platform”. It doesn’t support ReactOS, that doesn’t mean it isn’t cross platform. Instead, the most popular options are supported.

      Reply

  4. I feel like this is a great example of what electron is bad for, hear me out. Electron provides cross-platform access and a very fast development turnaround for web developer. This comes at a cost currently, the massive file size. For such a small application, the gigantic (50mb or so I think) cost of bringing along chromium is unforgivable. Such a small application (ie the stop watch one here) shouldn’t need all that heft.

    Reply

      • Fair enough! It does perfectly illustrate how easy it is to get going, great job keeping it nice and readable 👍

        Reply