GitHub Satellite 2016, 29 Jul 2016

Previous Meeting

Next Meeting

⏯

youtube image

►

From YouTube: Building cross-platform apps with Electron - GitHub Satellite 2016

Description

Electron is GitHub’s open source tool for building cross platform desktop applications with web technologies. In this talk we’ll recap Electron’s origins, but dive more deeply into the growing ecosystem and what’s to look forward to from GitHub.

Jessica Lord is an open source Node.js developer on GitHub’s Electron team building tooling to support the ecosystem. Prior to joining GitHub three years ago she was a Code for America fellow and urban designer.

About Satellite:
GitHub Satellite 2016 was a celebration of the latest and greatest in development. Watch the recordings to learn how engineers, founders, activists, and beyond tackle the latest and most difficult challenges in software.

For more, join us in San Francisco on September 13th-15th for GitHub Universe, three days filled with the creativity and curiosity of the largest software community in the world.

For more information, go to githubuniverse.com.

A

Hello, everyone they said when my slide shows up. That's when I'm supposed to start so hi think this is awesome. There are people in the doorways um I'm excited because I really like electron a lot and I, get to tell you all about it and you're all here. So you might you don't know if you like it yet maybe but you're at least interested, and so that's awesome. um I am Jessica Lord I'm, an engineer at github and I work on the electron team.

A

That's the intro and so electron in one sentence is github open source framework for building cross-platform desktop applications with web technologies. That's the one sentence we sort of use all all the time. It's short, it explains it, but there's a lot loaded into that sentence. So I'm gonna talk a little bit about how we came to build electron and what some of these parts of this really mean.

A

The whole reason electron came to be is because github set out to build atom, our text editor and we wanted to build it on JavaScript and HTML and CSS, because we wanted to build an editor that people could hack into that was built with languages that a lot of people knew, and so that was that was the vision.

A

How can we build this desktop app using HTML and CSS and JavaScript, and so the team looked around for things that existed in this space, but none of them were quite the right fit for atom, and so that's why we ended up building electron so that we could build atom and so, when atom open source.

A

Two years ago, we open sourced everything, the kit and kaboodle, and so, along with that came electron, which was at that point called atom shell, and that was two years ago and since then we have seen so much happen almost by surprise right. We built this.

A

We build this utility really so that we could fulfill the dream for atom, but we realize there are a lot of other people who wanted that same thing, and so we've seen so many people start to build things on electron and even in the last year, when we renamed when we gave electron its own name. That was a year ago there have been over a million downloads of electron through various sources. People can download it through the releases on the repo people are downloading it through electron, prebuilt and NPM module.

A

People are downloading it in their apps, and so there's lots of places. You can actually get electron and so sort of coalescing all those places. It's been. A huge number of people who are using electron and companies are building things on electron, which has been really awesome. So I'm, gonna, I'm gonna, take the guess that many of you are familiar with slack um slack.

A

Is it a chat, app and they are using electron and they have to have an app that feels really native and that works really fast and they're able to do that with electron. Microsoft also built a text editor on electron, visual studio code, and that's super awesome brave, which is this is cool. This is a browser being made by the inventor of JavaScript being built on electron Gebo. Okay, Gebo is really cool, geebo is a robot and gee bows face is electron, that's WebGL and it's an arm.

A

It's arm hardware, that's running electron and making the animations and emotions of this robot there's so many different ways that you can use electron, and so, as these people have been building building their projects, it's been awesome to see all the different ways that people actually are.

A

You electron wordpress now has an electron app and and is an example of how you can take your web app and then give it a really native a native environment really easily with electron and then, as of maybe in the last 24 hours, whatsapp has released a desktop electron, app and whatsapp has maybe a billion users, and so this is really awesome.

A

So so big companies companies we've heard of our building on electron. There are lots of small startups that are starting and their product is an electron product and then there's tons of tools for building electron apps that have been developed by people in the community and so not only are more and more people building on electron, but the ecosystem and support for electron has grown so much in the last couple of years. Over 300 people have contributed to electron itself, which is fantastic.

A

So, like I mentioned, we built it for atom, but people are using it to build all kinds of other apps and so they're hitting edge cases. We never hit with atom and they're contributing those things back upstream, and so new api's and features are being added all the time by people who are using electron to build all kinds of things and people are translating the docs. We have a ton of Doc's translations, which I think is a huge thing, and I applaud everyone who spends time translating docs okay.

A

