Get your JS Remote Conf tickets!

Freelance’ Remote Conf’s schedule is shaping up! Head over here to check it out!

 

02:17 - Jessica Lord Introduction

02:40 - Amy Palamountain Introduction

03:14 - Electron 

04:55 - Cross-platform Compatibility

05:55 - Electron/Atom + GitHub

07:16 - Electron/Atom + React ?

07:57 - Use Cases for Electron

15:09 - Creating Electron Apps on Phones

17:25 - Running a Service Inside of Electron  

19:46 - Making an Electron App

24:09 - Sharing Code

27:40 - Plugins for Functionality

31:08 - Keeping Up-to-date/Adding Features

33:14 - Pain Points

36:22 - Using Electron for Native

39:48 - What is a “webview”?

42:12 - Getting Started with Electron

43:28 - Robotics/Hardware Hacking with Electron

On YouTube
193 JSJ Electron with Jessica Lord and Amy Palamountain

Picks

Autolux - Future Perfect (Jamison)
Move Fast and Break Nothing (Aimee)
[egghead.io] Getting Started with Redux (Dave)
Destructuring and parameter handling in ECMAScript 6 (Dave)
JS Remote Conf (Chuck)
Freelance Remote Conf (Chuck)
React Remote Conf (Chuck)
Pebble Time Steel (Chuck)
UglyBaby Etsy Shop (Amy)
Jimmy Fallon: Kid Theater with Tom Hanks (Jessica)

 

 

Special Guests: Amy Palamountain and Jessica Lord .

 

Hey everybody and welcome to episode 193 of the JavaScript Jabber show. This week on our panel we have Aimee Knight.

Hello.

I'm Charles Max Wood from DevChat.tv. Quick call-out to JS Remote Conf coming up in January and Freelance Remote Conf coming up in February. So, if those are kind of your thing, then go check them out.

We also have two special guests. We have Amy Palamountain.

Hello.

I can't remember if I said that right or not.

You totally did.

Alright. And we also have Jessica Lord.

Hi.

Do you two want to introduce yourselves?

Sure. This is Jessica. I am a developer at GitHub. I've been at GitHub about two and a half years now. And I'm currently on the Atom and Electron team.

And what does GitHub do again? I'm just kidding.

[Inaudible] sticker company based in San Francisco. [Laughter]

Oh, that's right. I love the stickers. [Chuckles]

The funny looking cat, octocat. How about you, Amy?

So, I'm Amy. I'm also a developer at GitHub. And I've been at GitHub for about two years. We've done things like the GitHub desktop and now I'm working on the core application team writing Ruby.

Awesome. Now, we might have a little bit of name confusion here with Aimee and Amy.

[Chuckles] So, I'm just thinking to myself how awesome this is, because I'm pretty sure this is the first time on the podcast that girls have outnumbered guys. And it's awesome.

Yes. [Chuckles]

Yeah. You won't hear me complaining. [Chuckles]

Alright. So, I'll admit. I went and I looked at Electron. And it looks really, really fun. It looks like Jamison's here as well. Join in. Yeah, so do you want to give people just a quick overview for Electron? I could probably do it but I would miss I think some essential parts.

Sure. So, Electron, it's an open source project maintained by GitHub. And it came to be because GitHub built or was wanting to build Atom, its text editor. So, if you've heard of Atom, you might know that Atom is built with JavaScript and HTML and CSS. And so, in order to do that, to be able to build Atom, GitHub needed this thing, Electron, to exist. And Atom and Electron have been in development for a little bit now. They've been open sourced for maybe a year and a half at this point, but in development much longer than that. So, this is prior to my joining the team. But the team tried some of the existing stuff like node-webkit and Chromium Embedded Framework and none of them were exactly the right fit for what they wanted to do with Atom. And so, that's how Electron came to one, first being needed, and then be built.

And it was initially called Atom Shell when it was first built, because really the idea was just it needed to exist so that Atom could exist. And it was earlier this year that really, Electron started to stand out on its own. A lot of people were using it and so, we said it needs its own name [laughs] and website. And so, it formally became known as Electron in the spring of this year.

Now, when I was looking at things it looked like it works really nicely for Mac OS. It looked like it might need a little bit of extra help on Windows and/or Linux. Can you talk about the compatibility story there?

Sure. Well, it is compatible with all of those platforms. So, when you are building an Electron app you can package it up and it will work on all of those. Because the Atom team, the Atom… sorry, I'll use the Atom team interchangeably to mean also the Electron team. We're just one small team doing both the projects. But yeah, we're all in the Mac world. And so, we don't have a lot of eyes into the experience of the Windows world. And so, there are more bugs that come up there. But it's still completely compatible. But when bugs come up, issues are filed. And we try and take care of them as fast as possible. But it definitely does ship for all platforms and the Mac App Store now too, as of a couple of months ago.

So, the other thing that I'm wondering here, and this goes more to GitHub sponsoring a project like Atom. How does Atom and Electron [and Git] and projects like that fit into the mission of GitHub?

