Electron Fundamentals, v2 Clipboard Code Overview
This course is out of date and does not reflect our standards or industry best practices.
Transcript from the "Clipboard Code Overview" Lesson
>> Steve Kinney: So this is gonna be our application, we'll have a Copy from Clipboard button. Eventually we'll get some global shortcuts, it'll be able to store clippings. First it will store them just in the DOM. And eventually we're gonna hook it up to a SQLite database that lives in the file system so it can persist in between sessions, right.
[00:00:14] And SQLite drivers are a compile C++ binary, right, which we would not normally be able to just use in a Web app, right? You can't just be like, yeah, yeah, yeah, I wanna just use a SQLite, no, that doesn't work. You'd have to use some Web API, like IndexedDB or something along those lines.
[00:00:29] Our localStorage persist data, we're gonna use a SQL database, mostly because we can, right? It is going to be a single table, a SQLite even might be a little heavy-handed. It's mostly to make the point of how do we work with native modules in Electron? Cool, so this library is, or this repo is this clipmaster-fem-v2 that's available.
[00:00:55] I'm going to kind of go on a tour of what we have in the code base to buy you some time for an NPM install but we can kinda take a look. So a few things you might notice is one, just for fun, instead of HTML, I used Jade.
[00:01:15] And you can see, I just gave it the .jade file extension. And that is all that I needed to do in order to use Jade. I didn't have to put anything else in place, I just gave it the right file extension. If I go to my main.js,
>> Steve Kinney: You can see that I'm just loading index.jade, and it just knows what to do out of the box.
[00:01:35] Electron Forge is clearly a little bit more generous with the comments here. But you can see, this is actually really interesting. Electron-squirrel-startup is when you create a Windows Installer, which we're not gonna be able to get into today. You might wanna add stuff into the Start menu or onto the desktop, and stuff along those lines.
[00:01:56] This will actually do that for you on Windows. And so it is basically how I recommend doing it. Setting it up yourself is also not very hard, it's effectively a dependency that you require in line. And the function returns true if it installed all the shortcuts and basically installed it on Windows.
[00:02:14] At which point you leave the app, and then the next time they run the app, that will return false. And they'll do it out of the box, so that's cool. I'm tending to shy a little bit from the operating system-specific stuff today because I have a wide audience.
[00:02:29] But that is very cool, and very there, you see, they do a very similar thing with the let mainWindow. They are setting the height and the width of the window, which you could do as well. I liked the default one last time, so it didn't occur to me to change it.
[00:02:43] But you could set the height and the width, they load in that Jade file. They're opening the DevTools by default, so if that annoys you, just comment out that line. But that is a way programmatically open the DevTools. They're kinda set up for a little bit more of if you wanted to go multi-window.
[00:03:00] Which is when a window is closed, they set mainWindow back to null instead of waiting for garbage collection, that's cool. When they broke out the kind of app.on ready into its own function that we just saw, they do a few other OS-specific stuff. Which is if you closed that mainWindow in FireCell, it would've quit the app.
[00:03:21] That's technically not Mac OS behavior, Mac OS, you can close all of the windows and the application is still running. So here you can see, if process.platform !== darwin, quit the application when the last window is closed. But that means in Mac the application will continue running even when the last window isn't closed, which makes sense.
[00:03:39] And similar for Mac OS because it can run with no windows open. If they go to click on the dock icon and there are no open windows, create a new window, right? And that's why it's broken out into its own thing. So just a little bit, a lot of the same, a little bit on top of that as well.
[00:04:24] This means that you could also configure settings for SaaS or Jade or anything else that you wanted to do, right? But this is effectively using Babel and env, Babel environment, to say, hey, don't transpile features that are supported by the current version of Electron, right? Cuz Babel out of the box, you might be having to target IE11, right?
[00:04:46] Electron, you're packaging your own recent version of Chrome. So it doesn't have to transpile as much stuff cuz a lot more stuff is natively supported. So this will basically transpile only what it needs to transpile to run on Electron 3.0. And you can see that it's also supporting React, so we'll get JSX, syntax, and then some other things.
[00:05:08] So it gives sourceMaps inline in development but not in production, all right? And so this is basically a Babel configuration file. You can also configure SaaS, Jade, all the other things. You can add more plugins here if you want some other fancy syntax, all of that will work.
[00:05:24] Other than that, it's very similar to the application that we built by hand. We've got a main.js and a renderer, I think, out of the box, they called it index.js for the main process. But for our sanity, I renamed it main.js, but that doesn't really matter. And renderer.js, they don't actually include a renderer file at all by default.
[00:05:43] So I gave us one, as you can see, it's very advanced. Cool, we do have some dependencies in place already, right? You can see there's some packaging stuff that we'll get into in a little bit when we do some of this, but I included react and react-dom. You can see, it actually has electron-compile as well.
[00:06:06] As well as electron-prebuilt composite devDependency, some of this Babel stuff in place, and some eslint configuration.