Check out a free preview of the full Electron Fundamentals, v2 course:
The "Electron Process Model" Lesson is part of the full, Electron Fundamentals, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Steve gives an overview of how Electron works, and offers insight into why it’s such a powerful tool.

Get Unlimited Access Now

Transcript from the "Electron Process Model" Lesson

[00:00:00]
>> Steve Kinney: We talk a little bit about the process model in Electron. How Electron kind of works and how we can start to think about it. Basically, the way that we start up an application is we have this main entry on line five over there, right? And we just say where the main process is.

[00:00:17] This is kind of the entry point for application. And there's two major kinds of processes that we'll look at in a second. There is one main process and then there are one or more, or zero or more renderer processes. So you can actually spend each one has if you think about like in Chrome each tab is its own thread and its own process completely like isolated from everything else.

[00:00:39] The same for every renderer process. You can spin up as many of these like independent threads as you want. So you could do really cool stuff like not have Windows for some of them and have a thread pool and all sorts of crazy stuff and like mine Bitcoin or something on single JavaScript threads possibly.

[00:00:55] But you have one main process, spin up multiple renderer processes. And we define that main process in our package.json with the very neat entry of main. That seems good, right? Once we have that main in there, it's really just npm start. And what happens is Electron will go ahead.

[00:01:16] If we look at that previous slide, you can see over on 18 that we just call Electron and then the current directory, and that will look at main. We call npm start. It'll spin up our main process for our application. Once we have the main process right, which is our kind of like, it is, there is no idea of a server and a client.

[00:01:37] But that's a useful metaphor for us as web engineers. We're used to having our client side code and our server side code. So the main process is not a server, and the renderer process is not a client per se but it's not unhelpful to think about it like that, right?

[00:01:53] And so you have one main process that can spin up. Renderer processes are created through this constructor called browser window, which we'll see in a little bit. So the metaphor of server and client side code holds true even if it's not actually true. So we spin up one main process and then it can create multiple renderer processes that we kind of create and those all have user interfaces.

[00:02:16] So we can create one and for most applications like if you didn't need a user interface, there are some serious questions about why you are using Electron. Right, you could probably just use a node application right? I guess you could double click it or something, but you should think seriously.

[00:02:34] So we can assume that you're gonna make one or more renderer processes. Right, the applications that we're going to build today are gonna just be a single window. We did this course previously. We actually had to make multiple of the same window. We can do that but it's just kind of a lot of detail for not a lot of learning gain.

[00:02:53] But that's outlined in the book if you wanna take a look at that. But we can spin up multiple renderer processes. Each one is totally isolated from each other. But we'll also learn in this workshop how to facilitate communication between them. The main process can send messages to any renderer process.

[00:03:10] Any renderer process can actually reach back and utilize functions and methods from the main process. And we'll learn all about this kind of inter-process communication model as we build Electron applications as well. Most of the application that we're gonna use kind of there is no standard like, this is the layout of an Electron application.

[00:03:32] Cuz it's JavaScript and there's no rules ever. We're gonna mostly follow this model which is when we do an NPM start, it's gonna run main.js. That is going to load a new browser window renderer process that's gonna have an index.html. And index.html is what you normally think about in client side development.

[00:03:50] It's got some markup, it's maybe got a link to a CSS file. And then it will fire up the JavaScript for the renderer process, cool. The other thing that I think is really kind of useful that I think about with Electron is it's one of the technologies that I really like because you start by going, okay, yeah, I'm gonna build a markdown text editor, cool.

[00:04:15] And then I'll build a clipboard manager. But then what happens is like one month from now you're walking down the street like I could build this thing. Right, and the other like other opportunity I think doesn't get like explored enough like a lot of people think about like I'm gonna build an application for Linux and Windows and MacOS.

[00:04:28] Like totally do that. But the other really interesting opportunity is, hey, I have this command line app that can't have as wide of an audience as I wish, right? And so what I can do is that I can take my command line app and I can build a user interface on top of it, right?

[00:04:46] And be able to have a wider audience use it, which I think is really cool.