Overview
I believe you have heard of the use of Electron to build amazing desktop applications!
Simply using JavaScript APIs can build Mac, Windows, or Linux applications.
For a long time, many development languages have retained the ability to generate desktop applications, such as C and Java, but it is very difficult to build applications using these languages.
Of course, in recent years, building local applications has become more flexible, but you still need to learn different languages for each operating system and use very specific tools for development.
Nowadays, on Mac, Windows, and Linux systems, applying Electron technology allows us front-end developers to apply existing knowledge to solve this problem.
We use web technologies such as JavaScript, HTML, and CSS to build a single application, and then compile the application for Mac Windows and Linux.
In this way, we don’t have to maintain different applications for specific platforms.
In addition, we can also use our favorite frameworks and libraries to implement this program, such as front-end frameworks such as Vue and React.
Electron’s development utilizes pure web technology, based on Chromium and Node.js, allowing you to build applications using HTML, CSS, and JavaScript.
Electron is completely open source, and it is an open source project jointly maintained by an active community of GitHub and numerous contributors.
Electron is completely cross platform, compatible with Mac, Windows, and Linux, and can build applications on three different platforms.
If you can build a website, you can build a desktop application. Electron is a framework that uses web technologies such as JavaScript, HTML, and CSS to create native programs. It is responsible for the more challenging parts, and you only need to focus on the core of your application. Electron, it must be simpler than you imagine!
Electron initially developed an Atom editor for GitHub and has since been adopted by companies around the world. For example, Slack, and even Microsoft’s own Visual Studio.
Electron principle
Electron runs in two types of processes, one is the main process and the other is the rendering process. We should know that Electron works based on Chromium, so let’s first take a brief look at the Chromium architecture:
Chromium runtime has a Browser Process and one or more Renderer Processes. The Renderer Process, as the name suggests, is responsible for rendering web pages. The Browser Process is responsible for managing various Renderer Processes and other parts (such as the menu bar, favorites, etc.).
- Renderer Process
In Electron, the Renderer Process is still used to render pages, which means that the Electron app uses web pages as UI display and is compatible with traditional web pages. The difference is that electric app developers can choose to configure whether Node.js is supported.
- Main Process
Electron made significant changes to the Browser Process, so we decided to give it a different name, Main Process. In addition to the original chrome runtime, the Main Process has also added the Node.js runtime, and main.js runs on top of it.
Electron connects the message loop of Node.js with chrome, allowing for flexible control of page display and communication with the IPC of the Renderer Process in JavaScript. Inter Process Communication (IPC) refers to the technology or method of transmitting data or signals between at least two processes or threads. Of course, both the native Node API and third-party Node modules are supported, and the Electron API provides developers with control over native menus and notifications.
To summarize, a Main Process and one or more Redeerers constitute the runtime architecture of Electron. Let’s call the main process the Server side server and the red process the client.