Universal Desktop

If the boss orders a cross-platform desktop app for internal use, stressed IT staff often lack the time to get familiar with C++/Qt, Java, or Python and the associated application packaging. The Electron project [1] solves this problem by making a desktop app more like a web app. Electron combines Chromium [2] and Node.js [3] into a single run time, thus allowing the developer to build the application using the standard tools of web development, such as HTML, CSS, and JavaScript. The cross-platform nature of web development makes it quite easy to adapt your application to run on Windows, Mac OS, or Linux, and Electron even comes with tools that will package the app for the target OS.

Electron applications even update themselves automatically. Updates are retrieved from known sources, such as a GitHub repository, via an update server.

Electron began in 2013 as the framework for building GitHub's Atom text editor. GitHub open sourced Atom and Electron in 2014. Electron has an MIT license. Version 1.0.0 was released in 2016, and as of this year, it is available in Windows and OS X app stores as well as Linux repositories.

Bold Design

An Electron app works like a web application but in the reduced browser environment outlined in Figure 1. The Chromium components execute the application (top right in the picture). JavaScript libraries such as Bootstrap [4], React [5], Angular [6], or JQuery [7] contribute to the complete package.

Figure 1: The main process replaces the browser kernel as a freely programmable framework with a system connection.

Because the code within the application always executes using the Chromium run time, Electron avoids the possibility of problems arising from dissimilar browsers or browser versions. Developers also benefit from the debugging tools that come along with Chromium (Figure 2).

Figure 2: Electron developers can call upon the help of Chromium debugging tools.

The main process manages the browser window. The Node API facilitates the connection to the desktop operating system. The developer can extend the Node environment by adding additional node packages.

Installing a Framework

Electron, the boilerplate project, and a set of tools used with Electron, including electron-packer, electron-builder, or electron-forge, all take the form of node packages. Listing 1 installs Electron and all the tools a developer needs to pack the Electron apps onto a Ubuntu 16.04 node. Line 1 installs git and curl via the package manager; line 3 installs the latest version of Node.js. The necessary package list is created by a Bash script, which curl retrieves in line 2, under /etc/apt/sources.list.d/nodesource.list, and then updates the list of available packages via apt-get.

01 sudo apt-get install git curl
02 sudo curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
03 sudo apt-get install -y nodejs
04 npm install yarn
05 sudo su
06 # it also works without Yarn with: sudo npm -g install electron-forge
07 yarn add global electron-forge

After nodejs in line 3, the script inserts the alternative node package manager, Yarn [8], one line later. With root privileges, Yarn then installs electron-forge [9] (line 6).

Empty Stage

Electron has a number of boilerplate projects [10] that accelerate the development process by providing an minimal executable app out of the box. These projects internally use electron-packer to create the Electron application and electron-builder to packetize platform-specific formats. electron-forge, which is installed in Listing 1, offers the best combination of both tools. It also comes from the workshop of the creators of electron-packer and electron-builder. The forge shell command makes use of electron-forge.

The life cycle of an app starts when the developer taps the forge init app command into the keyboard. This command creates the app project directory from Listing 2 in the style of a boilerplate project. As with any node app, the node_modules directory stores all packages listed in the package.json configuration file – in the latest version.

01 |- app
02   |- node_modules
03   |- package.json
04   |- src
05   |- yarn.lock

Finally, the src directory stores the minimal web app, which the developer then converts step-by-step into the desired application.

Initially, the directory contains the index.html HTML document and thus the entire web app, as well as the index.js file. The programmer checks the development progress by switching to the app project directory and entering the forge init start command. Since a watch process like Angular is missing, a location.reload() reloads the app via the debugging console.

Figure 2 shows the started app at run time. The debugging tool appears in the Chromium window on the right side of the screen by default. In the final version, the developer has to remember to disable the debugging tools in the main process code.

The yarn.lock file from line 5 in Listing 2 remembers the currently stored packets under node_modules. This mechanism makes it possible to reproduce node projects on other machines on a scale of 1 to 1.

Porting

You can port the boilerplate app from Figure 2 to other desktop systems using the forge package command. Without specifying options, the command (under Ubuntu 16.04) creates a standalone version for Linux and the existing x64 processor architecture in the out/app-linux-x64 subdirectory of the app project folder. In addition to the approximately 80MB executable app in ELF format, this directory also contains other binary files. You will find the web application and the required node packages under resources/app. After switching to the directory, the ./app command starts the app in the shell, which looks exactly like Figure 2.

You can port the app to Windows using the --platform command-line switch in the forge package --platform win32 command. This command creates the app for 64-bit Windows in the out/app-win32-x64 folder. In addition to the executable app.exe, the distribution contains a large number of Windows DLLs and the resources folder, which is more or less bit-identical to the matching folder for Linux.

If you copy the folder from Linux to a Windows 10 system and start the app, you won't see any notable differences with Figure 2. Conversely, you could install electron-forge under Windows 10, and, in that case, the Linux app created under Windows will run under Linux.

You can assign a processor architecture with the arch command-line switch. Table 1 shows the possible combinations of values for platform and arch.

Packing

forge offers to create platform-specific package formats or installers to facilitate easy distribution of the app (Table 2). forge make generates a Debian package for the Boilerplate app. However, the script terminated in our lab while trying to create an RPM package, with the error message from Figure 3. sudo apt-get install rpm fixed the problem.

Figure 3: Starting rpmbuild as a separate process using spawn failed at first because rpm was not yet installed.

Similar scenes occurred while trying to create a Windows installer with the forge make --platform win32 command. In this case, .NET support was missing:

sudo apt-get install mono wine

Under out/make/squirell.Windows/x64, you will find the app-1.0.0 Setup.exe installer file, which we were able to install on Windows 10 without any problems.

Listing 3 displays the configuration object [11] from the package.json file as a portal. Lines 2 to 13 contain the package formats to be generated in the make_targets sub-object, listed by operating system.

01 [...]
02 "forge": {
03  "make_targets": {
04   "win32": [
05    "squirrel"
06   ],
07   "darwin": [
08    "zip"
09   ],
10   "linux": [
11    "deb",
12    "rpm"
13   ]
14  },
15  "electronPackagerConfig": {
16   "packageManager": "yarn"
17  },
18  "electronWinstallerConfig": {
19   "name": "app"
20  },
21  "electronInstallerDebian": {},
22  "electronInstallerRedhat": {},
23  "github_repository": {
24   "owner": "",
25   "name": ""
26  },
27  "windowsStoreConfig": {
28   "packageName": "",
29   "name": "app"
30  }
31 }
32 [...]

Conclusions

Electron makes it easy to create desktop apps using popular web technologies such as HTML, CSS, and JavaScript. At the same time, Electron offers an infrastructure that can port apps to other systems via the command line.

Compared to Cordova Phone Gap [12], the installation is trivial, even if support for mobile operating systems such as Android or iOS is currently missing. If you want to be on the safe side, simply pack on the target system each time and test the app immediately.