David Wells

Full Stack Developer

Focused on UX/UI, Growth
& Product Development

What is Electron & What can developers do with it?

Published on Edit this post

Quite simply put, electron is a way for developers to use HTML, CSS, and JS to create cross platform (Mac, PC, & Linux) desktop applications.

But it's much much more than this.

To me, electron opens the door to building applications where the browser falls short.

Electron gives you access to everything you are used to in the browser AND grants access to the lower level operating system through NodeJS.

#Why it matters

electron desktopElectron grants some serious power that the browser simply will not provide.

There are certain limitations a browser has due to security concerns. Imagine any website having read/write/delete access on your machine. That would be bad new bears.

Electron marries the browser with your system's Node instance and gives you, the developer, some pretty powerful tools to create amazing app experiences.

#Use cases

Don't like your browser? Build a new one like brave

Don't like your git client? Build a new one.

Don't like your text editor? Build a new one.

Need nontechnical folk to use your CLI tool? Build a GUI on top of it with electron.

The possibilities are endless.

  • Read/write files
  • run custom binaries
  • run shell scripts
  • run AppleScripts
  • ... you get the idea

#An example app

I've been working on some electron applications recently and I am insanely impressed with how straightforward it is to use coming from a web and node background.

I needed a video picture in picture app that stays on top of all windows for some video tutorials I am creating.

So I built it!

The final app is around 100 lines of code.

10 lines of React to render the built in browser webcam.

100ish lines for running the main electron process & window (which could be smaller but I left some comments in there for teaching others some electron goodies.)

and the index.html file which loads the React App and runs the webcam script

Clone it down, npm install, and npm start to run it!

If you'd like to build the actual application run npm run build

video-app


#What will you build?