Getting Started with Electron

In this article, we’ll learn about Electron, a powerful framework for building desktop apps with HTML, CSS, and JavaScript.

Before anything else, let’s find out how Electron sprung into existence.

It all began with GitHub’s Atom. (Notice the chemistry?) Atom started as a Mac-only Cocoa app with an embedded webview. The developers switched to using the Chromium Embedded Framework, which brought cross-platform support to Atom. There was an unsuccessful attempt to migrate to node-webkit, and in the wake of that failed attempt, Cheng Zhao was tasked with improving node-webkit to make the move possible. The problems inherent in node-webkit mandated a new solution. Zhao’s solution was Atom Shell. Both Atom Shell and Atom editor were open source. A year later, Atom Shell was renamed Electron.

Electron combines Chromium and Node.js to allow users to build cross-platform applications easily. Electron has gained popularity due to the wide range of apps which have been built with it, from simple note-taking apps to robust IDEs, and the list of Electron apps keeps growing. A few of the apps you may have come across include: Postman, Etcher, Visual Studio Code, Atom, Slack, Skype, GitKraken, Mailspring, Discord, and GitHub Desktop. (Visit this site for a longer list of apps built with Electron.)

Why Is Electron appealing?

1. It’s HTML, CSS & JavaScript — and it’s not C/C++, C#, Swift, Python or Java. For a web developer, this is exciting because you don’t have to learn a new language to build a desktop app. “If you can build a website, you can build a desktop app” is the mantra.
2. Cross-platform compatibility: Electron apps can run on Linux, Mac, and Windows. You don’t need to maintain a separate codebase. And you also get binding to native stuff like the Touch Bar on Mac.
3. Don’t worry about the browser: Electron eliminates the bane of dealing with different browsers. You develop for Chromium only, which is up-to-date in terms of features. No polyfills!
4. Take advantage of Node: Use npm modules, Node API. Essentially, give the browser superpowers!
5. Microsoft’s got your back: Electron has Microsoft’s backing now that Microsoft is acquiring GitHub. Slack is involved too. Don’t fret!

The list could go on and on, but I’ll leave it here. Electron is well-documented, so you can read more from the documentation.

Electron architecture

Before we build a sample app, let’s discuss Electron’s architecture. Electron has two process types: main and renderer. The main process is in charge of creating application windows (BrowserWindow in Electron parlance). A BrowserWindow has an associated renderer process. The two processes communicate via ipcMain, ipcRenderer, and remote module.

How easy is Electron?

In this section, we’ll build an app that saves a message to disk and displays a system notification to demonstrate just how easy it is to build a desktop app with Electron. The complete app is on GitHub. Check it out via this link.

 // app.js
 const {app, BrowserWindow, ipcMain, Notification} = require('electron');

 let win;
 let notification;

 let createWindow = () => {
     win = new BrowserWindow({
         title: 'Electron Notify',
         width: 700,
         height: 700
     });

     win.on('closed', () => {
         win = null;
     });

     win.loadFile('index.html');
     //win.webContents.openDevTools();

     notification = new Notification({
         title: 'Message Saved!',
         body: 'The message you just typed was saved to "data.txt"',
     });
 };

 app.on('ready', createWindow);


 ipcMain.on('notify', () => {
     notification.show();
 });

The application window is created in app.js by the main process. The system notification is also created by the main process. The renderer process uses a different method to create notifications; however, the notification is triggered by the renderer process through ipcRenderer. The notification is handled by ipcMain in app.js.

// index.js




   
   
   



   

       

           
           Save
       
       
   
   

This is plain HTML and JavaScript. But notice how require is used here. Electron gives us the power of Node.

// index.js
const fs = require('fs');
const {ipcRenderer} = require('electron');

let message = document.querySelector('#message');
let save = document.querySelector('#save');

function saveMessage (msg) {
   msg = msg + '\n';
   fs.appendFileSync('data.txt', msg, (err) => {
       console.log(err);
   });

   // notify main process to send notification
   ipcRenderer.send('notify');
};

save.addEventListener('click', () => {
   let msg = message.value;
   console.log(msg);
   if (msg !== '') {
       saveMessage(msg);
       message.value = '';
   }
});

Again, this is plain JavaScript at work. But since we have access to node modules, we are able to import fs, which gives us API access to the file system, and electron without encountering a ReferenceError. In index.js, we register an event listener to the Save button, and when a user clicks it, the content of the textarea is saved to disk. A notification is shown afterwards.



Closing thoughts

Electron has established itself as a great framework for building desktop apps. In fact, it is the de facto framework in the JavaScript realm. It has reduced the barrier for entry into desktop development. It does have shortcomings—Nonetheless, there is great support and a dedicated team behind the project, ensuring Electron will only get better and better. Try writing your next desktop app and see how much easier and fun it is. Happy building 🙂