Well, so it's about building software and building software and collaborating together. And really, Atom started because it was a dream of Chris Wanstrath many years ago to use web technology to build a text editor. But also, I think in a lot of ways Atom, it's going to start changing how we think of the development process, right? So, Atom right now is Git aware. And there are some packages people have built and there's stuff that we're working on now to actually do a better job integrating Atom with Git and GitHub so that more of the development experience is in the editor, rather than you have terminal open and you have your web browser open and you have your editor open and you're going between all of these things. So, Atom actually has the potential to really change the flow of development, I think.

It almost sounds like a Google style approach where they try and make the web better so people will click on more ads. And if you make developing software easier, then people will make more GitHub repos and things like that.

Yeah. [Chuckles]

That's a cool plan.

So, I know Atom for a brief moment flirted with using React. Was that related to Electron at all or is that totally separate? And does that apply at all to thinking about Electron?

That was a separate decision. That was strictly a decision about Atom and what it needed as a text editor, not really anything to do with Electron. So, I think people are still building Electron apps and using React. But React ended up just being more than Atom needed.

Sure.

And so, that's why we ended up pulling it out and are using a Node module that does DOM diffing, which was the core of what we needed React for.

I kind of have more of like an intro question. So, besides Atom can you talk to some of the good use cases for Electron, for people who aren't really familiar with it?

Yeah, totally. So, Electron… I'm super excited about Electron even though I appear… you know, I'm biased. But it's awesome because it lowers the barrier to entry in creating a desktop app. Because basically if you can create a website, then you can create a desktop app that people can download an install on their computer with an icon and it feels like a desktop app. There are no installation guidelines that you need for people.

And so, Electron at its core, it's Chromium which is the open source version of Google Chrome. And then Node, which is the server, JavaScript running on V8. And Chromium is also using V8. So, Electron combines these two into a shared runtime, a shared V8. And so, you basically are creating websites with access to Node everywhere so that you can do anything that you can do with Node. You can use any of the hundreds of thousands or millions of Node module that exist now. So, the scope of what you can do with Electron is pretty large. So Slack, Slack's Windows and Linux desktop apps are written in Electron.

That's cool.

WordPress.com is now an Electron app. Let's see. Oh, Mapbox Studio is an Electron app. And so, these are really substantial desktop applications with lots of features. But you can also create really simple tooling with Electron because you're just creating… you can just create a single-page app in Electron and make it an Electron app. You can run things in your toolbar, like at the top of your screen.

So, one that I love to talk about was written actually by another GitHubber, Mu-An Chiou. And it's called Mojibar and it's an open source app. If you go to GitHub.com/muan/mojibar [chuckles]. And it's just a super small, simple interface for searching emojis based on keyword, right? So, it just basically takes one small task and turns it into an Electron app that's just a tool, just a super focused tool. And so, there's a really wide range of things that you can do with Electron. There's a cool app called Playback written by mafintosh. His name is Mathias, but his GitHub username is mafintosh. That basically creates a VLC-like video player but uses torrents to stream torrents. You can talk to Google Chrome or [inaudible] with it. You can share a playlist. And so, there's just a ton of stuff you can do, really, I think. [Chuckles]

My friend Sam actually made a cool app called, I think it's called Npm Scripts GUI. It just reads in your package.json file and gives you little buttons to click to run all of your scripts.

Oh, [inaudible].

It's awesome to see. It's not a fantastically complex app but if I were to try and build that out of Cocoa on a desktop, it would have taken me five weeks or something like that.

Yeah, totally. [Chuckle].

So, it's cool to see something like that more accessible to people that don't want to dive into the Objective-C libraries and stuff.

Also, plus one for the amazing creative name.

Npm Scripts GUI?

Yeah, it's impressive.

It's got the [inaudible].

Gee, I wonder what it does, right?

Yeah, exactly.

One of the things that I really like about Electron is, and that I found hard in the past when building apps, native applications not in Electron but in native technologies, I found it really hard to get a shared experience across different platforms. And you see this, right, with people who have built an app on your iPhone and then they try and [inaudible] it on an Android. And suddenly, the experience doesn't work or it isn't as clear as to what's going on. You end up having the same thing across Mac, Windows, and Linux, if you're not designing specifically for each of those platforms.

And one of the things that the Electron team has done a really good job of is where there's been shared APIs, like Jessica mentioned the Mojibar, the thing that runs in the taskbar, now those are concepts that actually exist in Linux and in Windows. They're just in a sort of subtly different way, right? We've got the start menu. We've got things that are pinned to the dock. They're the same kinds of ideas, just the design language is a little bit different. And so, the thing that's implemented really well is you have one API in Electron where you can start designing things like menu bars, dock icons. And Electron takes care of making sure that that looks and feels native across each of those platforms, which means that you don't have to come up with those pieces of design language yourself, or even really understand how they might work on each of those platforms. That's super helpful.

