Electron or how cross-platform development became effortless

Electron, formerly known as Atom Shell, is an awesome framework that lets you develop and build applications for all operating systems as seamlessly as possible! Here is how we started working with it and appreciating it!

How we came across Electron

At Theodo, we are specialised in web technologies (Symfony2, NodeJs, AngularJs) and we build apps or websites for our clients. Thus, when a former client came back to us with the project of a desktop application for Windows computers, this could have seemed far from our area of work, if not for Electron!

What is Electron?

To quote the Electron creators :

You could see it as a minimal Chromium browser, controlled by JavaScript.

To be more complete, Electron is a framework that ships a NodeJS backend used with an instance of Chromium to render web pages inside a desktop app, regardless of which operating system your app is running on.

And this is its main advantage! Forget about any problem of cross-compatibility (either between OS or browsers) that you encountered before! Your app will be running in the same Chromium version, with the same NodeJS version, regardless of the user’s computer.

Built and backed by Github, this project was at first used to run the famous Github IDE : Atom. However, it has outgrown its original use and its creators decided to separate it from the Atom project (thus the renaming to Electron) in April 2015.

Concretely, the Electron framework is based on two types of processes.

The main process

This process (one by application) corresponds to what we would usually call the back-end of our application. It handles the different renderer processes created by our app (see below for more detailed information about the renderer process) and the communication between our app and the user’s computer via NodeJS.

The renderer process

Each renderer process of our app handles the displaying of a Chromium instance in a desktop window and the rendering of our app in this window. Electron provides modules to allow communication either asynchronously or synchronously with the main process to allow direct access to Node modules.

To the difference of usual browser windows, Electron’s renderer processes thus have access to native resources of the computer.

A minimal Electron app (source: Electron’s Quick Start Guide)

For this section, be sure to have installed Electron globally by executing the following command:

$ npm install -g electron-prebuilt

To show you how easy it was for us to start working on Electron, here are the code snippets required to launch your app.

The most basic app would be structured like this:

your-app/
├── package.json
├── main.js
└── index.html

The package.json file is there to specify the main script of your app, so the minimal file would be:

{
  "name"    : "your-app",
  "version" : "0.1.0",
  "main"    : "main.js"
}

The main process of our app is handled by the main.js script. The default script given by Electron’s documentation is:

var app = require('app');  // Module to control application life.
var BrowserWindow = require('browser-window');  // Module to create native browser window.

// Report crashes to our server.
require('crash-reporter').start();

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
var mainWindow = null;

// Quit when all windows are closed.
app.on('window-all-closed', function() {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform != 'darwin') {
    app.quit();
  }
});

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
app.on('ready', function() {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600});

  // and load the index.html of the app.
  mainWindow.loadUrl('file://' + __dirname + '/index.html');

  // Open the DevTools.
  mainWindow.openDevTools();

  // Emitted when the window is closed.
  mainWindow.on('closed', function() {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null;
  });
});

With this, we have our back-end running and we only need to tell our application what to display to our user. This is done via the mainWindow.loadUrl('file://' + __dirname + '/index.html'); in the above script.

All you need is then a basic HTML page such as:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using Node.js <script>document.write(process.version)</script>
    and Electron <script>document.write(process.versions['electron'])</script>.
  </body>
</html>

Congratulations, you can now start your first Electron app by running electron . from the command-line in the app folder. It is now up to you to enrich your user’s experience!

How it helped us answer our client’s need

In addition to Electron’s minimal app, we used two very useful npm packages :

• Electron packager : this package parses your app folder and creates the files needed to launch the app on any platform that you specify
•  Electron builder : this package starts with the files generated by electron-packager and creates a single installer for OSX or Windows computers to help you easily distribute your app.

With this base in place, we could get back in our area of expertise as all that was left for us to do was to develop our app as we would have for a traditional AngularJS app (with the exception of some points due to the particularities of an offline desktop application that will be detailed in future articles).

If you ever feel like trying out Electron, here is a repository including Electron, Electron packager and Electron builder to get you up and running as fast and possible and deliver your apps on any platform! Just follow the README instructions!

Check out the Awesome Electron repository for a quick glance of some well-known Electron projects!

[joinus]