The biggest dream of a customer is the approach Develop Once – Run Anywhere that means that you pay once for the development and get an application for three platforms at once: “Windows”, “Linux”, “Mac OS”.

In 2013 NodeJS made a revolution in the world of web development. The model accepted in it differs essentially from the greater part of widespread platforms. The core of NodeJS is a standalone JavaScript virtual machine with enhancements which make it suitable for general-purpose programming. In 2015 GitHub developed simultaneously a word processor Atom using NodeJS and framework Electron which is the basis of Atom.

Electron embodies a version of NodeJS that is intended to operate in operational system environment, browser Chromium engine and general purpose libraries.

At present (21.12.2016) Electron consists of the following components: Electron 1.4.13, Node 6.5.0, Chromium 53.0.2785.143, V8 5.3.332.47. Electron enables developing an application logic via NodeJS and realizing representation using such web-technologies as HTML, CSS, JS. V8 engine and NodeJS allow implementing the same code on Windows as well as on Linux/Mac OS. Now we will analyze the process of developing a simple Electron application using WebStorm. Create an empty project NodeJS.

Call the command:

npm init
npm install –save-dev electron-prebuilt fs-jetpack asar rcedit q

Will create 2 “package.json” files. The first provides with electron packages, and the second one is placed in app folder and provides packages for the usage of the application itself. “app/main.js” is the main point of entry into the application. For a start we will determine the basic modules which we need to launch an Electron application:

1) Application life-cycle management module:

var app = require(‘app’);

2) Browser window management module:

var BrowserWindow = require(‘browser-window’);

3) Browser main window management module:

var mainwindow = null;
Then we will define events activated by the application:
app.on(‘window-all-closed’, function() {
	if (process.platform != ‘darwin’) {
	app.quit();
}
});

Here, when all windows are closed, we will close the application, except for Mac OS where applications do not close upon the closing of windows.

app.on(‘ready’, function() {
	mainWindow = new BrowserWindow({width : 800, height : 600});
	mainWindow.loadUrl(‘file://’ + __dirname + ‘/index.html’);
	mainWindow.on(‘closed’, function() {
		mainWindow = null’
});

When the application is ready to be opened, we create a browser window and download the view from index.html.

<html>
	<body>
		<h1>Hello World!</h1>
	</body>
</html>

Launch the application from command line using the following command:

electron app

AngularJS is used within the approach of building MEAN application to realize NodeJS applications front-end part. Also it can be exploited as a framework for GUI development for Electron. However we get a question: how could we achieve interaction between AngularJS and Electron? And the answer is “ipcMain” Electron module.

var ipcMain = require('electron').ipcMain
ipcMain.on(‘getSomething’, function(event, arg) {
	event.returnValue = ‘something’;
});

In front-end part we can use this approach with the help of the following code:

var ipc = require('electron').ipcRenderer;
var response = ipc.sendSync('getSomething');
console.log(response);

This code as a result makes the front-end part to send a call to ipc for “getSomething” method, which writes ‘something’ into the value that this function will return. On the last stage something is output to browser console. Thus we established the mechanism of communication between front-end and back-end, which enables designing the architecture on the basis of corporate application integration templates using the communication mechanism.

The application has been developed. What’s next to do? We need to assemble the application to enable launching it as an individual independent .exe without open source code. To carry out the assembly we need to develop a script that copies the main Electron part, cleans runtime from unnecessary files, creates archives and updates the resources.

function copyElectron() {
    console.log('Copying electron' + projectDir.path())
    return projectDir.copyAsync('./node_modules/electron-prebuilt/dist', buildDir.path(), { overwrite: true });
}

function cleanupRuntime() {
    return buildDir.removeAsync('resources/default_app');
}

function createAsar() {
    var deferred = Q.defer();
    asar.createPackage(appDir.path(), buildDir.path('resources/app.asar'), function () {
        deferred.resolve();
    });
    return deferred.promise;
}

function updateResources() {
    var deferred = Q.defer();
    projectDir.copy('resources/windows/icon.ico', buildDir.path('icon.ico'));
    var rcedit = require('rcedit');
    rcedit(buildDir.path('electron.exe'), {
        'icon': projectDir.path('resources/windows/icon.ico'),
        'version-string': {
            'ProductName': manifest.name,
            'FileDescription': manifest.description,
        }
    }, function (err) {
        if (!err) {
            deferred.resolve();
        }
    });
    return deferred.promise;
}

function rename() {
    return buildDir.renameAsync('electron.exe', manifest.name + '.exe');
}

gulp build

On return we get EXE file, which can be launched on Windows, Linux or Mac OS platform.In the summary of our article we can include writing the basic structure of simple Electron application, which shows Hello World HTML page, description of the mechanism of communication between Electron and Angular and process of assembling .exe without source code.

Thanks for reading.