The Electron process architecture is the Chromium process architecture

The Electron docs describe Electron as basically a mash-up of Node.js and Chromium. My mental model was that there are two kinds of process. An Electron app has a single “Main” process, which is basically a NodeJS process, and which you launch with something like electron main.js. Then this can launch “Renderer” processes, each of which is basically a new Chromium process, and which you launch with something like:

const { app, BrowserWindow } = require('electron');
app.whenReady().then(() => {
  const window = new BrowserWindow();
});

This mental model was simplistic. If you actually list processes with ps or Activity Monitor, you’ll find that what Electron calls a “process” is a bit different to what your OS calls a “process”! An empty Electron app on macOS has processes like this:

-+- Electron main.js
 |--- Electron Helper (GPU) --type=gpu-process
 \--- Electron Helper --type=utility --utility-sub-type=network.mojom.NetworkService

This process architecture comes from Chromium. Look at the process tree for Chrome running on your computer, and you’ll see basically the same thing:

-+= Google Chrome
 |--- Google Chrome Helper (GPU) --type=gpu-process
 |--- Google Chrome Helper --type=utility --utility-sub-type=network.mojom.NetworkService
 |--- Google Chrome Helper --type=utility --utility-sub-type=audio.mojom.AudioService
 |--- Google Chrome Helper --type=ppapi-broker
 |--- Google Chrome Helper (Renderer) --type=renderer
 |--- Google Chrome Helper (Renderer) --type=renderer
 ... an ungodly amount of these ...
 \--- Google Chrome Helper (Renderer) --type=renderer

Running new BrowserWindow() will create a native window, but does not create any new OS processes. To do that, we need to load a renderer in the window with .loadFile or .loadURL. For example, this main.js:

const { app, BrowserWindow } = require('electron');
app.whenReady().then(() => {
  for (let i = 0; i < 3; i++) {
    const window = new BrowserWindow();
    window.loadFile('./index.html');
    // We now have a window.webContents
  }
});

... will give us three Renderer processes:

-+- Electron main.js
 |--- Electron Helper (GPU) --type=gpu-process
 |--- Electron Helper --type=utility --utility-sub-type=network.mojom.NetworkService
 |--- Electron Helper (Renderer).app/Contents/MacOS/Electron Helper (Renderer) --type=renderer
 |--- Electron Helper (Renderer).app/Contents/MacOS/Electron Helper (Renderer) --type=renderer
 \--- Electron Helper (Renderer).app/Contents/MacOS/Electron Helper (Renderer) --type=renderer

So, my new mental model is that an Electron instance is basically a Chromium instance. It just has some Node.js integration: the Chromium browser process runs a Node.js module on start-up, and a Chromium renderer process can run a Node.js module by calling require.

Tagged #programming, #javascript, #electron.

Similar posts

How does require work in Electron?
require in Electron works like Node.js, allowing you to load modules, but each Renderer process has its own isolated module state. Relative module resolution depends on whether you use loadFile or loadURL. 2020-10-15
How do classes work in JavaScript?
JavaScript class syntax is just syntactic sugar over the traditional prototype-based inheritance. Deconstructing a simple class reveals the underlying constructor functions, prototype assignment, and use of super to call the superclass’s constructor. 2020-11-03
How do JavaScript prototypes work?
JavaScript has two different “prototype” concepts: an own property with the string key “prototype”, and a parent slot. Don’t confuse the two! 2020-11-02
How do JavaScript async iterators work?
Async iterators use the Symbol.asyncIterator method to define the iteration protocol. 2020-10-19
How does the Node.js REPL display previews?
Node.js REPL uses the inspector module to safely evaluate expressions as you type, using V8’s evaluation with throwOnSideEffect: true to avoid executing harmful code. 2020-10-05
How to publish an npm package
Publishing an npm package @jameshfisher/numsyslib with a stringifyRoman function that converts a number to a Roman numeral. 2020-10-01

More by Jim

What does the dot do in JavaScript?
foo.bar, foo.bar(), or foo.bar = baz - what do they mean? A deep dive into prototypical inheritance and getters/setters. 2020-11-01
Smear phishing: a new Android vulnerability
Trick Android to display an SMS as coming from any contact. Convincing phishing vuln, but still unpatched. 2020-08-06
A probabilistic pub quiz for nerds
A “true or false” quiz where you respond with your confidence level, and the optimal strategy is to report your true belief. 2020-04-26
Time is running out to catch COVID-19
Simulation shows it’s rational to deliberately infect yourself with COVID-19 early on to get treatment, but after healthcare capacity is exceeded, it’s better to avoid infection. Includes interactive parameters and visualizations. 2020-03-14
The inception bar: a new phishing method
A new phishing technique that displays a fake URL bar in Chrome for mobile. A key innovation is the “scroll jail” that traps the user in a fake browser. 2019-04-27
The hacker hype cycle
I got started with simple web development, but because enamored with increasingly esoteric programming concepts, leading to a “trough of hipster technologies” before returning to more productive work. 2019-03-23
Project C-43: the lost origins of asymmetric crypto
Bob invents asymmetric cryptography by playing loud white noise to obscure Alice’s message, which he can cancel out but an eavesdropper cannot. This idea, published in 1944 by Walter Koenig Jr., is the forgotten origin of asymmetric crypto. 2019-02-16
How Hacker News stays interesting
Hacker News buried my post on conspiracy theories in my family due to overheated discussion, not censorship. Moderation keeps the site focused on interesting technical content. 2019-01-26
My parents are Flat-Earthers
For decades, my parents have been working up to Flat-Earther beliefs. From Egyptology to Jehovah’s Witnesses to theories that human built the Moon billions of years in the future. Surprisingly, it doesn’t affect their successful lives very much. For me, it’s a fun family pastime. 2019-01-20
The dots do matter: how to scam a Gmail user
Gmail’s “dots don’t matter” feature lets scammers create an account on, say, Netflix, with your email address but different dots. Results in convincing phishing emails. 2018-04-07
The sorry state of OpenSSL usability
OpenSSL’s inadequate documentation, confusing key formats, and deprecated interfaces make it difficult to use, despite its importance. 2017-12-02
I hate telephones
I hate telephones. Some rational reasons: lack of authentication, no spam filtering, forced synchronous communication. But also just a visceral fear. 2017-11-08
The Three Ts of Time, Thought and Typing: measuring cost on the web
Businesses often tout “free” services, but the real costs come in terms of time, thought, and typing required from users. Reducing these “Three Ts” is key to improving sign-up flows and increasing conversions. 2017-10-26
Granddad died today
Granddad died. The unspoken practice of death-by-dehydration in the NHS. The Liverpool Care Pathway. Assisted dying in the UK. The importance of planning in end-of-life care. 2017-05-19
How do I call a program in C, setting up standard pipes?
A C function to create a new process, set up its standard input/output/error pipes, and return a struct containing the process ID and pipe file descriptors. 2017-02-17
Your syntax highlighter is wrong
Syntax highlighters make value judgments about code. Most highlighters judge that comments are cruft, and try to hide them. Most diff viewers judge that code deletions are bad. 2014-05-11
Want to build a fantastic product using LLMs? I work at Granola where we're building the future IDE for knowledge work. Come and work with us! Read more or get in touch!

This page copyright James Fisher 2020. Content is not associated with my employer. Found an error? Edit this page.

Jim Fisher
CV
Speaking
Blogroll
RSS
TigYog
Kickabout