preface

Today, through three parts of technical core, development process and commonly used modules, we will briefly introduce the origin of Electron.

Core technology

Open source architecture for building cross-platform desktop applications using JavaScript, HTML, and CSS

1. Web technologies

  • Electron is based on Chromium and Node.js and allows you to build applications using front-end technology.
  • Electron = Chromium + Node.js + Native API

2. Open source

  • Electron is an open source project maintained by GitHub and an active community of contributors.

3. The cross-platform

  • Electron is compatible with Mac, Windows, and Linux and can build applications for all three platforms.

  • MacOS: 64-bit version only, and only macOS 10.10 (Yosemite) and later is supported.

  • Windows: Supports only Windows 7 or later. Older operating systems are no longer supported (and cannot run). Two binary versions, Ia32 (x86) and X64 (AMD64), are available.

  • Linux: Supports Ubuntu 12.04, Fedora 21, and Debian 8 and later. Electron’s IA32 (I686) and X64 (AMD64) precompiled versions are compiled under Ubuntu 12.04.

The development course

  • On April 11, 2013, Electron started as Atom Shell.
  • On May 6, 2014, Atom and Atom Shell became open source under the MIT license.
  • Atom Shell changed its name to Electron on April 17, 2015.
  • On May 11, 2016, version 1.0 was released.
  • On May 20, 2016, software packages were allowed to be submitted to the Mac App Store.
  • On August 2, 2016, the Windows Store was supported.
  • In 2018, version 2.0 (May 2), Version 3.0 (September 19), and Version 4.0 (December 21) were released.
  • In 2019, version 5.0 (April 25), Version 6.0 (July 30), and version 7.0 (October 22) were released.
  • 2020, release 8.0 (February 4), 9.0 (mid-May).

Process of communication

1. Main process and rendering process

The main.js file process in Electron is called the master process, and the script that runs in the master process displays the user interface by creating a Web page. A Electron application always has one and only one main process.

Since Electron uses Chromium to present the Web page, Chromium’s multi-process architecture is also used. Each Web page in Electron is called a render process.

In a normal browser, Web pages typically run in a sandbox environment and have no access to the operating system’s native resources. However, Electron users have some low-level interaction between the page and the operating system with the support of the Node.js API.

2. The difference between the main process and the rendering process

The main process uses a BrowserWindow instance to create the page. Each BrowserWindow instance runs the page in its own rendering process. When a BrowserWindow instance is destroyed, the corresponding rendering process is also terminated.

The main process manages all the Web pages and their corresponding rendering processes. Each rendering process is independent and only cares about the Web page it is running on.

Calling native GUI-related apis in a page is not allowed, because it is dangerous to operate on native GUI resources in a Web page and can cause resource leaks. If you want to use A GUI operation on a Web page, the corresponding rendering process must communicate with the main process and ask it to perform the related GUI operation.

3. Code examples

  • Synchronous communication
    // The render process
    const { ipcRenderer } = require('electron')
    ipcRenderer.sendSync('synchronous-message'.'ping')

    / / main process
    const { ipcMain } = require('electron')
    ipcMain.on('synchronous-message', (event, arg) => {
        console.log(arg) 
        event.returnValue = 'pong'
    })
Copy the code
  • Asynchronous communication
    // The render process
    const { ipcRenderer } = require('electron')
    ipcRenderer.send('asynchronous-message'.'I need to create a new window')

    / / main process
    const { ipcMain } = require('electron')
    ipcMain.on('asynchronous-message', (event, arg) => {
        console.log(arg) 
        event.reply('asynchronous-reply'.'Ok, got it.')})// The render process
    ipcRenderer.on('asynchronous-reply', (event, arg) => {
    	console.log('thank you');
    })
Copy the code

Commonly used modules

app

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

Copy the code

BrowserWindow

  • The code for
const { BrowserWindow } = require('electron')

let win = new BrowserWindow({ width: 800.height: 600 })
win.on('closed', () => {
  win = null
})

win.loadURL('https://github.com')
Copy the code

dialog

  • The code for
const { dialog } = require('electron') 

dialog.showMessageBox(mainWindow, {
            type: 'info'.defaultId: 0.message: 'Are you sure to quit now? '.buttons: ['exit'.'cancel']})Copy the code

Menu

  • The code for
const { Menu, MenuItem } = require('electron')

const menu = new Menu()
menu.append(new MenuItem({ label: 'MenuItem1', click() { console.log('item 1 clicked') } }))
menu.append(new MenuItem({ type: 'separator' }))
menu.append(new MenuItem({ label: 'MenuItem2'.type: 'checkbox'.checked: true }))
Copy the code

desktopCapturer

  • The code for
// In the renderer process.
const { desktopCapturer } = require('electron')

desktopCapturer.getSources({ types: ['window'.'screen'] }).then(async sources => {
  for (const source of sources) {
    if (source.name === 'Electron') {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({
          audio: false.video: {
            mandatory: {
              chromeMediaSource: 'desktop'.chromeMediaSourceId: source.id,
              minWidth: 1280.maxWidth: 1280.minHeight: 720.maxHeight: 720
            }
          }
        })
        handleStream(stream)
      } catch (e) {
        handleError(e)
      }
      return}}})function handleStream (stream) {
  const video = document.querySelector('video')
  video.srcObject = stream
  video.onloadedmetadata = (e) = > video.play()
}

function handleError (e) {
  console.log(e)
}

Copy the code

clipboard

  • The code for
const { clipboard } = require('electron')

clipboard.writeText('hello i am a bit of text! ')

const text = clipboard.readText()
console.log(text)
// hello i am a bit of text! '
Copy the code

The resources

  • www.electronjs.org/docs/develo…
  • Bitbucket.org/chromiumemb…
  • nwjs.org.cn/
  • Github.com/electron/el…
  • Github.com/electron/el…
  • www.electronjs.org/docs