This course is out of date and does not reflect our standards or industry best practices.

Check out a free preview of the full Electron Fundamentals, v2 course:
The "Building the Main Window" 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 a brief overview of submodules available to Electron. The asynchronicity of the app is then demonstrated by requiring the app submodule, then using it to log a message out in the terminal using an event listener.

Get Unlimited Access Now

Transcript from the "Building the Main Window" Lesson

>> Steve Kinney: We've got this console log, we don't really need that anymore. So we've gotten rid of that console log and now, we need to figure out how to use Electron. If you looked in our package JSON there was a module called Electron, right, I'm sure you're using all start up the application.

[00:00:14] But it actually has everything that we need in it. So we do something along the lines of const electron equals require electron. And if we look at the electron object, we can see there's a whole bunch of kind of sub-modules on there. They kind of give you a sense of some of the things that you can do with electron.

[00:00:34] So a browser view on the previous slide allows us create render a process, we have the ability to create menus and menu items. I have a 2013 MacBook Pro in front of me, but for those of you with fancy new MacBooks, there's obviously a bunch of APIs for interacting with the TouchBar.

[00:00:52] The system tray we saw before we're gonna put clip master up in the menu bar or system tray so. Up in the menu bar, if you're on a Mac, down in the system tray, if you're on Windows. It's the same module either way, which kind of falls into that write the code once, have something that works everywhere.

[00:01:06] And that is always like, there's seven asterisks after that which is code defensively, and things are weird, but generally speaking, true. We're building a clipboard manager, so the fact that there's a clipboard module here is not super surprising. AutoUpdater, crashReporter which we're gonna play around with a little bit.

[00:01:26] Dialogue which allows us to create native system dialogues for selecting a file or stuff along those lines as well. In app purchases, if that's your kind of thing for when you're ready to make some money. PowerSaveBlocker a bunch of very interesting things that we can use. Now, those are all on the electron object, I'm very lazy, and I'm not typing electron that many times over the next few hours.

[00:01:50] So the other thing that we can do is as we need stuff,
>> Steve Kinney: We can pull in just what we need. So this is the ES6 distructuring syntax, which is fun to say out loud multiple times. And it allows us to just pull on certain properties off of an object.

[00:02:08] So this is the same thing as type, now, I'll just have app available and we'll have, that'll be the same as if I had typed Electron.App. And the important thing to know is there are different modules available between the main process, and the renderer process. With the main process, it is, there is one main process.

[00:02:27] So anything where concurrency could be a problem like reading and writing to the file system, so on and so forth. You could do that in the renderer process. But two renderer processes are writing to the file system at the same time, that can be somewhat problematic. So most of the kind of like core, hey, this should happen in one place is available to the main process.

[00:02:48] That said, you can always have a renderer process talk to the main process. We'll kind of see that as things go along, so desktop applications take a little bit of time to start up, it's not instantaneous. So when you need some life cycle events and the events are, if you're familiar with jQuery or the DOM Like, we have event listeners for click events or mouse over events, so on and so forth.

[00:03:13] In Node land, we have event emitter, and the kind of event pattern is pretty common there as well. So we're actually gonna use that to figure out when the application is ready. All right, because we can't show a browser window until the application is ready. There is a lot of things we can not do, until the application is ready for us to do those things.

[00:03:31] So how do know when the application is ready? We just add an event listener, so we say appon('ready'),
>> Steve Kinney: And we'll go ahead and just console.log('The application is ready.'), and then after that just to make a point,
>> Steve Kinney: To prove to you that the application does take a few seconds to start up or seconds is a strong word, let's go with milliseconds to start up.

[00:04:08] Really depends on your computer, right? [LAUGH] But we'll go ahead and we'll say that the ready event gets fired after this console.log, after we evaluate the file.
>> Steve Kinney: All right, so starting up, the application's ready. Pretty soon there after, right, again, I'm on a five year old Macbook Pro, so it might be almost instantaneous for you because see the the order of events.

[00:04:32] So a lot of the kind of starting up an application has to happen in this ready event. That will be where we create any of the kind of browser window renderer processes that we need. If we need to set the application menu, so on and so forth, that'll happen once the application is started up and ready.

[00:04:46] So a lot of our kind of initial code will live in here.