GitHub CodeConf 2015, 29 May 2017

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Single Page Web Apps with Electron, Paul Betts - CodeConf 2015

Description

This talk will show you how to use Electron to take Single Page Applications and turn them into desktop-integrated, quick updating Desktop applications that get the benefits of both worlds - super fast updates, and the ability to call native OS X and Windows APIs.

We’ll see this in practice by taking a look at the Electron-based Slack application and see some of how the internals of the app work, as well as the security and reliability considerations developers should watch out for.

About CodeConf
CodeConf improves the software community by providing a forum for thought-provoking talks and forging social connections. The third installment of the CodeConf series took place in Nashville in 2015. Attendees came together to discuss open source, best practices, documentation, and community.

For more information on this year's CodeConf, go to:
https://codeconf.com/

A

So our next speaker is Paul bets from slack and he'll, be talking about electron, give it up for Paul.

B

How's it going uh so my name is Paul Betts I work at a slack on the slack windows slashed coming soon to Linux, app and today I'm here to talk about single page applications and electron, and so really uh not only that just kinda giving the like electron 101 class. How to build your own apps using electron.

B

So what is electron electron is a C++ chromium kind of platform, the powers atom. The text editor so atom. The text editor is this application written javascript in HTML and CSS using web technologies. An electron is the the chromium C++ a code that kind of powers it. So it's the it's the place where you can write on top of it, a web code to write a desktop app and it turns out that electron is useful for not just writing a text editor, but it's a really great platform for writing all kinds of desktop applications.

B

So we had slack a user to write the slack Windows application, which we shipped in March or so, and a lot of other people are using it to build all kinds of interesting things. A startup called wagon is using it to build data analytics applications. um There's this startup called kite Matic, which is using using electron as well so electron. Is this really cool platform for writing, desktop apps in JavaScript? So why is that cool?

B

So for my entire career, I've been a native developer of written Windows applications and Mac applications in c-sharp and objective-c and I was really hoping that this web thing would kind of go away.

B

You know, like just kind of blow over, we go back to writing exe files and everyone would be happy, but it turns out that writing native applications is really hard and even if you're really good at it, it still takes a lot of time and the web has done this really interesting thing in that you can do things so quickly versus writing native applications because of things like dev tools. Dev tools is like the killer feature of like the web. In my opinion, it's incredible like experimentation platform for writing for any applications.

B

I'm, probably like preaching the choir, like you're, already Web Apps anyway and you're like, of course, we need this a long time ago, I'm like mind blown and everything anyway.

B

um It turns out that, because every one folks focuses on the web, the web is actually one of the most interesting layout and rendering platforms in the world. It's the most like. So many people really really smart people are focusing on how to make this layout and rendering rendering engine on the web really fast, and so, but the like thing that native developers always like how to edge up on on web developers was the web always had this like limit right.

B

You can there's certain things you just couldn't do in a native application, and so electron is kind of the first really interesting platform to me anyway, that that kind of throws away all those limits, like all the advantages that native developers had kind of went out the window, because electron lets us do all the things we could do on the web and then do all the things the desktop developers could do as well, which is really cool.

B

So in the background we can see this website called chrome status, slash features, and so we can see all the new cool stuff that we can use an electron. So one of the other cool things in electron is that you're guaranteed that you're running the latest stable version of Chrome.

B

So you can use features that, like other web developers, just kind of waiting for things like the picture tag, the picture element to do a device independent scale bitmaps or like this new catch cash, fetch API to kind of override the browser browsers version of our network cache. So from a web developer perspective you get to use all the new cool stuff and you don't have to worry about what you know supporting these old browsers. Electron is always the newest coolest thing cool. So how does it work? How does electron I? Don't?

B

How do I write my own electron application? So we start off with io j s, and so one of the really interesting things about electron is that it's chrome and io j s, 2 to 1 I think is a current writing combined together. So in the chrome run loop we even put in io j s, but before we get to that, we start off actually with just io j s. So the entry point to an electron application is just an io j s script.

B

So you start off with a javascript file, we're going to run that file and if we don't do anything else, and so that's all that happened so no dom no dev tools, no Chrome, anything actually we're effectively the same as just if you type like node some script. So that's kind of the beginning of every app electron application. Chromium calls this the browser process, even though there's no browser. uh This is confusing chromium kind of picked, the worst terms ever to explain what these are.

B

But if you'll see it, if you see the browser process, you have to know that there is no browser, so the browser process in chromium does things like it manages the project browser cache, it's the one that makes network requests.

B

