Electron Playbook

Creating a Basic, Custom Layout
As we're playing with the structure of our application, well, refreshing every time is going to be a bit of a pain, so I found a little module that I really, really like and I'll share it with you, it's called electron-reload, and I'm just going to install it right now and say save. Now what this is going to do is every time I change a file, it's just going to reload the UI, and it doesn't do anything tricky like LiveReload does, but we can't use LiveReload because we're not using a browser, we are inside the Electron runtime. Anyway, we're going to need to use electron-reload. So to get this thing to work, I'm just going to come in here and right there I'm just going to require electron-reload. And then I need to tell it which directory to watch, and I'm just going to pass in the current execution directory, this root directory of our application. Alright, so if I start our application again, npm start, we get a weird error, I get this all the time. Electron could not be found. Maybe it's just a bug in the app. I've tried to get rid of that message so many times, but anyway, it works. So showing you that it works, if I come over here to index. html, The World's Leading Video Stuff, why not? Well, you can see it just reloaded for me. It's a convenience thing if nothing else, but it will be helpful when we start building out the structural look of our application.

Mac Layouts with Photon
In this module we're going to build out our desktop to look like a true desktop application, bound by the design guidelines of our operating system. I'm going to be focusing on the Mac experience, but I am going to show you Windows components too that you could use. One of them, we'll start right there, one of them is the React Desktop, and well with a lot of things with Electron, it's in early Alpha. So React Desktop could be useful, however, my opinion here is using React with Electron is overkill. I don't think you need it. You'll see what I mean later on as we start doing rendering with Handlebars and a few other things, but if you're a React developer and you really like it, check it out. Here's a demo. It's kind of neat. You can switch between Windows and Mac. So if we switch over to Mac, you can see, well, it's very Mac looking. A little bit off, but it's getting close. Anyway, as I mentioned I am going to be focused on the Mac desktop. I'm assuming that if you're doing Windows you're either going to be using Windows software, and. NET, and so on, for ease of installation. However, if you're using Electron app and you want to go cross-platform and develop for Windows as well, well see, since you're going cross-platform you're probably not going to go with a dedicated look and feel of the Windows operating system either way. If you're building something for the Mac, which I assume you probably will be, then you might want to go with something that looks a little bit more like the Mac desktop. Now this is all CSS and HTML. As you can see it looks pretty close. So if you find yourself in a situation where you need your desktop to look like the operating system, well you could use something like Photon. And that's what we're going to be plugging in in this module.

Handlebars View Engine
The goal for this module is to transition from one view to the next, and to do it in the simplest possible way. Right now, I just have a home view, and this looks okay, but it doesn't do anything. And what I want to have happen is if I click on one of the icons on the left here, I want it to be able to transition this view. And as I say that, I'm having visions of Visual Basics 6. I wrote those apps, wow! Anyway, so, what I want to do is to focus on the simplest possible mechanism, and I know for the JavaScript Front-end people out there you might be thinking just use React, just use Angular, or Ember. And I could, but the thing about it is, and you're going to hear me say this consistently, I have the full facility of Node at my fingertips here. I could use React and hand everything over to React, or Ember, or whatnot, but those frameworks are built to manage web page interactions, to make a single page application on a website, right? Act like a desktop app. We have a desktop app right here, I don't need that abstraction, and hopefully, as you're about to see, creating your own rendering engine is not that difficult to do. I know that sounds nuts, but we don't have to deal with the fluff of the web, we just have this website, and JavaScript, and Node at our command. Alright, we're going to start off bleedingly simple, and then we're going to move on through to creating our view engine. Let's get started.

Full Text Search
One of the primary benefits of having a desktop application is that you can do things offline, but there are some things that are a little more difficult, such as full text search. But the good news is there are tools out there like lunr. js. Of course it's not going to be as good as Elasticsearch or Postgres full-text search; however, it does the job and it does it well, and it's simple to plug in, and that's what I'm going to do. Also, if you recall, I've had a search page here for a while, and off camera I styled it up a little bit, so you didn't have to watch me slog through CSS. So what we're going to do is we are going to index our pages here, The Origins of Beer, Phi, The Golden Ratio, History of Pi, we are going to index all of this content right here so that we can search it. It could come in handy, you never know. And for that, we are going to use lunr. And to install it, it's as simple as npm install lunr. js. And just like that, boom! We have it, version 0. 6. Awesome.

Saving Files
We just added some content to our application. If we head over to our chapter list, we can see we have a brand new entry, Surfing in Munich. This is a real video that I took while in Munich. Check it out. This is groovy. This is a real river that goes right through the center of town into the Englischer Garten, and these people surf this standing wave. It was a lot of fun. Well anyway, my boss thought it would be a really neat idea if we decided to add this to our content, so why not? But one thing that we need to do is to allow for offline viewing. As you can tell this video is hosted up at Vimeo, which is great if you want to enable streaming, but if you want to have offline viewing, you need to give people access to the local video file so they can open it in the viewer of their choice. Well, indeed, we have that. mp4 file. It is right here in our downloads folder. Boom! So what we want to do, what our task is in this module, is to allow people to download this for offline viewing. And you might think it's as simple as just including a link, but it is not. We want to use file dialogs. We don't want to rely on any native browser functionality. So we're going to implement the file dialog and allow people to save this video where they choose.

Handling External Links
Our boss is reviewing our work and really liked the addition of the Surfing in Munich video, but thought it would be a really good idea if we included a link so that people could know more about Munich, and what the name of this river is, and so on. So, I added a link, but uh-oh. Given that we are working inside of a browser that's not really a browser, well you can see we have trouble. You would think that we could get out of this by using target=blank. Well that's just not exactly the case. To show you what I mean, I used markdown in this file, and as you can see, well it really didn't work. So let's actually rejigger this. Let's take this link right here, and we'll do a target = blank. Okay, there we go. So, I need to restart my application because it is kind of stuck over there on Wikipedia. Alright, so now that it comes up, I should be able to pop a brand new browser window, but notice, number one, that my formatting is off, which stinks. Two, when I click on this, that's not exactly what I want. This is a tiny little window, and of course it's not going to do me any good. More than this, the default browser that I have here is Safari; it is not Chrome. This is coming up in a windowless Chrome environment. This is a bit of a pain. So let's fix this. We can fix everything by just doing a little bit of jQuery magic, and also working with the built-in IO stuff from Electron.