Electron allows you to create desktop applications using pure JavaScript calling rich native APIs. You can think of it as a variant of Node.js that focuses on desktop applications, rather than a Web server.

My motivation for learning

A few days ago with Node+Vue made a small program release system, during the development has been running in the local until the completion of all functions ready to deploy to the server found a problem, according to the official API small program want to release must rely on developer tools! Wechat developer tools will start a web service in your local, we get its port number and then cooperate with the API to complete the upload… This is a very embarrassing situation, the applets developer tools do not run on Linux server version!!

What is Electron?

Electron is a framework for creating native applications using Web technologies like JavaScript, HTML, and CSS. It takes care of the hard parts, and you just have to focus on the core of your application. Electron essentially just merges Chromium and Node.js into the same runtime environment and packages it as an application for Mac, Windows, and Linux depending on your needs. How big is Electron? Let’s just say VScode and Atom are whipped out of it.

Learn about Electron’s main and renderer processes

Electron a process running the package.json main script is called the main process. The script running in the main process presents 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 Web pages, Chromium’s multi-process architecture is also used. Each Web page in Electron runs in its own rendering process.

In normal browsers, Web pages usually run in a sandbox environment and are not allowed to touch native resources. However, Electron users can perform some low-level interactions with the operating system on the page with the support of the Node.js API.

The main process creates the page using the BrowserWindow instance. Each BrowserWindow instance runs the page in its own rendering process. When an instance of BrowserWindow is destroyed, the rendering process is terminated.

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

Build your first Electron app

From a development perspective, the Electron Application is essentially a Node.js application. As with node.js modules, the entry point to the application is a package.json file. A basic Electron application will typically have the following directory structure:

Initialize the project

Create an empty folder, open the command line, switch to this directory and execute YARN init. Note that I strongly recommend that you use YARN to install all dependencies required by this project. NPM may not cause any problems during development, but may cause unknown bugs during packaging. Don’t ask why, because I don’t know, as a great web user told me when packaging failed. Yarn will help you create a basic package.json file. The script represented by the main field is the startup script of the application, which will be executed in the main process. Basic operation, nothing to say, do not know children’s shoes to find corresponding data. Note: If there is no entry file for main specified in package.json, Electron will attempt to load the index.js file (just like Node.js itself). The startup command for Electron is Electron, so you can add a command in the script field to quickly launch the project. As follows:

Install the Electron

Now, you need to install electron. As a development dependency in your project, run the following command in the app folder: YARN add electron

Develop a simple Electron

We’ll start with the Electron module in main.js. Electron provides various apis that allow you to call native methods and UIs, just like the normal Node module. Const electron = require(‘electron’) The functions provided by the electron module are exposed through the namespace. For example, electron. App manages the life cycle of the electron application, and the electron.BrowserWindow class creates Windows. Here is a simple main.js file that will open a window when the application is ready:


Launch your app

After creating and initializing main.js, index.html, and package.json, you can start the Electron program you just wrote by executing the NPM start command at the root of your current project.

end

Electron uses web pages as its GUI, so you can think of it as a lite version of Chromium browser controlled by JavaScript. This chapter introduces the basic application of Electron. In the next chapter, the development process of converting the existing distribution system into Electron application, some APIS used and pits encountered in the process will be emphatically introduced. At the same time, welcome everyone to pay attention to the public account front small garden, I will publish original articles here regularly.