Yeah, I thought that was really interesting. I watched Amy's talk from what, Nordic.js was it?

Yeah, it was.

And yeah, I was really impressed with that. All of the dock stuff and the menu stuff, it's not just a box that you load a web page into.

No, it's a lot more than that.

You can if you want to. [Laughter]

You can.

Yeah, I gathered that. But sometimes I want it to do special things and it didn't look very hard to just hook that stuff up. So it's, okay when they select this from the menu then execute this function.

Right. And if you were looking to build that in Cocoa, and then build that for Windows, you'd be looking through I'm going to say a pretty obscure documentation to figure out how all of those things work. You'd end up designing components that you couldn't share across each of those. Even if you had a shared codebase, you couldn't share the codebase for visually [surfacing] information. There's no way you could do that. So, aside from not having to think about these things, these problems more than once, you're also only having to code them once. So, it really is that ‘write once, run anywhere’ dream that we've been talking about for many, many years.

Yeah. One other thing I want to just throw out there too is that in order to do that kind of stuff in Cocoa, specifically in Objective-C or Swift, you wind up doing, I forget what they're called, inputs and outlets. And you have to go into Interface Builder and build it out, which isn't always straightforward. Where with Electron…

Huh, that's being generous. [Chuckles]

Yeah. With Electron, it was really simple because you just put it in where you want it and tell it how to put that menu bar together and you're good to go. So, it's actually simpler at least to my thinking.

It's much simpler, I think. It's great. It's fantastic.

Yeah. And you're also… so, you're designing essentially websites with Node. But you also get to remove the burden of having to design for multiple browsers, which is like the problem that crops up when you're designing web apps. Because it's only Chromium. You just design it to work in Chrome and it works.

One thing that I'm wondering about with the Chromium, I'm assuming there's some kind of web server-ish thing going on with it. Is there any way for me to view those apps, say running the app on my Mac or my MacBook Pro and load it up in a web browser on my phone?

I don't think anyone has worked on that yet. People ask me all the time, like when can you create Electron apps on phones? But I haven't heard anybody talk about successfully doing that. I know it's something we're not actively working on right now because there's not a big use case for having Atom on a phone. [Chuckles]

Right.

I just got to build this app but all I have is my iPhone. [Laughter]

No, I guess…

[Inaudible] type in the angle brackets.

What I was trying to ask I guess was that since it's loading it up in Chromium, something's got to be loading the page in the background so that Chromium can grab it, or you know, so it gives it HTML one way or the other.

You're saying there must be a web server in there? Is that what you're saying?

There must be a web server in there. So, can I use it as a web server?

I mean, not necessarily, right? And you guys tell us, but is there a web server built in? Or is it just loading resources from file URLs?

So, as far as I know, you give it a file URL. And I think the specifics of the Chromium is it's actually just the rendering engine. So, it's not the full Chromium stack. And so, I think under the hood, and Jessica you can probably talk more to the Electron APIs, but I'm reasonably sure that the browser window inside Electron that is provided to you just delegates off to that rendering engine in order for it to be rendered. So, there's no actual server involved.

That's also my understanding. I haven't touched or looked at any of the Chromium stuff. But it is, it is Chromium content library that we only use that portion of it whereas other projects will use all of Chromium. We're just the part of Chromium that's drawing the web page. So, you just, you give it the HTML and it renders it. But there's just Node there available in the same process.

I was trying to get creative. Okay. [Laughter]

Why you always got to put a server in all your things? [Laughter]

Shut up, Dave.

He's a Rails guy. [Laughter]

Make me feel better.

That's true. You just wanted something to run Rails on, didn't you?

That's right. [Laughter]

Oh, hang on. I've got an interesting story here about having run a service inside of Electron. So, one of the apps that have been written in Electron is Visual Studio Code which is a free code editor that runs on all the platforms. And they do something really interesting with the architecture. And so, what they do is… so, inside Electron you have what is called these browser windows which you can spin up as many of these as you like. And they may, you may tell it to actually render a physical window which you're going to put some HTML content in. Or you can hide it in the background and sort of use it like a bit of a makeshift thread pool.

And so, one of the interesting things that the Visual Studio Code team has done is they actually spin up inside these browser windows, they treat them like makeshift thread pools. And they actually spin up HTTP servers inside of those. And the reason they do that is because all of the logic is actually written in C#. So, they're actually shipping binaries and then running HTTP servers which are then called into to do all the crazy Visual Studio Code related logic which has already been written somewhere else. And so, that means that they can share it. And it sounds like a lot of overhead, right? But it's actually surprisingly not. That editor is very, very fast. They've managed to pull it off. It's kind of an interesting idea.

So, they'll hit a local HTTP server. I'm assuming it's using Mono or something to run crossplatform, to do autocomplete and I don't know, any kind of logic stuff?

Totally. I think they spin up a…

Maybe not now. They've open sourced those libraries, right? I wonder if…

