Understand Electron’s main and renderer process architecture
Dealing with multiple processes in an application is new for many JavaScript developers. We’ll go over what exactly a process is and what the primary responsibilities of the main and renderer processes are. The main process is primarily responsible for creating native UI elements and managing the application lifecycle, while the renderer process runs the HTML based UI. Accordingly, different APIs are available in each process.
[00:00] We've talked a lot about Electron's Main and Renderer processes, so you might be wondering, "What exactly is a process? What does that Main," and, "What does that mean in the context of electron?" Let's look at it visually.
[00:12] My app here, I'm creating two browser windows. I'm calling this Create Window function, which creates a browser window, loads the index HTML in it, and pushes it to this Windows array. Let's run our start scripts on the app, and then let's look at the activity monitor and see how many processes are running right now.
[00:33] You can see there's four processes running. This is our Main process here, and we can tell, because it's just called Electron and it has our application icon on it. Then there's three Electron helper processes. One of them is a GPU helper process. That's not one we interact with directly in Electron. That's more of an internal thing to Chromium.
[00:54] Our other two processes are Renderer processes. We can tell which one is a Renderer process when we see the process ID here. It looks like those two are Renderer processes. These processes all run concurrently to each other, and each have their own state. If we require the same module on multiple processes, multiple versions of that same module are running at the same time.
[01:17] To demonstrate this, in each of the Renderer processes, I'm running the same Java script that imports a counter module in it. Each one is running Renderer.js. This counter uses and event emitter internally. When it's incremented, it updates this count element with the current counts. You can see here, if I increment the count here, it is not incremented here. It's different.
[01:43] Let's see what happens if we kill one of these processes. We're going to kill this window. Interestingly, the window remains, but it's just a blank screen. What's going on here? This is because browser windows are created in the Main process, and an instance of a window does not necessarily equal a Renderer process. The Web page running in the window is the Renderer process, not the window itself.
[02:09] This, I think, helps illustrate that one of the main responsibilities of the Main process is to create managed, native UI elements. This includes windows, the menus, dialogues, et cetera. What then are the responsibilities of the Renderer process? The Renderer process is simple. It's just your Web page.
[02:26] Another important thing to know about the Main and the Renderer process in Electron is that different APIs are available in different processes. For example, back here in our Renderer process, if we log out Electron and view all the APIs available, this is the dev tools for one of our windows there, and we've logged out of Electron.
[02:48] You can see these are all the APIs available to us. You'll notice that there's no app, there's not browser window, so we're definitely looking at a different set of APIs here. If we go in our Main process, let's do the same thing. Let's log out of everything that's on Electron module. There are some APIs that are run in both the Main and the Renderer process, such as clipboard, but you see here's our app, here's our browser window.
[03:13] This is an important thing to remember when you're designing the overall architecture of your app and deciding where responsibilities lie. Another important thing to note is that node.js APIs are available everywhere. Of course, dom APIs, browser APIs are only available in the Renderer process.