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 "Electron Overview" 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 high level explanation of what Electron is, how it interacts with third-party APIs, and some of the benefits of using a tool that acts as both browser and server-side code.

Get Unlimited Access Now

Transcript from the "Electron Overview" Lesson

>> Steve Kinney: All right, let's talk a little bit about Electron. First, my name is Steve and I am an engineer at SendGrid, I work on a large React application for creating HTML emails. So I basically use modern day JavaScript frameworks to write HTML from 1995. I know way too much about Outlook conditional tags.

[00:00:23] I also wrote a book called Electron In Action, which is super fitting, given what we're talking about today. I think last time we did this, it was a very early draft of it. But now they're our physical paper copies that are in a box in my house that I can't get rid of.

[00:00:37] And if I didn't just bring a carry-on here today, I would have brought them all with me to disperse them, but well. Let's talk a little bit about what Electron is, since we're going to spend the next six to eight hours talking about it. The kind of high level is Electron is kind of a marriage between Chrome and NodeJS, right?

[00:01:00] Chrome, obviously we think about the browser, we think about HTML and CSS and the DOM and all those things. So from Chrome, we get HTML support, GPU acceleration, because Node being a server side framework, not so much on the graphics. We get Blink, the rendering engine, and V8, and then from Node, we get a whole bunch of stuff the browser can't do.

[00:01:23] We get Filesystem access, the ability to use Native modules that are compiled C++ or C. So together, we can do a whole bunch of really interesting things and create applications that you couldn't create in either one, right? In Node, you can't create any kind of user interface for your application.

[00:01:40] And in Chrome, you're in this very, very safe browser sandbox, so both of those have their very necessary limitations. Electron kind of combines the two. So we can use both and create real, full desktop applications that can do all the stuff that we expect desktop applications to do.

[00:01:58] And then also have really great UIs. Using the technologies that we already know how to use for building sophisticated web user interfaces. Awesome, so, there's also some other advantages, in the browser, we have a problem where, it's not really a problem. It's really for everyone's benefit, that you can't, just like, willy nilly call any server you want, right?

[00:02:23] We have cores and other security policies in place that stop us from calling third-party servers. So if you wanted to write a client-side Twitter client, right? You couldn't just hit the Twitter API directly, right, that's not allowed. You'd have to talk to your own server on the back end and then from there, proxy those requests to the Twitter API.

[00:02:44] Get the results back from the Twitter API, send them back to the client, so on and so forth. So you'd have to have both two applications, a client side application, and a server-side application. With Electron applications, they are effectively both together, so you can actually just call whatever APIs you want.

[00:02:59] So it's stuff like cores and other restrictions like that don't exist in Electron applications. You can just call it directly, which really makes a lot of stuff a lot easier. With client side applications, we're very used to using something like Webpack, or Rollup, or Browserify. To kind of put in a module system, because CS module still hasn't really, officially shipped.

[00:03:20] And in Node applications, we can use require(...), again, Electron is half Chrome, half Node, best of both worlds. So there's no need to wire up a whole big build system. We'll actually kind of use transpilers and a very subtle build system later in this course. But it will be so subtle and easy that you will barely notice that we're using a build system, right?

[00:03:44] Which will be really cool.
>> Steve Kinney: So you can do a bunch of things, so you can use require. In Node, we're used to being able to pull in some of the Node Native modules like reading and writing to the Filesystem. In the browser, like I said before, we'd use something like Webpack or Browserify.

[00:04:03] Or something along those lines, to create one just giant JavaScript file. So we'd break stuff up in development, but we'd have to have basically shipped one. Or if we get into code splitting and lazy loading on the client, many JavaScript files that are loaded synchronously, but effectively. Kind of putting it all together into one or more files.

[00:04:22] In Electron, we can actually just use require, with the common JS module system from Node. Even when we're writing the user interface part. So we can bring in anything from the Node standard library, we can bring in anything from NPM as well, right? Even, again, like database drivers, anything along those lines, are all fair game.

[00:04:41] Even if you're in a context where you think you're writing browser code, you can still call it. And we'll do that later on in this course as well.
>> Steve Kinney: And so yeah, all sorts of modules you can just pull them right in. Whether you're in more of a server-like environment or a client-like environment, and we'll talk about those two processes in a second.