Exactly, yeah. I think it runs an OWIN HTTP server inside each of those browser windows. Very interesting.

That is [inaudible].

So, is the frontend of VS Code written in HTML and JavaScript? Or is it all still written in C#?

I believe it's written in HTML and JavaScript, just the way that you would any other Electron application.

Oh, I didn't catch that. It's an Electron app?

Yes.

Okay, I'm sorry. I must have missed that. But that's amazing.

I'm just going to throw this out there. We did do an episode with Erich Gamma and Chris Dias from Microsoft about Visual Studio Code on Adventures in Angular. So, I'll put a link to that in the show notes.

Cool.

I will say that Atom is a cooler name. [Laughter]

But [you know], whatever.

It's got less baggage.

Agreed. [Laughter]

Yeah.

To make an Electron app, you just run the little generator and then you just write HTML and JavaScript, right? That's all there is to it.

Right.

Or am I oversimplifying?

I mean, you can make it as simple as you want, right? You don't even have to write the HTML if you just point Electron to an existing website. [Chuckles]

Ah.

[Inaudible] you a desktop app that just goes to a website. So, if you actually wanted to make certain websites that you go to all the time a desktop app and not another open tab, like you could just create your own special one to do that. But yeah, you just create an HTML page and point Electron to that first page. And it just kicks it all off from there. So, you're just designing HTML pages that link to each other the way you would with a website. You just have the ability to in that HTML page inside of a script tag inside of the body, you can call 'fs dot read file' and do just whatever you want with Node right there in the HTML file and then update the DOM with that. So to me, that's the coolest thing, is that…

Yeah.

You're writing, you're updating the DOM with stuff you're reading from the user's system with Node.

[sings] Dom, dom, dom, dom.

That was cute. So normally, if I'm serving JavaScript code in a web server into a web browser, there are all kinds of restrictions. And you just mentioned one of them. Like normally you wouldn't be able to read files from the user's desktop. But you're saying you can if you build an Electron app and serve up JavaScript? That JavaScript can now be executed by the Node that's embedded inside of Electron and it can do all those things without the sandbox constraints?

Yes.

Without latency going over the network and saying, “Please, please, please give me a file?”

Yeah. [Chuckles]

Oh, man.

And you could pull in libraries like React and Angular?

Yup.

Do you find that your perception of what good practices changes? Because you probably have all this built-in scar tissue from like, minify everything, concatenate everything, limit your requests.

Yeah, yeah.

And it seems like it's just a whole different world where many of those things don't apply anymore.

Yeah. It is a different world. And one of the interesting things that's starting to surface where people who are now like… there are enough people building Electron apps and giving talks and writing blog posts on best practices. But you have to rethink your CSS. Like you get to design your site with CSS but then you also have to think about, there are web defaults that really don't make sense in a native-feeling app. So like, hovers and the way that links appear by default on a website aren't how they appear in a desktop app. So, you actually kind of need to create a layer to desktop-ify a website so that it doesn't feel like a website, it feels like a native app.

Another GitHubber had this great project called Photon by conors. I think he's C-O-N-N-O-R-S. Actually, you can just go to PhotonKit.com. He created a whole visual library for Mac apps. So, he's done all the hard work designing the CSS and all of that for you. And so, that right there is something you could just take and start to run in creating a really native-feeling app in Electron.

Oh, that is so cool.

So, it's kind of the Bootstrap of Electron.

Yeah. For Mac.

Yes, yeah.

The Mac-only Bootstrap for Electron.

Yeah.

Yeah.

I don't know why they didn't call it Macstrap, but whatever.

That's kind of a weird name.

That's probably why.

I was on roll, too. Anyway, moving on.

So, there's a mail client called N1 by Nylas. And it's really great looking. And that team has done some really good talks about how to build a native-feeling Electron app. Actually one of them talked last week at BrooklynJS. So, I'm sure if you google for Nylas N1 talks you'll see. They'll turn up and you'll get some good tips from the stuff that they've been doing in making it feel really desktop and not website-y.

So, we've been talking about making Electron apps look native and that's cool. But it seems like some of the Electron apps that I use, well actually I only use one and it's Slack, the web app and the Electron native app, well air quotes “native” app, they look almost identical. Do you think that that's pretty common practice to make your web app and your desktop app with Electron look almost the same and maybe even share code?

I think so. I think sharing code is the win. So, if you can do that, then why not? Unless there's some reason in terms of like experience wise where you really wanted to let your users know you're not on a website right now, then I think there are a lot of benefits to sharing the code and having the experience look the same.

I'm not so sure that having exactly the same look and feel across platforms however, I think that that's something that needs to be taken into account. And I guess I'm probably heavily biased here because I've spent the last two years of my life thinking about how to make GitHub desktop on Mac look very different from GitHub desktop on Windows, yet still be functionally the same app. But I have strong feelings that when you're designing applications for various platforms, that you need to take into account what feels native, the behavior that feels native. And a lot of those things you can share because there are a lot of similarities in terms of paradigm. But when it comes to the design I guess, things start to deviate a little bit.

