Getting Started with Electron

Let’s build a cross platform apps with Electron, with the languages you already use in your daily work. They are HTML, CSS and JavaScript. Intermediate knowledge of JavaScript is enough. I assume you already know, how to use node and it’s npm packages. You are good to go to create your first desktop application.

I thought a single tutorial would be enough to cover Electron. To cover create desktop application. But it’s good to have a general idea first. Before we get lost in the coding, lets create the why. That’s why this article is dedicated to the Introduction to Election, an app framework.

Why Electron

It’s here because Github in attempt to create Atom Editor. This and it’s has a great community which ensures it’s not going anywhere and will continue to grow.

Electron is an app framework that gives us best of two worlds i-e node and chrome. The node handles the file system and operating system. Chrome handles the UI and JavaScript execution. 

This image shows how we can have best of both worlds i-e node and chrome using Election app framework to build cross platform
Chrome dev tools has access both to the Node and Chrome objects

What is in for me

As a Frontend or Web Developer you are already building websites. This means you have covered the UI or the chrome part. Why don’t just put a little extra effort and utilize Electron and create desktop application.

Here is some reasons when you should build cross platform apps

  • You can have access to file system. 
  • you might have a node package or CLI tool and with electron (as an app framework) you can make a UI interface,
  • It’s just one code base 
  • Plus think of all the benefits you have when you think of hybrid mobile apps

Some Gotchas

We as web developers know how it feels when you create cross browsers apps. Especially when you remember Internet Explorer. (it’s still there but now updates much faster). And all the quirks it comes with.

Same things happens when you build cross platform apps. Each OS has its own specific quirks. 

What’s Next

Next I will cover how to setup the environment and familiarize with basics of electron  app framework.

One reply on “Getting Started with Electron”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.