Sessions is temporarily moving to YouTube, check out all our new videos here.

Making Desktop Apps with Electron

Matt Andrews speaking at HydraHack in March, 2017

2739Views

Great talks, fired to your inbox 👌No junk, no spam, just great talks. Unsubscribe any time.

Making Desktop Apps with ElectronEnjoy this talk? Consider sharing it.

About this talk

An introduction to Electron: what is it, and why would you use it?

Transcript

Cool. Hi, everyone. Can I get a really quick show of hands, who's used Atom, the text editor, before? Okay, about half the room. Or Visual Studio, I think, as well? About a third. Slack, like a desktop app of Slack, rather than the web one? Okay, almost everyone. Cool. Okay. All of those things use Electron, which is what I'm going to talk about today. So, I work for a team called the Digital Guerrillas. We're part of the BBC, and our reamer is to make kind of cutting-edge digital content for young audiences, however nebulous that sounds. And we were kind of messing around last week with animation, so basically, one of the non-technical members of my team turned to me, I'm a developer, and said, "How can we automate animation?" So, say we've got an audio file of someone speaking, how can we turn that into an animated sort of set of lips, if you like, of them talking? And I looked around, and there's a bunch of kind of command line tools to do that which extract shape files, which basically work out the movement of a mouth equivalent to speech, and how it should look. So, I plugged a bunch of audio files into that and got this. - [President Trump] I'm reaching out to you for your guidance and your help, so that we can work together and unify our great... I'm sorry to bring Donald Trump into this, but basically, this was a really basic thing that we did. We were able to basically throw a text file and an audio file at this app, and it produces that video. And we were interested in that because we can put things out for the BBC very quickly using this technique. Now, the way this worked was it was a command line app, so I wrote this. It's a simple node app, it pulls together a few different tools and basically spits out that video. This is what you needed to do to actually run the app and get it to output that. Now, that is reasonably straightforward for a developer, but if you're going to run this and you're not a developer and you're not really used to using the terminal, this is quite scary. So if I showed this to our scriptwriter, for example, he's not really comfortable with doing all of that, and it might not even work on his machine. So what I did instead, I looked into Electron, and Electron let me build this. Now, this is just a simple web page effectively bundled up into an app that, basically, it just inputs into that command line argument that I just showed on the previous slide. And you produce that and... - I'm reaching out to you... - Oh, sorry, I'll stop Donald. You get your nice video at the end of it, and you even get a kind of output terminal on the side there that shows what you would actually get back from those commands, so if it needs to be debugged, you can do that there. So, I'm just going to walk through how I made that and how you might be able to do something similar. So, this is an example of "Hello World" in Electron. So, something like this is basically going to get you an app on the screen that loads a local file within your file system. So you can see there, it loads index.html, that's part of your app, and you specify some dimensions for the initial window, and it gets you something that looks like this. So, straight away, you've got a native app there that's running on your platform of choice, so if you do this on Windows or Linux and you run that command, electron ., you're going to get an app that works in the same conventions as the platform that you're doing it on, which is quite cool. And all that's done there is loaded literally a web page inside a window. But the cool thing is, once you've built your app, you can package it out really easily, as well. There's a node module you can install called electron-packager. You run this command here, and you'll get builds for all four of those platforms, which is really cool. So, you get a Mac App Store, as opposed to the OSX one, that's one that you can actually submit, if you want to put it out on the Mac App Store, and you just kind of get that for free, which is quite cool. I'm going to talk a little bit about how Electron works. So, you have two processes in Electron. There's the main process which, if you think about it from a web point of view, this is almost the service side of the app. This might be where you go and work with files, load in dependencies, do some background tasks, and then you have what's called the renderer process, which you can think of as the client side. This is the browser bit, basically. This is what your users actually see on the screen. And those two things can talk to each other, kind of in the same way that you do in a web app. So you might have messages that you send from your main process, so this is like a Pub/Sub model, basically. You can publish messages out to the renderer process. The renderer process can listen to those messages and send them back the other way, as well. So, in my app, I had buttons on the screen, and when you click the button, it just publishes a message back to the main process that runs a command line task to actually go and produce that video. So behind the scenes, it was doing all the same stuff, but from my users' point of view, they had this quite nice interface. And I was also able to show error messages and stuff and tell them when they hadn't filled out all the fields just by bundling that into these message queues, which is quite cool. So, okay. Great. All of this is magic. Why should you make a desktop app? Well, you might not need to make a desktop app. Here are some reasons why you shouldn't make a desktop app. Do not bundle a website into an app. There is no point in the world in reinventing the web browser. It's really easy to do, you can just stick a URL in there, and cool, you've suddenly got a bundled version of a browser. Everyone's already got a browser. There's no need for you to do that. Don't do that. This is what it looks like. Don't do it. Reasons that you could do it. So, if you need to access the file system, for example, that's quite tricky to do in a normal web browser, and in my app, I needed to write files and read files back from the desktop. I was able to do that using Electron. In my case, I was making a GUI for a command line app. This is a really great use case for Electron. If you don't want to spend the time to learn the existing techniques to do this, there are other ways to do this. Most of them aren't cross-platform, so that's a bit of a downside. You probably already know a bit of HTML, CSS, JavaScript. That's how you write these apps, so you might already know how to do this. And if you're burning for an offline environment or maybe something that you deploy somewhere and just leave it, it's quite nice to just bundle this up into a package, and then it's done. You can forget about it. That's all I've got. If you want to find out more about it, go on electron.atom.io to find out more. I'm going to publish some version of this online, as well, if you want to see those code examples again. Are there any questions? Go for it. - [Woman] When I use Atom...my eyes, it doesn't work very well, and I found it a little bit difficult to customize. So I think it's more...it's customized like the color of the phone. So is there anything that you can recommend, sort of like to... - Yeah, I mean in that sense, that's down to GitHub, who make Atom, and I guess it is just CSS. So I mean, in theory, you can load your own stylesheet and customize the fonts and control that how you want to, but I guess that's down to the individual app makers to build that into the app. But yeah, in theory, it is just a browser, so you should be able to customize it. - Thank you. - Any other questions? One there. - [Man 1] Are there going to be some performance improvements? - Yeah, so that's the thing. I mean, if any of you have used Atom, you know compared to Sublime text, it's very slow to load, and yeah, you're bundling up an entire browser runtime into the app, so this probably isn't the most performant thing in the world, but if you don't know how to build an app, as I didn't a week ago, this might be a nice sort of gateway drug to learn about it. And if you want to get more into it, then yeah, maybe you'd learn the more traditional tools. Any other questions? One right there. - [Man 2] In your example, how much of the...they currently share between you running it on Mac, on Windows, and is it just...what [inaudible] works on every platform? - I'll be honest with you, I haven't tested it on Windows, so who knows? But in theory, yes. Like, there was some code in there. I mean, from the Electron side, it should be fine, like in terms of actually rendering the app on screen, that bit should be fine. The bits custom to my app, I'm less sure if they work. I was using FFmpeg to render that video, I don't know if anyone's used that, but in theory, it should download the right binaries for the right platform, but I don't know. But, I think, from the Electron side, they're very good, actually, at making sure that that should be cross-platform. So, I think in that sense, yeah, it should be pretty good. Anything else? Cool. All right. Thanks very much. - [Woman 2] Thank you.

Matt Andrews

Creative technologist at BBC's Digital Guerrillas team in Birmingham. When he's not writing HTML, CSS & JavaScript he is a keen writer, musician, cyclist and homebrewer. He also speaks at conferences and teaches a variety of technical classes.

Sessions by Pusher

About Sessions

Inspiring talks by inspiring speakers

Meetups are a great way to hear from the experts and keep up to date with the latest ideas - but what happens if you can’t be there? As developers ourselves, the Pusher team got to thinking that there had to be a better way. This content is just too valuable to miss.

So we decided to do something about it. Our mission: make it simple for developers anywhere to watch great programming talks and learn from the experts - anytime and absolutely free.

We spoke to meetup organisers and speakers and got them excited about getting in front of a wider audience. We pulled together a professional production team to create high quality videos and transcripts from meetups. We built a video platform to bring the content together in one place.

And now we have Sessions. Watch the talks that interest you. Subscribe to get notified when new content gets added. If you’re a meetup and want to get involved, let us know.