So so why are people doing all this electron stuff? um Oh no! This is where we'll dive into sort of that loaded sentence about what electron really is. The real magic in electron is that electron combines chromium and nodejs into a single runtime.

A

So chromium is the open source part of Google Chrome and it has a JavaScript engine called v8 and then node was built later using that same engine, so an electron, we combine the two and they share a version of v8 and it's this special relationship and this single runtime with all of these things that makes electron a really cool tool to build with.

A

So when you're working with Chrome you're only designing for one browser, you don't have to worry about browser free prefixes and what works in this browser, but doesn't work in this browser yet you're only designing for Chrome and because we stay really up-to-date with chrome releases. You get to use the newest and coolest stuff, that's coming out in chrome. So, like CSS variables, you can use out-of-the-box, and so you can actually end up eliminating external libraries and compilers that you might have used otherwise or that you're used to using in your web app.

A

You don't have to use when you're building a desktop app with electron. You have access to the full node API throughout electron, which means you can interact with the users file system. You can use sockets and everything that you can use a node. You can do an electron, so when I say no, it is in every context an electron when you're writing HTML. You can write things like this right into your HTML. There's, there's nothing special! You need to do to trigger node or anything.

A

You just write node and you can do the same thing like this. The way that you are used to writing a note app. You can have that same kind of code inside of your HTML and because you've got node. You've also got access to the 200,000 plus modules on NPM, so you can use the modules you're already familiar with. There are somewhere around 800 electrons specific packages already and because they're sharing the 8 and because of what VA comes with you already have 90% over 90% of es6.

A

So, if you're using another library to allow you to use es6, which is a newer version of javascript, you don't have to do that now. You can just write es6 and if your app needs it there's something you need to write at a low level. You can use C++ extensions and put them inside your electron app and so all of this packages up together, your one code base designing for one browser, ships for Mac, Windows and Linux. We also have an arm distribution like I mentioned Gebo.

A

The robot is using an ARM version of electron and so raspberry PI's and things like this. There are all kinds of cool stuff you can do with that. I am really excited about that part. um Electron also comes with installers and auto updaters. So if you want your app to be in the Windows Start menu and things like this to help your app feel like a real native app that comes with electron, as well as setting up Auto updates for Windows and Mac.

A

So how what is it like when you're, actually using electron? How do these parts of the node API and electron API? All come together, electron has two processes. These are the main things about electron to processes. Your main process is the lifecycle of your app. It is your JavaScript file that says start my app and open a browser window.

A

It also does the heavy lifting so a lot of the native specific themes like using the dialogues and things like that happen in the main process, so that your other process, the renderer process that is drawing the web page so that it doesn't have to worry about doing those things so that it's not blocked by any of those things. The render process is just drawing your web page.

A

This is just a part of chrome that paints a web page and there are related sort of like this, so you have your main process and it has the full node API. It has the electron API and it creates the render process, which is the window, the actual part of your app that you see, and then it also has the node API the electron API, but it's also about the Dom and then they both have their own IPC module, which allows you to communicate between those processes.

A

So when I said the main process does the heavy lifting like opening a native dialog like say you want to open a find a file dialog, you would send. You would use IPC to tell the main process open that dialogue and then what? If the? If the user selects a file, send that information back to me in the render process, because that way, your renderer process doesn't have to be held back by doing those kind of calls.

A

They all happen in the main process, and so the electron API itself so you've got the chrome API is the Dom API is you've, got all of node API, but then you've got the things that electron adds into it that give the app that native feel so like creating a new browser window, the dialog module that lets. You use the save dialog error dialog for all the platforms clipboard. These are just some of the modules, but you can imagine like these are the things that make your app feel native right.

A

It has a menu that feels like that operating systems menu. You can put an icon in the tray. A really cool fun thing. A fun way to get started with electron is to create an app that is just a menu bar app. That only runs in the tray.

A

There are some good examples of that online, but so these are all the elements that make. It really feel like a native app like the power safe blocker. So if you're creating a video playing app and the person's computer isn't plugged in and it does the like, 15 minutes shut off, you can interact with that native element of the system and tell it like when a video is playing in my app.

A

Don't turn the computer off and you don't have to create just one webpage one view you can spin up as many renderer processes as you need. You can also make them invisible, so you can tell it create new browser window show false and that actually spends up another process, but it is invisible, but you can farm out tasks to that process. So if there are other renderer process things not necessarily main processing, you want to happen, but you don't want to slow down your main visible window. You can send them to another renderer process.

A

