[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.