Web - Electron

> (World Wide) Web - (W3|WWW)

1 - About

Electron is a framework to create Web Desktop app

Advertising

3 - Project Structure

A Electron app have at minimum the following folder structure:

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

3.1 - API

All APIs and features found in Electron are accessible through the electron module:

const electron = require('electron')

See electron/electron-api-demos

3.2 - main.js

Example of a minimal main script. For a bigger one, see electron/electron-quick-start/blob/master/main.js

main.js
const { app, BrowserWindow } = require('electron')
 
function createWindow () {
  // Create the browser window.
  let win = new BrowserWindow({ width: 800, height: 600 })
 
  // and load the index.html of the app.
  win.loadFile('index.html')
}
 
app.on('ready', createWindow)

3.3 - package.json

The starting point is package.json.

An Electron application is essentially a Node.js application where the start is not done directly by node runtime but by the electron runtime.

package.json
{
  "name": "your-app",
  "version": "0.1.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  }
}
  • Then start it
npm install # for any dependency
npm start # to start it
Advertising

4 - Architecture

4.1 - Process

  • In Electron, the process that runs package.json's main script is called the main process.
  • Each web page in Electron runs in its own process, which is called the renderer process

The main process creates web pages by creating BrowserWindow instances. Each BrowserWindow instance runs the web page in its own renderer process. When a BrowserWindow instance is destroyed, the corresponding renderer process is also terminated.

How to share data between web pages

4.2 - Display Driver

Being based on Chromium, Electron requires a display driver to function. If Chromium can't find a display driver, Electron will fail to launch

4.3 - Module

The vast majority of Node.js modules are not native. Only 400 out of the ~650.000 modules are native. However, if you do need native modules, please consult this guide on how to recompile them for Electron.

4.4 - single-page application

Electron is designed to work best as a single-page application. Clicking a link shouldn't load a new page but should manipulate the DOM to changes the contents on the same page.

Options:

Advertising

4.5 - Language

Nearly all (over 90%) of ES2015 is available to use in Electron without the use of pre-processors because it's a part of V8 which is built into Electron.

5 - Management

5.1 - Installation

npm install --save-dev electron

See other installation form at the doc

5.2 - Devtool

5.2.1 - devtron

https://electronjs.org/devtron - an open source tool to help you inspect, monitor, and debug your Electron app. Built on top of the amazing Chrome Developer Tools.

Example:

To install and see a Devtron tab added to the DevTools:

npm install --save-dev devtron
  • Open the devtool (Ctrl+Shift+I)
  • Run the following from the Console tab of your app's DevTools
require('devtron').install()

devtron_installation.jpg

5.2.2 - React Dev Tool

Creation:

git clone --depth 1 --single-branch --branch master https://github.com/electron-react-boilerplate/electron-react-boilerplate.git .
yarn
# Starting development
yarn dev

Debug:

5.2.3 - LIbrary

5.3 - Testing

6 - Boilerplate

7 - Example

  • Azure Storage Explorer is an Electron app

8 - Tuto

web/electron.txt · Last modified: 2019/05/24 17:28 by gerardnico