That is invisible, and these are all ended, separate processes so they're not leaking into each other they're, all their own environment. So that's great. Everyone gets it right yeah, so we know how it works and how all the components come together, but cool slide.

A

The main, exciting thing that we're all here for is or the reason that's a really exciting day for the electron team is that today we released our 1.0 of electron.

A

So not only is it just a 1.0 api but we're building tools to make building electron apps easier, because we really want electron to be approachable. We really feel like a desktop. App is easier than you think, and if you can build a website you can build a desktop app, and so we want to make getting going with electron as easy as possible.

A

But of course there is the 1.0 api, so so 1.0 api is stable and mature right now we're at chrome 49, but the branch for chrome 50 is already there and node 5 and Maxtor compatible. So if you want to build a mac app and put it in the mac store, you can build an electron app. We have new api's 4 protocol touch and swipe events like the native system preferences. If you want to find out if your Mac user is using a dark theme or a light theme, you can do that.

A

But so one of the tools that we have- and this one I'm really excited about- is the API demo app. So, like I said, we want to make electron easy easier to get going with, and so the electron API demo app is actually an electron, app demoing, the electron yeah, and so what school saw many cool things? Okay, so like here, you can see like there's a create a window section, and you can see this. Hopefully you know what to help people understand like what does it mean when electron says it's a native app?

A

What does it mean when people say dialogs, and so these are like the kind of new windows you can create? You can create a frameless window. So if you want to use CSS to design all of the elements on your pay or your app, you can you can create a frameless window, and so you can use this app to see all the cool things that electron does and get sample code.

A

What's also cool about this sample code is that is the real code running the demo button, because electron has node everywhere we're able to in this web view we can read that file of that JavaScript and then just write it to the Dom. So, actually, when we're updating this app, we just update the code once and the sample code is updated as well. But we also want this to serve as a demo electron app in general.

A

So the app is open source and you should look at the code of the entire app as well to see how we're doing things like setting the icons or like using HTML imports to create a single page app with a bunch of different HTML files, so open up the guts of the app too and there's also an electron Quick Start app.

A

This already existed, but it pairs really well with the demo app, because once you use the QuickStart app, you can just start copying and pasting code from the demo app into the QuickStart app and just start building your electron app and you can find that at the elektron website and then at get started or just go to the top and scroll to the middle. um And you can download the latest release for your operating system because it ships for Windows, Mac and Linux all right next thing.

A

We're releasing is called dev Tron, which is a dev tools, extension for inspecting your electron app. So if you you, if you're familiar with the chrome dev tools, you can open it up and you can see all the little parts of the webpage all the elements in the Dom. Well now you can see all the elements and things that are happening in your electron axe. You can see how many event listeners you have going.

A

You can look at your require graph and see how many modules you're using and what modules are using, what modules you can use a linter to check for common electron, app things, and then you can also look at every time. You're communicating between processes. When are those communications happening and are you making synchronous calls right that might slow down your app and that one is available or you can see more, it's in the electron org on github, but you can read more about it at the website.

A

Slash dev Tron, then there's Specter on which lets you write tests for your electron app and it's built on chrome driver and webdriver IO, and so, if you can imagine you're writing this desktop app and you want to know well, if a person clicks this button, does it do what I think that it should do or that I want it to do so. This is showing spectrin testing the API demo app, and it's saying like alright, it should load on this screen check. It should have a side bar check if they click a menu item.

A

It should show that menu item, and then you get the output in your terminal, and that is available you can on in the github or org also and at the website. Slash spectrum and I'm still not done, because we redid the entire website and it's beautiful and you can go to the front page and see immediately what versions were on because staying on top of the node and chrome versions is really important to us and I know to you who are developing apps, um but we've also got this page.

A

There is a great repository on github called awesome electron that has compiled all of the tools and things that people are using with electron, and we have that here on the website too, and so, if you've built something for electron, you can add it to that. Repo and it'll automatically show up on the electron website.

A

We've also redone all of the documentation so trying to make the documentation as great and readable as possible, and the doctor I think the documentation is great. I hope that you think it's great and then we have an app's page for all. The apps that are built on electron that we know of, but we also put in this site, is open source and so people make pull requests and they add their app to this page. And so, if you want to see what other people are building on electron, you can go here and see.

A

So you should build it. App and I am just one person on this team. So this was obviously a huge effort, and so I wanted to give a shout out to the entire electron team.

A

A

To our in Japan to our in California and I am in Oregon and Kevin and myself. We are here at the conference, so please come say hi to us, and that is it. We can watch this video loop. Thank you.