Electron Code Overview

[00:00:00]
>> So let's jump into it. And one of the things at the very beginning, I'll kind of just put this up again for a moment. We've got three different repos that we're gonna play around with today. And also there is this tool called Electron Fiddle that you can play around with.

[00:00:13]
I have it installed here, I'll kind of just show you cause I think it like highlights a little bit of what the kind of processes are. So we'll kind of take a look at one of these electronic fiddles because it's a very, very simple view of an electron app.

[00:00:29]
And then we're gonna jump into this tool called electron forge. Like I mentioned earlier, electron forge is a bunch of the kind of standard tools and setup because, in the same way with create react app, could you wire up your own webpack by hand? And maybe you want to, but you probably don't, right?

[00:00:47]
And could you get all these things set up? And for instance, a question about auto-updating stuff along those lines. It's kind of a lot of the best practices and boilerplate kind of set up for you. And so we'll use that for most of our time together cuz I would say, unless you are porting a, I won't even say legacy, but an existing application and can you port it to Electron Forge, you can, right.

[00:01:12]
But, generally speaking for starting Electron apps, I would like highly recommend the setup in Electron Forge, otherwise you will fight. And be copying and pasting stuff off a stack overflow to build this setup 'cause eventually you will probably want some amount of a build tool, right? Regardless of where you fall on the vanilla.js to [LAUGH] react spectrum, right?

[00:01:35]
At some point, insofar especially that we don't write to the file system anymore, having some kind of module system or Bundler makes sense at some point or another. But this is the kind of like hello world of an electron app. If we open up Electron fiddle. And I think having the world's simplest version kind of gives you a sense of what we're getting into as we kinda go into one of these Electron forge apps.

[00:02:05]
So to kinda take a quick tour. You start out with the Electron library and could you do an npm init and npm install electron. Absolutely, right? That is theoretically all that's happening in this version without Electron forge is simply cool, we npm installed electron, right? And generally speaking, when you use electron to start up the app, it will look in your package json for your main file, right?

[00:02:34]
In this case that is main.js, and that is the initial entry point. The same way for a node process where you might have a main file that's either index.js or server.js, that when you run an npm start that is equally as true for Electron. And in electron once you're running it within electron itself, you've got a whole bunch of these kinda modules.

[00:02:55]
Now, back in the day, you had to do a lot more thinking about which ones were available in the main process and which ones are available in the renderer process. That newer security posture makes your life a lot easier cuz very few of them are available in the renderer process.

[00:03:13]
Right, and that's where, like I said before, a lot of our time together is gonna be dancing on that like, hey, main process has access to, can read power settings, can figure out when the AC goes on versus battery power. Or can read and write to the file system, or directly talk to a data, all that stuff, a lot of times you render a process being like, hey, main process, I need this, can you get this for me?

[00:03:36]
And then it will send it back over, right? And so less of trying to think about which ones are available where that was a lot harder of a lift before. But now, none of them. None of them, like four of them, right? And it'll become increasingly clear which ones they are.

[00:03:53]
The IPC ability to talk to the main process, like spinning up other, smaller browser contexts and clipboard, it might be one more, but, there's four of them. So we've got the ability to pull an electron and then you can see we're pulling in two things. App, and then browser window.

[00:04:15]
I will let you take a wild guess what browser window does, right? And when you call new browser window, what happens? In there we have the width and the height of the browser window and there are a whole bunch of other options in here. There is the maximum width, the minimum width, so you can very much control the window, it's not just like with somebody else's browser where it's good luck.

[00:04:37]
Think about every responsive design viewport, you can have some amount of control. You can also assume you're building for the desktop as well. As web preferences, there are things of do you wanna disable web security? I'm gonna tell you, you don't, you make your own choices. And this is where we say where the preload script is.

[00:04:57]
That is that one script that has a little bit of ability to grab some things from the main process and has a little bit more leeway than the actual browser context does right before you go in, and so we'll look at the preload.js in a moment. Then next, you just load up an HTML file, right?

