This is the sixth day of my participation in the August Text Challenge.More challenges in August

Electron is an open source framework developed by GitHub and can be used to develop desktop applications. The development of Node + Chromium makes it have powerful cross-platform capabilities. Both GitHubAtom and Microsoft Visual Studio Code, as we know them, are Electron applications.

1. Advantages of desktop applications

• Quick open • Offline availability • Call system API • Security •…

2. Comparison of desktop application development technologies

Native desktop technology development

  • Performance is good
  • powerful
  • Package size is relatively small
  • High threshold
  • Low development efficiency

QT desktop technology development

  • Cross-platform (support for major operating systems)
  • A high performance
  • Close to a native app experience
  • C++ development threshold is high
  • Average development efficiency

Flutter

• Cross-platform, cross-platform • Web-based technologies • Immature desktop • Incomplete ecosystem development

NW.js

• Cross-platform • Web based • source code encryption, Support for Chrome extensions • Community support • High development efficiency • Large size, mediocre performance

Electron

• Cross-platform • Web based • Active community, good ecology • Lots of practical cases • High development efficiency • Large and average performance

3. The architecture diagram

4. Installation and Environment

Environment dependent: Node.js & NPM

IDE: Visual Studio Code or any editor

Quick start:

npm i electron
Copy the code

5. A minimal Demo

Understand the main process module

Const {app, BrowserWindow, ipcMain} = require(‘ electron ‘)

  • App Lifecycle of an app, e.g. app.on(‘ ready ‘, callback)

  • BrowserWindow controls the window

let win = new BrowserWindow({width, height, ... }) // Create Windows win.loadurl (url), win.loadfile (path) // load remote or local pagesCopy the code
  • Notification notice
let notification = new Notification({title, body, actions:[{text, type}]})
notification.show()
Copy the code
  • Ipcmain. handle(Channel, handler) The main line, inheriting Event Emitter

6. Main and renderer processes

1. What is the main process responsible for

  • Package. json main script
  • One application has one main process
  • Native GUI scheduling management, such as BrowserWindow, Tray, Dock, Menu
  • App application life cycle
  • Create render process

2. What is the render process responsible for

  • This section describes how to display webui processes
  • With Node. js, electron, more native capabilities
  • One application, multiple renderers

3. IPC(Inter-process Communication)

  • Notification events, data transfer, data sharing
  • IpcMain for the main process and ipcRenderer for the renderer process
  • Inherited from EventEmitter

4. From renderer to main process

  • The Callback method:
ipcRenderer.send
ipcMain.on
Copy the code
  • Promise written (after Electron 7.0, handle request + response mode)
ipcRenderer.invoke
ipcMain.handle
Copy the code

7. Advantages summary

  • Don’t worry about compatibility
  • Use the latest features of Chrome without the latest syntax in the Polyfill • ES standard
  • No cross-domain, request nodeJS
  • Reading local files