It is like the top-level process, so you remember, the chrome has like this multi-process model. If you open up task manager and see like 15, atom, dot, exe s, that's why all of them do different things and the opening one, the one that starts your application is called the browser process. So this is like the smallest electronic ation. We can write. So we have this this. uh This class called app and it's kind of our opening a way to interact with with electron uh it fires.

B

This event called ready, so chromium kind of has to set some stuff up before we can do anything to do right, entire rap. So where does chrome come in so there's a class confusingly called browser window which will get you out of the browser process and into what is called a render process. So it's just a class, you just create it every single time you create a browser window class.

B

You will create a new process called a rendering process, and so browser windows are the way to create a window for our for our application so to create a rendering process. We create a browser window inside the browser process.

B

This is confusing, so it distant act I'm using the the es6 syntax. If that's a little confusing, then kind of don't worry about it. It's not that part's not important, so we're going to import browser window and pap and when, when we're ready, we're going to create a new browser window and load a URL and usually you load a URL, that's a file!

B

Url because you've shipped some of your content with the application, so we're just going to load an index file, that's in the same directory as my script and we're going to show the window so and here we're going to we're going to kind of be a little bit lazy and just wait five seconds and then we're going to open dev tools, so open dev tools, unlike because everything we could. We control everything in electron via our own code. There's just a method called open, dev tools.

B

So now we've got a window and so we've got dev tools. You've got a Dom, we've got a console.

B

Chromium calls us a render process, so we got more than one process, and so in this just like in our browser process, we have access to io j s, so I can set type require FS write files. Do anything I want. So one thing that's important. That's a little bit confusing.

B

Is that sensors multiple processes now I have I can't just like access Global's in one to the other so like, if I said, like window dot, foo equals bar in my browser process in this window, it's going to be unset because they're separate kind of universes, and so there are ways to talk between these two using a module called IPC which lets us send messages between them or there's. A small tool called remote which lets us actually do create classes and other processes, which is pretty cool, saves a lot of time.

B

So one thing that's interesting about electron is that it kind of lets you do whatever you want. A lot of web features that normally would like popping notifications. You have to go through the dance of like request permission to prop a notification. You don't have to hard-coded. Yes, you can or like using the camera or the microphone, or these kind of like permission based ap. Is they all just work, because they're kind of, if you've downloaded a desktop application, you're kind of like they can do what a desktop application can do in your browser window?

B

You are not restricted by really anything because you can include. I oj s modules, so anything you can install via npm. You can use inside your chrome window, which is really quick, including using native modules, so modules written in C++. This really means that you can do anything inside an electron window, that it does top application code.

B

So that's super cool, so the slack app is a little different than the way that atom works and so I'm going to kind of describe kind of two different ways to write: desktop applications using electron, so Adam has desktops in nature.

B

So when you download and when you download Adam all of the HTML, all the CSS all of the JavaScript they shipped in the box, Adam doesn't know about the internet on startup. It executes severy thing from this app from from this bundle from essentially from fire file URLs, it's as if you had a folder full of HTML and you double clicked on it and open a page.

B

So that's one way to write an application and you can still do updates and things like this and you're really thinking of it like a desktop application.

B

Slack's a little different. The way that slack works is it. It was originally designed as a website, and so we kind of built it to be this. The term we use inside of it is like a single site browser. So it's a little bit more like it's framing remote content, so you open the app. It shows a loading screen and then it loads a remote page.

B

So that has we can we can update a website way fast and we can update a desktop application, even though actually we can update desktop application is pretty quick too. So one thing is: that's really cool. Is you can kind of get the benefits of both I'm going to show how to do that, and really the core idea is that electron lets us build a web browser that does whatever want, which is cool, but it also lets us build a web browser that is wildly insecure.

B

So if you're not careful, you can build a web browser that was like you know, like IE 5, and can let users get hacked by remote content because you're loading content off the web? That could be really bad. If they can access desktop things, which means they can access users computers.

B

So if remote party third party code gets ahold of node.js, we got big problems, and so, in the slack app there are a bunch of not only just like the straight-up like people, man in middle leg, slack when you, for example, drop in a SoundCloud, URL or YouTube link or an audio link.

B

They do what what slack calls an unfurl where they will take it and embed content in the page, this from someone else, and so that's someone else gets taken over, they could have access to no js' and if they have access to no js', they have access to the entire computer. So what do we do?

B

When do you so there's this feature of electron that we use inside the slack up to make sure that we can give the slack web age kind of superpowers, but not allow it access to everything, and that feature is called webview.

B

This was originally a feature of like chrome, packaged apps, like chrome applications that we kind of like corded, slash stole for electron and it works similar, but not quite the same so like if you read the docs for like chrome, packaged apps version of webview you'll be like this seems familiar, but it's not identical so whether you was like an iframe but like a special high frame.

