Electron is a framework for building desktop applications using JavaScript, HTML, and CSS. Embedding Chromium and Node.js into the Electron binary allows you to maintain a JavaScript code base and create cross-platform applications that run on Windows macOS and Linux - no local development experience required
The main components of election:
- Chromium can be considered as a chrome browser with the latest functions. For interface display, you can use es6, es7, and some grammatical features supported by browsers. At the same time, you can use html and css to formulate the software interface and load it in the electron environment. Display in the function window
- node.js javascript runtime, file operations, etc.
- native.api provides a unified native interface capability to interact with the operating system
Electron can develop desktop applications, such as NetEase Cloud, vscode is developed by Electron
Desktop application: It is a piece of software running on different operating systems. The function realization uses native api (local api) to interact with the operating system, so what happens in the upper layer of the operating system? Learn about the main process and rendering of Electron process
Electron's main process and renderer process
What is the main process main process?
- In Electron, the main.js script that runs when the project is started is what we call the main process
- After the main process is started, the script running in the main process can create one or more BrowserWindows, and use the window to display the GUI. The display here is in the form of a web page, which is equivalent to an html page displayed on chrome
- Each BrowserWindow can be regarded as a rendering process. Each rendering process is independent and runs in its own context.
- There will also be some interactions in different windows of the app. Election provides the communication mechanism of ipc and rpc. For example, ipcmain and ipcrender are the communication modules packaged inside election. The interaction of different windows can be realized by calling the method of the module
- The main process can manage all web pages and rendering processes corresponding to the web interface
- An Electron application has one and only one main process
- All system events such as window creation must be performed in the main process, and only the main process can perform API operations on the interface
Example: Imagine we open an app
When human-computer interaction clicks to add a new song, it needs to access the file system of the operating system itself. At this time, the main process needs to call the underlying API to implement it, but the click behavior occurs in the rendering process. At this time, the instruction information received by the rendering process needs to be transferred. Passed to the main process, this operation can be realized by using the communication mechanism of IPC. After receiving the instruction, the main process can call nativeapi to open the file reading and writing of the operating system. The user can select one or more files, and the main process follows the business logic in the Find a way to pass the data to the rendering process,
What is the rendering process renderer process?
- Since Electron uses Chromium to display pages, Chromium's multi-process structure is also fully utilized. Each Electron page is running its own process, which we call a rendering process.
- The rendering process supports dom operations and nodeapi calling operations. An application can have multiple rendering processes, each running in its own context
- The rendering process can also access the native API through the main process, but it needs to establish communication with the main process first
- Every time a web page is created, a rendering process BrowserWindow will be created.
- Each web page runs in its own rendering process. Each rendering process is independent, it only cares about the page it is running on.
- When a BrowserWindow instance is destroyed, the corresponding rendering process will also be terminated
Summarize the operation mechanism of Electron development application:
Start the main process, create a window, load the page we need, start the rendering process, and the rendering process needs to communicate, then use the ipc to complete the inter-process communication operation, and finally call the native api through the main process to interact with the operating system to complete the functional operation;