[00:05:16]
And that is effectively the entry point for your application, right? You can choose whether or not you wanna use a framework or something along those lines but you get that initial HTML file that kinda starts out, and we'll peek at that too, just to see as well. And the cool part is you have full control over everything, you can choose to immediately open the DevTools, there's a bunch of options there as well.

[00:05:40]
As you go in you have full control. You can even say if process env == development, then open it by default, so on and so forth, right? A lot of even production electron apps still let you open up the DevTools, right? I'm pretty sure, in a number of them, you're still allowed to kind of inspect and stuff along those lines.

[00:06:03]
When we build custom menus, custom application menus, you can choose whether or not you wanna expose that, right? So it's like, you can lock that down a little bit more if you want. So this is a function called CreateWindow but all it does is create a new window.

[00:06:18]
When the app is ready we'll go ahead and create a window, as you can see there are some like OS accoutrements in here then we will talk a lot more about this as we go along, right, even if you're a Windows like. Yeah, you can ignore some of them, and you'll have to think about other Windows things, but there's some just general behavior.

[00:06:36]
And that's again, I would say 90% might be heard properly, but the lion's share is the process model and the other part is getting your app not to feel weird, right? And so for instance, if you close the last window on a Windows app or Linux app, you quit the process.

[00:06:51]
If you close the last window on a macOS application, it still hangs open and you can open a new window, right? And so you can see that on activate, on macOS, which is the only time you could activate it when there are no windows, go ahead and create a window again, right?

[00:07:08]
Which is I click the icon, it opens back up. And then on windows all closed, if it's not macOS, so darwin, Node.js if you say process.platform, Node.js will think that, Linux I think is just Linux. Windows might be win 32 regardless of, whether or not you're on a 64 bit.

[00:07:31]
I don't make the rules around here. I mean, listen, macOS is darwin, right? Cuz that is the bsd shell that is based on, and so we say, okay, for everything else if you're not macOS, quit, right? And we'll see what this full thing does as well. But that's our main processes, right now mostly all that is doing is identifying a preload.js and index.html and then spinning that up and then handing some amount of accoutrements around that.

[00:08:03]
Looking at the preload and I will hide main.js for a moment. There's a few things to note here. One is of the, and I remember what the fourth thing was that the pre render process has is access to the process object from node. Right, so it can read information about the environment that it's running on, as well as in this case, like, process.versions, which is put there by electron.

[00:08:31]
But it also has access to the DOM. It's that kind of intermediary between the main process about to go into the renderer process and get a few last things back, the ability to communicate back to the main process which we will spend most of the first app talking about.

[00:08:47]
And then a few other things but it also has access to the DOM but, as you can guess by the name of this process, it is running before we've even loaded index.html, it is basically, we have spun up a chromium process and we have done nothing to it yet.

[00:09:07]
We have not loaded in an HTML file. We have not even began to parse anything. This is why you still have access to a few last things, which is there's still effectively, we're just, just outta the main process and nothing has really been grabbed onto yet. So it is still roughly safe to figure out what are the last few things we wanna expose to the renderer process to kind of have that connection back and forth.

[00:09:32]
Cool. And then the renderer process in this case is just a script tag, right? And it's a normal, what you think about as client side code, it might be the end result of your webpack or Vite bundler or something along those lines. The thing that you are always used to as frontend engineers, this is where we normally live, this is what we normally do.

[00:09:57]
This one is mostly actually replacing the DOM from the preload script cuz it needs access to process. But you could theoretically make just a few properties on the process object available, and we will look at that when we build our first app together. Cool. And then lastly, we've got the HTML file, which shouldn't be a lot of things that you haven't seen before.

[00:10:21]
Electron will get mad at you if you don't use a decent CSP policy. Which can get tricky sometimes because if you're using webpack, it wants to do stuff with like hot module reloading and WebSockets so you got to play around with that a little bit, but it is basically the DOM and then it pulls in our renderer.js, so on and so forth.

[00:10:44]
This is the bare minimum one would need for an electron application, right? And again, you could literally just do an npm init, npm install electron setup these four files and you've got an electron app effectively.