The electron is based on Google's Chromium project. Chromium is an open source version of Google's Chrome web browser. Electron uses Chromium's content module to render the web pages. Chromium content modules are the core code needed to render a web page in multi process sandboxed browser. It includes all the web features (HTML renderer blink engine, v8 engine to execute JavaScript) and GPU acceleration. It does not include chrome features, that is, extension/autofill/spelling and so on. For better understanding let's look into how the chrome browser works.

Before we get into the details of the Electron architecture, let's check out the multi-process architecture of chromium because Electron uses a simplified version of Chromium's multi process architecture. Modern operating systems are robust because they put an application into different processes that are separated by each other. A crash in one application does not have any impact on another application and it will not affect the integrity of the operating system. In a similar way, Google Chrome uses a separate process for each tab to protect overall bugs and glitches from the rendering engine. It also restricts access from each rendering process to others and to the rest of the system. So basically the Chrome browser runs two types of processes. The main process runs the UI and plugin process and tabs specific processes which render the web page. The following figure shows how the multi process architecture works in Electron. The main process can start multiple renderer processes with different URLs loaded into it:

As I mentioned earlier, Electron uses a simplified version of this multi process architecture. It consists of three main parts:

• Browser: This is responsible for business logic and data access. It works on its own process called the main process. It creates the browser window and corresponding modules to render the web pages. In our application, main.js is running in this process, which creates the main window.
• Renderer: This is responsible for rendering each web page. Each web page renders on its own thread.
• Modules that bridge browser and renderer and control application life cycle:

If you look at our preceding example, main.js is responsible for creating windows and managing the application state. It creates a window by instantiating a browser window object. This main.js is running in the Main process. The Main process creates a web page by creating a BrowserWindow object. Each BrowserWindow runs the web page in its own separate renderer process. These renderer processes will be terminated when the corresponding BrowserWindow object is destroyed.

The main process is responsible for managing all the web pages and its renderer processes. Each renderer process is isolated and cares only about the web page running in it:

As I mentioned earlier, in Electron there are two types of processes that control the entire application.