Yeah, that's a good point. And there are also standards that exist in menus on Windows that are slightly different than they are in menus on Mac. And so, we've had that come up with Atom where, do you call something settings or preferences and these kinds of tweaks that you need to do. Because you're manually saying, “You decide if you call it settings or preferences or choices.” You can pick the word, right? So, it's up to you to make sure that you're doing that in a way that it fits the experience of each of the platforms that it's running in.

Right. Jessica is definitely right. Because otherwise you end up in a situation where your users don't… a name is subtly different from what they expect.

Right.

They don't really know what that thing does anymore and they're too afraid to click it.

But you can, if you want to and I feel like there might be some cases where this would be nice, like I mentioned that video app called Playback earlier. You can strip your Electron window of all the native elements, like no border. You can make it have no frame, no top bar. And then you can CSS style them yourself. So, you could create your own sort of operating system look and feel. You don't even have to have the traffic lights that are on the top of a Mac app if you don't want to. And so, you could create your own sort of language there that worked the same way across the platforms but with not any of those platforms.

Built with Chromium but completely Chrome-less.

Yes.

I was just going to ask a question and I realized I didn't need to. Like, how do you tell what platform you're on? And then you can already do that in Node.

Right.

[Chuckles] So, you just do that.

Yeah.

Sorry, I feel like I'm trying to click my brain into a different setting to figure this out. [Chuckles]

Because it's so similar to what I do every day but so different in some ways.

So, one thing that I'm wondering about is, let's say that I get in and I want to do something with Electron. And there are certain components that I think are probably already built for Electron. Are there specific plugins and things that I can pull into Electron to give it a certain level of functionality before I even get started?

Oh, Amy's worked on one.

Yay, Amy!

So, I'm working on a project now called Electron Accelerator. And the idea is sort of… one of the things that's a little bit difficult with getting up and running is you can spin up your Electron app and you can write a whole bunch of code. But then at the end of that what you want to do is package it up and give that to your users, right? Put it on the App Store or whatever it is that you want to do, send it out. And you want to do it in a way that has automatic updates enabled so that you could ship continuous updates. There's a whole bunch of legwork that you need to do to get that up and running.

So, the idea behind the Electron Accelerator project is to provide a one… well, not one-click but it's a command line utility. It's an npm package that you install and it allows you to initialize an Electron application. It allows you to set up automatic updates for your various platforms and get going kind of in a bootstrapped build system as quickly as possible. So,  I've only just started working on this. So right now, I've got support for a Windows package and release. And next up is the Mac App Store package and release system. So, if anyone's feeling inclined to come and help me on that project, I will gladly accept your contributions. It's ammeep [inaudible] Electron Accelerator.

I just googled Electron Accelerator and got a bunch of Wikipedia links.

Yeah. We still [Inaudible] name.

So, it's probably not the…. [Laughter]

I thought electrons flowed at roughly the speed of light? [Chuckles]

They don't anymore. [Laughter]

That's why they need an accelerator. [Chuckles]

Clearly.

There's a module called electron-packager. But it's simply just packaging it for the three platforms as a command line tool. Then there's electron-prebuilt, which just lets you run Electron from the command line. So, it's actually nice to have globally installed in your computer. So, if you're working on multiple Electron apps, you just 'cd' into that directory and then just run 'electron dot' and then start testing your app. And there are really nice tools that you can add to your npm scripts so that you can streamline starting your app and streamline packaging it all up. So, you can just do 'npm run build all' and then it will run the commands for using these modules and packaging them up for the different platforms.

Yeah, just to further encourage people to use those modules, they're really, really good, especially the prebuilt one. It turns out building the lib content Chromium module is kind of [hefty]. So, downloading the prebuilt binaries and having it all done for you packaged with Electron is like the most helpful thing in the world.

So, we have a webhook on the Electron repo set up for electron-prebuilt. So, every time a new Electron release is [cut], electron-prebuilt is updated with that release. So, it's super handy.

So, what kind of stuff comes out in those releases? If you can already do, you can build web apps that hook into Node more directly, what else? What are you adding to Electron?

Well, we're frequently updating Chrome and Node.

Okay.

Chrome and Node are updating and so…

So am I.

So, we try to stay as up-to-date as we can with those. So, whatever cool stuff comes out in Node and Chrome, you can use in your Electron apps without having to do anything. So, if you're used to using Babel you can probably not use Babel in Electron app and still use all the ES6 features you want, because there's so many of those already in V8 which Chrome and Node are using. So, there are nice things like that, that come with us just staying up-to-date with those. And then there's still a lot of fixing of bugs, crashes that are happening in different places, things like that. And adding features. People… so, there are things that don't necessarily come up as a needed feature in Atom. So, they don't become… they don't come onto our Electron to-do list but other people find really useful to have in their Electron apps. And so, we have a great little community of contributors who are putting in a lot of features for capturing screens or for printing to PDF, and a bunch of different stuff.

