Location>code7788 >text

Electron First Experience

Popularity:165 ℃/2024-08-21 13:12:45

Why use electron

Recently, we are going to develop a desktop application on Kirin system, mainly to complete the visualization of Linux commands. electron, as one of the most active cross-platform desktop application frameworks, can create desktop applications using web technologies (e.g., HTML, CSS, and JavaScript), and at the same time, it can take full advantage of the power of the front-end community and various technology stacks to achieve powerful functionality. It can leverage the various technology stacks that the front-end community has to offer to achieve powerful functionality.

Interacting with the operating system

Electron's architecture is divided into three core parts: the Main Process, the Renderer Process, and the Preload Script.

1. Main Process

  • functionality: The master process is the entry point to the Electron application and controls the application's lifecycle. It runs the JavaScript code of the environment and is responsible for creating and managing all the rendering processes (i.e., the windows of the application).

2. Renderer Process

  • functionality: The rendering process is a separate process for each application window that runs in Chromium and is responsible for displaying the user interface (UI). The code executed by the rendering process is web technology (HTML, CSS, JavaScript).

3. Preload Script

  • functionality: Preloaded scripts are executed before the rendering process loads the web content and run in an isolated context. It is possible to expose APIs to the rendering process via bridging, while still maintaining security.

electron practice

The general architecture of the command visualization tool is as follows

Backend UI: vue-element-admin

Backend Server: Golang

Client UI: vue-element-admin

Client Operation.

rendering (visual representation of how things will turn out)