Creating a desktop application with Electron and web technologies

Meet Electron

The official page of the project Electron .

Electron was originally developed for Atom by GitHub.

Electron (formerly known as Atom Shell) allows us to create cross-platform applications using HTML, CSS and JavaScript. Which is a big plus for web development teams. There is no need to search for new developers to create desktop versions of existing projects.
')
Electron is a precompiled binary and libraries needed for the application to work and access to the native operating system API. It includes Node.js, aimed at working in the desktop environment, and the minimum version of the browser Chromium, controlled by JavaScript.

Thus, it is nothing more than an environment in which our web application will be executed.

Currently Electron v0.35.0 includes:

• Node: 4.1.1
• Chromium: 45.0.2454.85
• V8: 4.5.103.294

An alternative to Electron is the NW.js project (formerly known as node-webkit). You can read about the differences here .

I want to mention one more, in my opinion, a plus, which gives us the development of desktop applications using web technologies - the absence of restrictions in creating the user interface.

The user interface is the web page we created. In this case, we are not limited to the system set of interface elements of our platform and we can create the necessary UI elements using web technologies. And given that in the box we have one of the most advanced browsers, we can use the latest web technologies.

I assume that you will use your main text editor (or IDE), and you have Node.js / npm installed . I also hope that you have knowledge of HTML / CSS / JavaScript (knowledge of Node.js would not hurt, but is not mandatory) so I can not worry about your understanding of creating web pages. If there is no such knowledge, then you will probably feel somewhat lost, and I recommend that you first learn the basics of web development.

So, how does Electron work.

The entry point is the main file defined in the package.json file, which is exactly what is executed when your application starts. In this main file (commonly called main), application windows are created in which web pages are rendered and displayed with the additional ability to interact with the native GUI of your operating system. The process that runs the main script is called the main process.

Electron uses Chromium to display web pages; Chromium’s multi-processor architecture is also used. Each web page in Electron is launched in its own process, which is called the renderer process.

In a normal browser, web pages are launched in a closed environment (the so-called sandbox) and do not have access to native resources. Electron users, however, have the ability to use the Node.js API on web pages, having access to interaction with the operating system at a low level.

Based on what we already know, to create the simplest application, we need only three files:

package.json
main.js
index.html

Write a simple application Hello world

Our first application will display information about the versions of those parts that are included in Electron.

Package.json in our case will look like this:

{ "name" : "electron-simple-app", "version" : "0.0.1", "main" : "main.js" } 

"Name": "electron-simple-app" is the name for your application;
"Version": "0.0.1" is its version, respectively;
"Main": "main.js" - and the main script.

If the main field is not specified in pakage.json , by default Electron will try to load the index.js file.

In main.js we have to create a window of our application and handle system events, this is how the main script of our application will look like:

 const electron = require('electron'); const app = electron.app; //      . const BrowserWindow = electron.BrowserWindow; //    . //          Electron. electron.crashReporter.start(); //    ,    ,  //      JavaScript     . var mainWindow = null; //        . app.on('window-all-closed', function() { //  OS X      menu bar //             Cmd + Q if (process.platform != 'darwin') { app.quit(); } }); //      Electron   //       . app.on('ready', function() { //   . mainWindow = new BrowserWindow({width: 800, height: 600}); //    index.html   . mainWindow.loadURL('file://' + __dirname + '/index.html'); //  DevTools. mainWindow.webContents.openDevTools(); //         . mainWindow.on('closed', function() { //    ,       //       ,   //     . mainWindow = null; }); }); 

index.html is the web page we want to display:

 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1>   Node <script>document.write(process.versions.node)</script>, Chrome <script>document.write(process.versions.chrome)</script>,  Electron <script>document.write(process.versions.electron)</script>. </body> </html> 

The repository with the code - https://github.com/DangelZM/electron-simple-app .

When you create all the files or tilt the repository, you will want to try running your application locally and see if it works as intended.

To run the application, we need an electron-prebuilt module .

We can use it with the help of npm globally or locally in our application.

In the case of a global installation to run the application, we run the command in the root of our application:

 electron . 

In the case of a local installation, we perform:

 ./node_modules/.bin/electron . 

In the repository prepared by me to run the application, you need to install dependencies:

 npm install 

and run the script using npm :

 npm start 

An example of launching the created application can be seen in the video below: