Skip to content

Electron

Jump to bottom
ajaxlab edited this page Nov 16, 2018 · 1 revision

Electron

Structure

  • Chromium

    • Main Process | Browser Process
      • Controls Renderer Process
      • Entry Point
    • Renderer Process : Multi Process Architecture
    • IPC connects both sides

  • Node.js

Running

npm i electron
node_modules/.bin/electron

Minimum Code

// main.js
const {app, BrowserWindow} = require('electron');
function createWindow() {
    const win = new BrowserWindow({width: 800, height: 600});
}
app.on('ready', createWindow);
npm i electron
node_modules/.bin/electron .

app

* Control your application's event lifecycle.
* singleton

const {app} = require('electron')
app.on('window-all-closed', () => {
  app.quit()
})

BrowserWindow

* Create and control browser windows.

Minimum Safe Code

// main.js
const {app, BrowserWindow} = require('electron');

let win;

function createWindow() {
    win = new BrowserWindow({width: 800, height:600});
    win.loadURL(`file://${__dirname}/main.html`);
    win.on('closed', () => {
        win = null;
    });
}

app.on('ready', createWindow);
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});
app.on('activate', () => {
    if (win === null) {
        createWindow();
    }
});

main process

The main process, commonly a file named main.js, is the entry point to every Electron app. It controls the life of the app, from open to close. It also manages native elements such as the Menu, Menu Bar, Dock, Tray, etc. The main process is responsible for creating each new renderer process in the app. The full Node API is built in.

Every app's main process file is specified in the main property in package.json. This is how electron . knows what file to execute at startup.

In Chromium, this process is referred to as the "browser process". It is renamed in Electron to avoid confusion with renderer processes.

Simple Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Electron App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
    <h1>Message</h1>
    <ul id='message-list'></ul>
    <form id='comment-form'>
        <input type='text' id='message-input' />
        <input type='submit' value='Send' />
    </form>
    <script src='renderer.js'></script>
</body>
</html>
document.addEventListener('DOMContentLoaded', () => {
    document.getElementById('comment-form').onsubmit = () => {
        const messageInput = document.getElementById('message-input');
        const messageList = document.getElementById('message-list');
        if (messageInput.value === '') {
            return false;
        }
        const messageItem = document.createElement('li');
        messageItem.innerText = messageInput.value;
        messageList.appendChild(messageItem);
        messageInput.value = '';
        return false;
    };
});
Clone this wiki locally