ELECTRON

Build cross platform desktop apps using web technologies

ELECTRON

History

Electron  was called Atom Shell

Atom project: build an IDE with a browser

Why ?

  • Cross Platform
  • Using popular, well-known technologies
  • Code reusable
  • Development speed

Well-known Electron apps

Slack

Visual Studio Code

How does it work?

you could also see it as a minimal Chromium browser, controlled by JavaScript

+

How simple could this be?

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

Project Structure

Define your app in package.json

{
  "name"    : "my-awesome-app",
  "version" : "0.1.0",
  "main"    : "main.js"
}
'use strict';

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

// 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;

// 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');

  // Emitted when the window is closed.
  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});

main.js

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

index.js

electron .

start your app

Application structure

Main process & renderer processes

Main process & renderer processes

IPC

// In main process.
var ipc = require('ipc');
ipc.on('asynchronous-message', (event, arg) => {
	console.log(arg);
	event.sender.send('asynchronous-reply', 'pong');
});
// In renderer process (web page).
var ipc = require('ipc');

ipc.on('asynchronous-reply', (arg) => {
	console.log(arg);
});
ipc.send('asynchronous-message', 'ping');

How to package your application

electron-builder

https://github.com/electron-userland/electron-builder

electron-builder produces all required artifacts:

  • .dmg: OS X installer

  • .exe and -ia32.exe: Windows installer

  • -amd64.deb and -i386.deb: Linux Debian package.

electron-builder

scripts in package.json

"scripts": {
    "postinstall": "install-app-deps",
    "start": "electron ./app",
    "build": "npm run build:osx && npm run build:win32 
              && npm run build:win64 && npm run build:linux64",
    "build:osx": "build --platform darwin",
    "build:win64": "build --platform win32 --arch x64",
    "build:win32": "build --platform win32 --arch ia32",
    "build:linux64": "build --platform linux --arch x64",
    "dist": "npm run dist:osx && npm run dist:win32 && npm run dist:win64",
    "dist:osx": "build --platform darwin -d",
    "dist:win64": "build --platform win32 --arch x64 -d",
    "dist:win32": "build --platform win32 --arch ia32 -d"
  }

electron-builder

build config in package.json

"build": {
    "app-bundle-id": "your.id",
    "app-category-type": "your.app.category.type",
    "iconUrl": "http://Youtube.ico",
    "osx" : {
      "title": "my-awesome-app",
      "background": "build/icon.png",
      "icon": "build/icon.icns",
      "icon-size": 80,
      "contents": [
        { "x": 438, "y": 344, "type": "link", "path": "/Applications" },
        { "x": 192, "y": 344, "type": "file" }
      ]
    },
    "win" : {
      "title" : "my-awesome-app",
      "icon" : "build/icon.ico"
    }
  },

System integration

Menus

var menu = new Menu();
menu.append(new MenuItem({ label: 'MenuItem1', click: function() { 
            console.log('item 1 clicked'); } }
));
menu.append(new MenuItem({ type: 'separator' }));
menu.append(new MenuItem({ label: 'MenuItem2', type: 'checkbox'}));

Menu.setApplicationMenu(menu);

persistent app on mac

app.on('window-all-closed', function() {
	if (process.platform != 'darwin') {
		app.quit();
	}
});

Demo

 



https://github.com/sindresorhus/awesome-electron

Awesome Electron 

Questions ?

Electron presentation

By Vincent Quagliaro

Made with Slides.com

Electron presentation

  • 1,222

More from Vincent Quagliaro