JAMISON: So…

Oh wait, new API coming out, too. So, the new API is currently in the latest version of Electron. But we're going to go 1.0 in January. And that will be our stable APIs. So, those changes are happening. And then that, like some of it is just changing the naming syntax so that everything is consistent throughout the API.

That sounds like a little thing, but it isn't a little thing.

It's just a number.

I've written enough inconsistent code that…

I don't know. Yeah, that's cool that you're going back and cleaning that up. Do you find that people get stuck in common areas or the same areas doing Electron apps? What are some of the pitfalls that people encounter when they get started?

Hmm.

Nothing. It's perfect.

Yeah.

[Everybody's] really good at it.

I think one of the things that I found really hard when I got started was getting it packaged up on all the different platforms. So, there's interesting things like releasing on Windows, you need to use a particular kind of archive. You need to use NuGet which is the package manager that runs on Windows. Now, if you don't come from the Windows ecosystem you probably would have never heard of NuGet before and you would have no idea where to even begin. You need to, in order to package on Windows, you need to have Visual Studio installed on the machine that you're packaging on. And that's because it uses a whole bunch of C packaging binaries that come with Visual Studio. So, I think…

So, do you need a Windows machine to build for Windows?

Yes, you do. You also need… You'll also need… oh, not to build, sorry. To package for release. So, if you want…

You can build all the platforms from Mac OS.

What's… I guess I don't understand the difference between building and releasing.

Sorry. Packaging.

Or packaging, yeah.

You create the binaries for Windows and Linux from your Mac machine with electron-packager. I'm positive. [Chuckles]

Oh, cool. So, it sounds like electron-packager has solved some of those problems.

Yeah. It's also still confusing to figure out all the different icons that you need for the different systems.

Oh, so what I'm specifically talking about, and I should be really clear on this, is packaging for Squirrel auto update. And that's because it uses the NuGet Squirrel auto updating for Windows users, Squirrel for Windows which runs on the back of NuGet. Which means if you want autoupdating you need to build using Squirrel for Windows. And there's an npm package with I think is called, it's on the Atom repo. I think it's called grunt… oh, I'm just going to look for it.

Okay. But if you're just a lowly scrub like me and just want to distribute binaries manually, then you can do that from any platform it sounds like.

Totally.

Okay.

Does it also sign your Mac application bundles so that you don't get the warning when you launch them that it's an unsigned vendor or untrusted vendor?

Oh.

I don't trust you anyway.

Clicking 'proceed with using this untrusted code' or whatever the name of that thing is, is just how I rebel against the world.

So, I kind of don't want that to go away. It just makes me feel like I can live on the edge a little bit.

[Chuckles] Off the top of my head, I'm not sure. I feel like I might have seen some issues come through about that. But then, I'm not sure. So, it would take someone looking through the docs or [inaudible].

Yeah. We're having a great time with all the packaging stuff but I have kind of a wild change of topic. Is that okay? [Laughter]

As much as I like talking about NuGet Windows deploys. So, this may be… this is kind of a philosophical question. But Electron is all about bringing the web into desktop apps in much the same way it seems like some other platforms like PhoneGap are all about bringing the web to native-looking apps on mobile devices. But then the corollary to that are things like React Native and NativeScript which are also written in JavaScript but don't use HTML and JavaScript, or sorry HTML and CSS for their display. Are you aware of anything like Electron that's similar to that but for the desktop so that I could use native, actual native controls but with JavaScript? Is that a thing? And is that ever a thing that Electron… or is that just completely philosophically opposed in the Electron community?

[Laughs] I don't know. Amy, do you know of ways to use… I've never tried to do anything native before working on Electron stuff.

You mean like bringing in native modules?

No, it's really…

Maybe like native UI controls more, right?

Yeah, exactly.

Yeah.

I think that would be strange, because you'd be putting… because you're still pushing into the DOM right? You've still got a DOM to work with to render to. So, if you wanted to bring in some native control, yeah. Theoretically…

I'd have to…

Theoretically you could definitely import those modules. You'd have to write a JavaScript bridge. But I just don't know how you would go about using it.

Well, based on what you've talked about Electron, it seems like that's not really part of the Electron philosophy. But if I were to start a project called say, Proton, that, it's all about… [Laughter]

Native controls with JavaScript that's similar to say React Native, I guess I'm just saying is there a thing like that in this ecosystem where you can build native desktop apps using JavaScript?

I don't… I'm going to chime in here because I've had conversations with the NativeScript guys. We had them on this show. I know…

Yeah.

Yeah, we did. We didn't have them on Adventures in Angular yet. I knew we were coming up on one of them. Anyway, but I've also talked to a few of the other ones out there. And it seems like they either do essentially what Electron does in that they open up some web view and lets you build your interface with web components. That's what PhoneGap does.

Yeah, yeah.

It pulls in some native stuff but mostly not so much. And then you've got NativeScript and React Native than actually turn around and use a JavaScript bridge on the mobile device to make the functionality work. And so, when they are connecting to or emitting events to and from actual native components or views or things in the views, those are actually being transmitted across that JavaScript bridge and are basically native code. In fact, they are native code.

They are, yeah.

And so, I haven't seen the same thing for Mac desktop. And between the iPhreaks show and this show, I would think that there might be something. But I just haven't seen it yet.

Can I ask a…

I just need to point out that if it was called Proton, you would have to be using native technologies to build web apps for it to be the opposite of Electron.

Sorry, Dave.

I did want to interrupt really quickly because I think not everyone is familiar with what a web view is. If you haven't done stuff for your phone, like you were saying PhoneGap or something, not everyone may know what that is.

So, I can answer this just because I've talked to a lot of different people about it under a lot of different contexts. But essentially what it is, is it is a small web view which you can think of it as almost like a small web browser without the Chrome that's really, like I said, small. So, you can build applications for the phone on them by essentially creating a view that takes up the entire screen and then you build your components into it, your look and feel and all that stuff, usually using HTML, CSS, and JavaScript. But on the mobile devices, they actually consider all of the buttons and other components to be views themselves. And so, you have views within views. And so, essentially it's an interactive component on the screen. And when we talk about a web view, that interactive component is actually a window that renders HTML and JavaScript and CSS to do whatever job it has.

It's a browser that ships with the applications, correct?

Right.

Yeah, pretty much.

And it's built into the language. So, in iOS it's a UI Web View. They have a newer one. I don't remember what it's called off the top of my head. But yeah, that's essentially what it is. So, you put it in there and then you give it either the HTML, JavaScript, and CSS to load or you tell it where it is on the web.

Perfect. I just wanted to clarify that [inaudible].

That's a good question. Jessica or Amy, do you have things that you'd want us to talk about that we haven't talked about yet?

Someone should build an Electron OS.

That sounds awesome. [Chuckles]

Just upgrade to Emacs from Atom. [Laughter]

Did I hear a groan in there? I can throw you off the show. [Laughter]

No, I was just clearing my throat. That's not…

Oh, okay, okay. Just making sure.

I was walking through some code today with someone in vim and it made me embarrassed because it's so janky. [Chuckles] I like using it and then I feel bad when other people watch me use it.

I feel bad when I make other people use it. No, no, no. Control C. [Laughter]

Control A. No, A! I'll go to the front of the line. Never mind. [Chuckles] Let me drive.

I've never wrapped my head around it.

You're not the only one. [Laughter]

Alright.

So, the Electron OS. That sounds pretty rad.

ElectronBook.

Oh, and if you… it's really pretty easy… I know it's the worst thing to say in documentation, that something is easy, but it's pretty easy to just spin up Electron for the first time if you really just want to look at it. If you already have Node on your computer that means you have npm. So, all you do, if you go to the Electron website, electon.atom.io, there's a module called electron-quick-start. And sorry, actually, I should publish it to npm. Why is it not? Okay, I'll do that. But if you clone the repo for electron-quick-start and you then just do npm install and npm start, you get an Electron hello world. And so, it's pretty nice and easy to see from there. Like, “Oh, this is literally just a web page running and this web page is using some Node.” And I'd use that to get started on Electron app. I will just clone that and then go from there.

I just want to kind of put another testimonial on this. I was trying this yesterday, followed the directions on the website, and I was up and running in a couple of minutes. It was really easy.

Cool.

Have people done stuff with robotics or hardware hacking in Electron? Because it seems like…

Ooh!

That was a big thing in the Node community a while ago. And it'd be [inaudible]…

Yeah, [I'm really]…

To have more than just a CLI hooked up to that.

Yeah, I'm glad you brought that up because actually, Electron works on ARM devices.

Oh.

So, that's really cool.

Oh, wow. Sweet.

Yes. There is a company called JIBO, J-I-B-O, that is building a robot that is Electron. Its face is Electron. So, it's super cool.

So cool.

Nice.

Yeah. Oh yeah, I would love to see so much more experimentation in the ARM space. Because if you can build an Electron app that runs on ARM, then that's a whole ecosystem in which there aren't a lot of desktop applications.

So, that stuff… like is the Raspberry Pi ARM?

Yes.

Yeah.

Mmhmm.

And some Chromebooks.

That's all I know about ARM. Oh, Chromebooks, okay.

Yeah. That's how I learned about ARM and got into this world, was I bought a Chromebook and then realized, “Oh, this is ARM.”

And it's not like I thought it was.

I guess I'll run Chrome.

[Chuckles] Alright.

It's cool.

Well, let's go ahead and get to the picks.

Alright then, before we get to the picks I just want to acknowledge our silver sponsors.

js}. Let's face it: errors cost you money. You lose customers or resources and time to them. Wouldn't it be nice if someone told you when and how they happen so you could fix them before they cost you big-time? You may have this on your backend application code, but what about your frontend JavaScript? It's time to check out {Track:js}. It tracks errors and usage and helps you find bugs before your customers even report them. Go check them out at TrackJS.com/JSJabber.]

Jamison, do you want to start us off with picks?

Yeah. I just have one pick today. I was going through some old music and I went on just a journey, like finding more and more stuff that each song reminded me of another one. And I ended up back at this band called Autolux which is one of my favorite bands in high school. And it turns out I still like them even though I haven't listened to them in a long time. They have a song called 'Future Perfect' which is, it's also the name of an album. But the song isn't on the album that it's named after. One of those weird things. But that's my pick, the song 'Future Perfect' by Autolux.

Awesome. Aimee, what are your picks?

So, I have one this week. And I believe this is a little bit older. But I don't remember it ever being picked, and it was really, really good. So, it's called 'Move Fast and Break Nothing'. And it's based on a talk. But I thought it had, it's a pretty long blog post but it had a ton of really good insight if you're working on a large team and you have a rapid release cycle. You're like, shipping once a day, twice a day, multiple times a day, whatever. So, I'll put a link in to that. It's really, really good.

And that's it for me.

Alright Dave, what are your picks?

Alright. Two picks today. I recently took the time to sit down and really enjoy Dan Abramov's Redux Egghead series. It was fabulous. So much good information in there. The cool benefit of doing that series is that not only will you learn Redux but you'll also pick up a bunch of really handy ES6 tips and tricks that made me feel more awesomer.

The second pick is a website called 2ality.com. That's the number two, A-L-I-T-Y dot com. Specifically he has an article on there called 'ES6 Destructuring and parameter handling'. And I tweeted about this, this week. And it is really interesting. A bunch of cool stuff that really has its roots in ES6 destructuring but that makes the language so much better in ways that you might not expect, including passing named arguments or arguments by name to a function instead of just positionally. Super slick. A really great write-up and lots of really, really good directly applicable real-world examples. Just tons and tons of code snippets.

So, those are my two picks for today.

Awesome. I've got a couple of things. I did mention at the start of the show JS Remote Conf and Freelance Remote Conf. I forgot to mention that in May… I keep getting asked about this. “Are you going to have any React content?” And the answer is yes. I have at least one talk that includes some stuff on GraphQL. And there are a couple of others that mention React. However, I decided since I had so many people asking about it that in May I'm going to do a React conference. So, it's going to be online and it'll be the same format as the other conferences. So, if you're wondering just go to ReactRemoteConf.com and you can check that out as well.

I'm also going to pick… I got an update on my Pebble Time Steel watch. And it now does fitness tracking, which is kind of fun And I've been kind of missing that from my Fitbit because I got rid of it because it was giving me… irritating my skin. So anyway, I'm going to pick the Pebble Time Steel watch.

Amy, what are your picks? Or other Amy? Doppelganger Amy.

[Laughs] I have one pick today. It's a bit of a silly one. I recently discovered this shop on Etsy called UglyBaby. [Laughter]

And they… And I'm pretty obsessed with the art on there at the moment. They make a whole bunch of art that they call shower art. And they're kind of these, suction cup…

Oh my gosh.

They're like suction cup rubber things with old discarded toys and then funny messages in them. And they're all glittery and they're really cool. And they've got messages like “No woman needs a hero” and I just got on delivered today that says “Ring ring, it's your butt” and I think it's the funniest thing I've [Inaudible] in a while. [Laughter]

So, that's my pick.

I see “Poop like no one’s watching” [inaudible].

Yeah. [Chuckles]

Really good. So, my pick is the shower art from UglyBaby.

Oh no.

This is amazing.

Okay, Jessica. What are your picks? Try and top that. [Chuckles] Just kidding.

I can't.

I'm already in Christmas vacation mode so I'm just watching internet videos. And so, I'm just going to mention I watched this one from Jimmy Fallon this morning. It's the best I can do, a Jimmy Fallon clip. But it's called 'Kid Theater with Tom Hanks' and they have a seven-year-old write scripts that Tom Hanks and Jimmy Fallon act out. And I teared up a little.

[Laughs] Cool.

Awesome. Alright, well if people want to know more about Electron or follow up on what both of you are up to, what do they do?

The internet!

I am at J-L-L-O-R-D on the Twitter. And I tweet about the Electrons. But also, I tweet from the ElectronJS account when we write blog posts and stuff. So, follow the ElectronJS Twitter account and you'll see when we write blog posts about important stuff.

Alright.

And I am ammeep on the internet. That's A-M-M-E-E-P. And yeah, I have a blog as well, which is amy.palamountain.in. I think there's probably a link to it from my Twitter bio. Yeah, that's me.

Alright. Well, thank you both again for coming. Thanks to our panelists as well. We'll go ahead and wrap the show and we'll catch you all next week.