alexkras.com

  • Home
  • Top Posts
  • Resume
  • Projects
  • YouTube
  • Boots to Bytes
  • About
  • Contact

Building a Simple Stopwatch App with Electron

July 28, 2017 by Alex Kras 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.

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.


Filed Under: Front End, JavaScript, Node.Js, Software Engineering

After graduating from Front-End and React Nanodegrees from #Udacity, last week I graduated from the #FullStack Nanodegree.

I'm now looking for my next role as #FullStack Developer. I've experience working with JS (React, Redux, Node), and Python.#WomenWhoCode #WomenInTech

— Shajia Abidi (@abidishajia) February 13, 2019

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

Subscribe to this Blog via Email

New posts only. No other messages will be sent.

Affiliates

  • Apixio, Medical Startup I work for is Hiring: https://grnh.se/49e0618a2
  • Checkout Hired, if Apixio is not for you: https://hired.com/x/YjFDXP
  • Programming Interviews Exposed or anything else from Amazon: https://amzn.to/2VDTSzC
  • Linode, where this site is hosted: https://www.linode.com/?r=0c6b1d50096034351b7feb80d175d7e315cc9a96
  • BlueHost, if you don’t want to manage your own server: https://www.bluehost.com/track/akras14/
  • Coinbase, if you are into Cryptocurrency https://www.coinbase.com/join/59c3348a22766100f93d9662

Recent Post

  • One Year Without Self-Promotion January 8, 2019
  • Group Log Data by Timestamp in Python with Pandas December 23, 2018
  • Attach Remote Debugger to Jar File and Scala REPL December 15, 2018
  • How to Rollback WordPress 5 to older version December 6, 2018
  • Adding Ammonite REPL to Scala For Ad Hoc Testing November 13, 2018

Comments

    Leave a Reply Cancel reply

  1. Roman Hudec says

    August 4, 2017 at 12:57 am

    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
    • Alex Kras says

      August 8, 2017 at 10:27 am

      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. Tomek says

    August 4, 2017 at 12:53 am

    “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
    • hiimshort says

      August 5, 2017 at 4:26 pm

      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
  3. John Taylor says

    July 29, 2017 at 12:36 am

    That was the worst article I ever read. You should feel bad.

    Reply
    • Alex Kras says

      July 29, 2017 at 12:45 am

      Sorry to hear that, what was so bad about it?

      Reply
      • John Taylor says

        July 29, 2017 at 7:12 pm

        Everything.
        The fact that you even wrote something in Electron (plain Javascript is bad enough) means its shit.
        Do the world a favor and throw your MacBook out the window.

        Reply
        • Alex Kras says

          July 29, 2017 at 7:48 pm

          Haha, thanks for the feedback

          Reply
  4. Jake Hamilton says

    July 28, 2017 at 8:33 pm

    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
    • Alex Kras says

      July 28, 2017 at 8:41 pm

      Of course, this is just a silly example to demonstrate how to build an Electron App.

      Reply
      • Jake Hamilton says

        July 29, 2017 at 11:54 pm

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

        Reply
  5. Jack Shekelstein says

    July 28, 2017 at 7:51 pm

    Electron isn’t native, dumbass

    Reply
    • Alex Kras says

      July 28, 2017 at 8:40 pm

      Depends how you define native

      Reply
  6. Gennaro says

    July 28, 2017 at 6:45 am

    “native”

    Reply

Copyright © 2019 · eleven40 Pro Theme on Genesis Framework · WordPress · Log in