B

So web views are depending on how you configure them, of course, sandbox from io j s. It means that they cannot access nodejs or they cannot access like they can't do require they can't say you know, process type versions. They can't do anything that that you can access in io, j s, they have normal web browser security rules, so cross-site scripting is disabled. All the web security stuff that you're used to when building a web page is true inside web views.

B

And so, if you look at how the internal architecture of web use work, it's really like a flash plugin, but instead of flash, it's just another browser or render process that remotes its content to you, know a frame, and so now we have three processes. We have the browser, we have the render and we have a web view, so they can all talk to each other, but they all have their own global kind of scope. Well, if a web view crashes, just like a plugin crashes, you can just restart it.

B

So it's really like it's this frame that you can do it every one. So, but that sounds like a bummer, because then I can't inside my web view, do any like I'm, just a web page like how can I use my electron super powers.

B

Web views give us an escape hatch and it's called a preload script, and so the way that web views you can you can set up web views is that when you go to navigate to a page before it does any navigation before it loads the Dom before you even have a window object. You have nothing.

B

We will run a script of your choosing and that script will have access to io j s. You can do everything that you can require things. It can set up objects, and so you get to run that one script that can do anything it wants and then the page will be navigated to and then like access is a cut off. You can't do anything anymore when you run that script, there's no Dom. If you try to do like window dot something you'll fail, it won't work just your script.

B

So what this is the trick that makes everything work is that one of the things you can do is you can set global variables like you can set window dot, something that will persist on the page once the page loads, so you can set up a bunch of things, set them to global variables and they'll still exist when the page loads, even though web security is not enabled this is. This is the way that this is the the thing that makes it possible. So in the slack for Windows app. We just do this.

B

We setup on a window. We set up an object, cuddle, electron API, and then we just create all these things and all these things do bunch of requires they capture bunch of things and because they have access to ijs, they can do whatever they want and they set up this API surface. So essentially we define this like new set of browser api's that our web app can access, but they can't access everything.

B

We've decided what they can do and what they can't do, and we've we've created the security boundary that lets us feel secure that we won't get broken into or anything so, some pro tips. If you leak, I oj s objects via some kind of like just leave them set on a variable. That means that somebody can access them. So if you set like FS to like a property on one of these objects, then the web app can access them.

B

That's bad, debugging, freeload scripts is not a joy because of the way that they're kind of like in the separate environment, the debugger kind of gets a little confused when you try to start through them. So what we do is we end up? All these calls and have really just calling IPC that send, and so we send them up to the parent renderer process, so that makes it easier to debug, because we just get messages that weren't. Then we look at and see the actual implementation. I can step through just like that.

B

So here's, the slack Windows app I, may move it over here. This is this lack windows app running on a Mac because I just built it on Mac and so I got a Mac app out of it and if I build it on Windows and I, get a Moto's app and if I build on Linux and I get a Linux app and so because I'm on teen, tiny, spec I can go like this.

B

Top of the Belapur tools, I need to switch to mirror girl, so I will not be able to see anything um and I can do anything. I want that I can do in a web page. So I can like see these animations.

B

It's a good example on I mention.

B

There we go so I can debug these this, like fading into the badge, Marcus red. It goes away, and so we can see in here that I've got all this stuff, but then the main content is this thing called webview. So it's just a tag.

B

It's got all this stuff in it does all these crazy things. We set the user agent to a special user agent. The web client will then recognize, and then here I set.

B

This attribute called preload, and so that's my script that runs before the page gets loaded that sets up all the api's that I want to define, and so we see that there's like um there's two dev tools, windows, and so this one is for the outer one. So if I look in, if I try to like inspect like oh I want to take a look at this input, element, I get stuck right.

B

I can see that it I have this object tag just like flash and so I can't get into that, and so what I can do is on webview itself. I can say open, dev tools, it's actually already open, and so here's the dev tools to represent this interior webview, and so this is the like. The code for the slack web app and so I can poke around and see all I can scripts and styles and stuff like that, and so it means we can update.

B

If we can get away with it, we can do add features by just updating the web app and then, if we need to add new api's, we ship a new version of the desktop out and you kind of get the benefits of both so like if you're, really in a fix, and you need to change something or fix something or people are suddenly hitting this bug. It's really important.

B

You can't ship a desktop app that'll like update fast enough, like even we put a lot of work into shipping updates that are really fast and in the background and nobody ever like it doesn't bug anyone. But it's still like it's still like a two-day latency before people get the latest version, but with a web with content, you can update it instantly. So cool I think that's how I it's all I got. I have no idea what I'm looking at on time, so yeah.

B