►
From YouTube: Electron: keeping an ion it - GitHub Universe 2017
Description
Presented by Shelley Vohr and Zeke Sikelianos, with Nathan Henderson, GitHub
In this session we'll take a high-level look at the Electron project. First, we'll kick off with a lightning presentation to illustrate what Electron is and how it works. Then we'll have a fireside chat with two members of GitHub's Electron team, addressing some of the most common questions we hear from the Electron community. The content should be useful to existing Electron developers as well as people just learning about the project.
About GitHub Universe:
GitHub Universe is a two-day conference dedicated to the creativity and curiosity of the largest software community in the world. Sessions cover topics from team culture to open source software across industries and technologies.
For more information on GitHub Universe, check the website:
https://githubuniverse.com
A
Hey
everybody
thanks
for
coming
I,
just
wanna
start
by
saying
that
I
cannot
take
credit
for
this
awesome
subtitle
here.
All
credit
for
that
goes
to
Shelley
no
extra
charge,
so
I'm
Zeke.
This
is
Shelley.
We
are
two
members
of
the
github
team
and
electron
and
we're
hoppers
so
we're
gonna
talk
a
little
bit
about
electron
today.
A
This
is
essentially
what
electron
is.
Electron
is
Google's
open,
source
chromium
browser
with
nodejs
integrated
right
into
it,
so
it's
kind
of
a
supercharged
web
browser
you're,
all
probably
familiar
with
google
chrome
and
Google
chromium.
It's
a
very
active
open
source
project
with,
of
course,
a
very
fast
JavaScript
interpreter,
which
was
called
v8
I,
just
extracted
into
a
project
called
node
some
years
ago,
which
you're
probably
also
very
familiar
with
so
with
chromium.
A
A
A
single
way
is
like
a
really
nice
way
to
write
asynchronous
code
that
doesn't
feel
it's
confusing
as
traditional
JavaScript
callbacks
and
with
electron
and
with
chromium.
You
actually
get
async
await
out
of
the
box,
so
you
don't
have
to
like
write
code
and
pilot
using
a
tool
like
paddle,
or
something
like
that.
You
can
just
write
it
right
in
your
electron
out.
So
you
get
all
these
really
awesome
features.
Of
course.
A
Yes,
six
or
yes,
template
literals
for
writing,
template
strings
and
things
like
that,
and
then,
of
course,
all
of
the
benefits
that
you're
used
to
from
Chrome's
dev
tools
are
also
available
in
electron.
So
there's
there's
a
huge
list
of
all
these
great
features
that
you
get
for
free
when
you're
building
an
electron
now
and
these
come
from
chromium
and
then,
of
course,
nodejs
is
part
of
the
mix
as
well.
So
you
get
all
these
api's
that
come
as
they
come
with
node
core,
like
in
an
electron
app.
A
Unlike
a
typical
browser,
you
can
actually
reach
out
a
node
and
make
file
system
calls
to
read
files
off
the
disk
or
write
files
to
disk,
or
you
can
make
low-level
HTTP
calls
or
network
requests.
You
can
find
out
things
about
the
operating
system
and
you
can
even
create
like
sandboxed,
v8
code
environments
and
things
like
that.
A
So
having
node
at
your
disposal
in
this
browser
environment
is
just
really
powerful
and
then,
when
you
add
npm
user
land,
on
top
of
that,
you
have
five
hundred
and
sixty
thousand
plus
modules
developed
by
the
JavaScript
community
that
you
can
also
bring
in
to
your
electronics.
So
in
addition
to
just
the
core
awesomeness
of
chromium,
the
core
awesomeness
of
node,
you
also
have
this
huge
community
of
people
of
creating
like
five
hundred
packages
a
day,
all
of
which
or
most
of
which
can
be
dropped
right
into
an
electronic.
So
it's.
A
So
another
great
thing
about
electron
is
just
that
when
you,
when
you
create
an
app
with
an
electron,
you
can
package
it
and
distribute
it
on
all
these
different
desktop
platforms.
So
you
can
create
Windows
installers,
you
can
create
Mac
dmg
ease,
you
can
create
Linux
packages
and
you
can
even
publish
your
apps
on
the
windows,
App,
Store
and
then
I
cap
store
and
canonical
is
also
working
on
this
flat
pack
installation
tool
which
is
kind
of
their
own
sort
of
notion
of
an
app
store.
A
A
Here
we've
got
some
sort
of
friends,
friends
of
the
electron
community,
so
the
figma
app
is
like
this
really
powerful,
awesome
collaborative
vector
image,
editing
tool,
it's
kind
of
if
you're
familiar
with
illustrator
or
sketch
it's
kind
of
like
the
same
thing
except
it's
web-based,
and
you
can
have
multiple
people,
editing,
content
and
files
simultaneously.
It's
really
cool,
of
course,
hyper
is
a
terminal
that
all
written
in
HTML
and
JavaScript
web
Taurean
data
is
a
file
sharing
system
and
then
just
a
little
shout-out
for
the
google
play
music
developer
thing.
A
Kyler
is
up
here
in
the
Bay
Area,
promoting
a
company
that
he's
working
on
working
on
two
advance:
the
cause
of
solar
energy
and
figuring
out
ways
to
create
a
decentralized
networks
of
solar
energy
building.
So
Tyler
is
actually
working
on
an
electron
app
to
track
like
real
time
changes
in
energy
prices.
So
you
know
there
are
lots
of
you
know
large
scale,
applications
like
from
Microsoft
and
github
that
are
using
electron.
That
are
also
lots
of
little
guys
too,
who
are
making
really
cool
sort
of
internal
tools
with
the
electron.
C
C
Mange
is
a
JavaScript
file
and
then
an
index
study-
it's
GML
next
here
in
our
JavaScript
file,
will
import
the
app
and
browser
window
api's
from
electron
and
then,
when
the
app
is
ready,
we'll
create
a
new
browser
window
and
then
we'll
load
the
index
that
HTML
we
just
created
and
then
we'll
open,
dev
tools.
So
here
in
the
index
that
HTML
file
will
initialize
some
simplistic
Styles,
just
the
background
color
and
then
we'll
put
some
simple
text
there,
just
a
hello
world.
C
Finally,
in
our
package,
JSON
will
initialize
a
little
start:
script,
electron
dot,
which
is
just
custom
loads,
all
the
files
in
the
current
directory,
which
would
jump
back
here
into
mandre
us
and
load
that
alright,
then
we'll
run
the
starred
script
and
see
what
it
looks
like
all
right.
So
you'll
see
here
it's
pretty
much,
probably
what
you
expected
you'll
see
that
simple
hello
world
text
we
set
up
and
then
you'll
see
the
fact
that
we
opened
up
tools.
C
So
next
you'll
see
one
of
the
most
important
parts
of
electron
and
one
of
the
things
that
makes
it
more
unique.
So
here
we're
leveraging
one
of
the
node
API
FS
and
we're
going
to
load
in
all
the
files
in
the
current
directory
here,
because
we
have
access
to
the
Dom,
we
can
load
in
all
those
files
and
then
display
it
in
the
index
that
HTML,
you
can
see
next.
C
Alright,
next
I'm,
going
to
talk
a
little
bit
about
Forge
forge,
is
a
tool
that
lets
you
create
more
advanced
electronic
Asian's.
It
lets
you
package
and
distribute
them.
It
also
basically
makes
use
of
proven
community
tools
so
that
you
can
build
and
add
different
platforms
and
frameworks.
On
top
of
it.
A
C
So,
thank
you
basically,
next,
this
just
walks
through
you're,
going
to
download
electron
Forge
you're,
going
to
call
electron
Forge
to
initialize
a
new
application,
and
then
all
you
need
to
do
because
it
comes
to
this
series
of
sensible
defaults
is
just
load.
The
start
script
that
comes
with
it.
So.
B
A
Yeah
so
I've
been
in
github
for
about
a
year
and
a
half
I've
been
involved
in
the
the
node
community
for
a
long
time
used
to
work
at
Heroku
and
NPM,
just
kind
of
trying
to
advance
the
cause
of
JavaScript
and
bring
it
into
new
environments
beyond
the
browser.
So
Jessica
Lord
was
one
of
the
sort
of
founding
members
of
the
electron
team
at
github
and
I
had
interacted
with
her
at
various
conferences
and
stuff.
So
I
think
that
was
kind
of
my
my
my
getting
my
foot
in
the
door.
A
B
C
A
Yeah,
so
just
to
add
to
that
a
little
bit.
So
some
of
the
companies
who
are
you
know,
betting
big
on
electron,
have
actually
hired
internal
teams
work
specifically
on
electrons.
So
slack
was
one
of
the
early
companies
that
actually
hired
numerous
desktop
engineers,
but
Microsoft
has
gotten
in
the
game
and
that's
been
really
helpful
to
us,
because
Microsoft
takes
security
very
seriously,
so
their
interest
in
upgrading
chromium
as
quickly
as
possible
means
that
they're
actually
putting
resources
towards
making
that
happen.
So
there's
now
a
team
of
very
awesome
people
in
Prague
and
st.
A
Petersburg,
who
are
the
Microsoft
internal
electron
team
and
they
create
custom,
builds
of
electron
for
the
various
teams
within
Microsoft.
So
what
we're
seeing
is
that
the
github
team
is
actually
able
to
we're
slowly,
starting
to
be
able
to
think
more
about
the
the
larger
issues
of
the
project
and
less
about
the
the
nitty-gritty,
the
the
daily
details
of
just
keeping
things
up
to
date.
B
A
A
C
B
A
C
A
A
Yeah,
so
obviously
there
are
trade
offs
right,
so
you
could
develop
a
native
app
that
would
have
you
know
a
smaller
footprint,
be
more
performance,
smaller
file,
size
things
like
that,
but
but
then
you'd
be
writing
it
for
a
single
platform
and
using
potentially
proprietary
tools
and
proprietary
programming
languages.
To
do
that,
so
really,
the
value
of
electron
is
being
able
to
use
open
technologies
to
write
applications
and
deploy
them
to
multiple
platforms.
So
there
is
a
trade-off.
A
I
think,
probably
the
biggest
factor
that
leads
to
people
making
those
kinds
of
accusations
is
just
the
fact
that
chrome
itself
is
a
very
resource,
intensive
application,
but
the
chrome
team
is
continually
making
improvements
to
the
way
chromium
runs,
and
you
know
just
in
chrome
57.
We
saw
like
a
30
percent
improvement
in
battery
life
for
applicate,
for.
A
Laptops
running
the
Chrome
browser,
so
they're
going
to
continue
to
improve
that.
Another
thing
is
this
sort
of
pie
in
the
sky
idea
that
people
have
been
talking
about
for
a
long
time,
which
is
the
concept
of
like
an
electron
runtime,
which
would
be
a
shared
thing
that
you
install
on
your
computer,
where
you
have
multiple
apps
that
are
sharing
a
common
chromium
component
and
in
that
way
the
amount
of
resources
consumed
could
be
significantly
lower.
But
for
now
that's
just
a
conversation.
It's
not
necessarily
something
that
we
are
actively
pursuing.
C
Two
other
things
is
important
to
note
are
that
while
we
do
leverage
a
lot
of
chromium,
we
don't
actually
bundle
the
entirety
of
chromium
into
electron.
We
typically
just
bundle
in
what
we
need
and
then
also
important
to
note
that
visual
c-e-o
code
and
hyper
both
have
started
using
canvas
to
render
some
of
their
parts
of
the
application,
which
is
sped
up
things
significantly.
So,
while
there
is
a
certain
part
of
electron
that
does
use
some
memory,
there's
definitely
ways
to
deal
with
that
and
approach
that,
in
a
way
that
has
significant
potential
for
effectiveness.
C
B
A
That's
going
to
contribute
significantly
to
the
startup
time
of
your
app.
So
one
of
the
ways
to
work
around
that
is
to
kind
of
load
the
Minimum
Viable
set
of
dependencies
that
you
need
at
startup
time
and
then
have
some
kind
of
asynchronous
process
that
loads
in
the
rest
of
the
code
that
you
need
once
the
app
is
actually
running.
So
the
perceived
performance
from
the
user
will
be
a
quick
start
up
time.
Oh.
B
Thank
you
keeping
on
my
corporate
customer
hat
for
a
moment.
I'm
glad
you
mentioned
Microsoft
being
really
concerned
about
security.
I
think
we
all
are
but
and
making
improvements
to
electron.
There
are
electron
applications,
maybe
more
vulnerable
to
security,
exploits
than
just
a
typical
like
a
full
stack
nodejs
web
application.
Other
specific
concerns,
I
should
think
about
there.
A
Yeah,
so
just
to
add
to
that
general
sort
of
the
most
unsafe
thing
you
can
do
when
building
an
electron
app
is
opening
a
webview
that
has
sort
of
unfettered
access
to
untrusted
content
on
the
internet.
So
because
of
the
way
electron
enables
node
integration.
A
website
could
actually
capitalize
on
the
availability
of
the
node
API
and
exploit
a
system.
A
That's
exploit
an
app
that
has
not
put
the
proper
protections
in
place
so
we're
actually
working
towards
setting
safer
defaults
and
also
just
adding
lots
of
warning
messages
when
people
are
using
the
unsafe
options
in
development.
So
you'll
start
seeing
more
console
warnings,
saying,
like
I,
hope
you
know
you're
doing,
but
in
general,
if
you
are
making
an
electron
app
that
needs
to
talk
to
the
Internet,
just
make
sure
that
you
are
creating
a
whitelist
of
domains,
trusted
domains
that
you
control
and
that
the
content
on
those
pages
is
also
exclusive
to
that
domain.
A
So,
even
if
you
have
something
like
you're
loading,
a
JavaScript
file
from
a
CDN
or
something
like
that,
that
is
a
potential
vulnerability.
So
just
walking
down
the
remote
content
is
one
big
step.
Another
big
aspect
of
security
is
just
that:
chrome
is
an
evergreen
browser,
so
when
fixes
are
made
to
to
chrome,
they
are
to
chromium.
They
automatically
trickle
down
to
users,
because
the
the
chromium
browser
the
Chrome
browser
updates
itself
automatically
all
the
time.
A
Electron
is
a
little
different
because
it's
actually
like
snapshots
of
chromium
from
the
past
and
the
so
we
work
to
back
port
security
fixes
into
older
versions
of
electron,
but
really
it's
right.
Now,
it's
kind
of
on
the
electron.
It's!
The
onus
is
on
the
electron
developers
to
keep
an
eye
on
those
things
and
proactively
update
their
electron,
apps
and
then
the
other
thing
is
this.
A
This
question
of
the
auto
updater,
so
electron
apps,
actually
have
electron
as
an
API
that
you
can
use
to
allow
your
apps
to
update
themselves
by
pinging
a
server
to
see
if
there's
a
new
version
of
your
app
available
downloading
a
new
version
and
restarting
the
app
can
restart
itself.
So
right
now,
that's
a
little
bit
of
requires
a
little
bit
of
legwork
on
the
part
of
the
developer,
we'd
like
to
get
to
a
point
where,
when
you're
developing
an
electron
application,
it's
easier
to
get
that
kind
of
auto
updating
for
free.
A
B
A
Also,
when
you
write
your
applications
in
typescript,
you
get
this
benefit
of
the
the
API
of
the
application
actually
being
sort
of
implicitly
documented.
So
one
of
the
things
we
rolled
out
an
electron
recently
was
support
for
electron
typings.
So
if
you're
using
typescript
and
you
are
using
a
typescript
aware
editor
like
Visual
Studio
code
or
atom
with
an
extension,
then
the
electron
development
process
is
much
more.
A
You
can
spend
more
time
in
your
editor
and
less
time
reading
Docs,
because
the
autocomplete
is
aware
of
all
the
the
method,
names
and
all
the
parameters
for
all
the
methods
and
the
return
types
and
all
those
kinds
of
things.
So
I
think
I'm,
saying
this,
because
I
know
that
the
github
desktop
team.
They
were
a
bunch
of
native
developers
for
Windows
and
Mac,
and
so
they
kind
of
had
to
just
bite
the
bullet
and
become
JavaScript
developers
potentially
to
their
chagrin.
B
A
I
don't
know
if
I
have
an
immediate
answer
to
that,
so
there
are
some
sort
of
subtle
differences
between,
like
the
sort
of
user
experience
patterns
that
people
are
accustomed
to
in
web
browsers
versus
desktop
applications.
One
of
the
most
obvious
ones
is
like
when
you
hover
over
a
link
in
a
web
browser,
your
cursor
turns
into
a
little
hand
and
the
link
becomes
underlined,
whereas
in
desktop
applications.
Typically
that
doesn't
happen.
B
B
For
anyone,
who's
not
familiar
with
the
Elektra
and
API
demos,
app
is
a
really
good
kitchen
sink
example
of
pretty
much
everything
you
can
do.
That's
special
in
electron,
right,
okay,
so
something
that
I
have
been
asked
a
lot
and
I
know.
I've
personally,
struggled
with
sometimes
is
like
I
go
into
NPM
I
just
start
searching
for
modules.
Sometimes
I've
searched
by
broad
functionality,
sometimes
I'll
punch
in
electron,
because
people
tend
to
name
things
electron
whatever.
B
C
Rubik's
directly
a
little
bit
harder,
but
there
is
an
organization
called
the
electron
userland
that
provides
a
lot
of
great
resources
for
getting
shudder
with
that.
It's
full
of
a
lot
of
the
most
active
electron
users,
who
just
don't
happen
to
be
hovers,
and
they
definitely
have
a
lot
more
robust
and
understanding
of
what
modules
are
good
to
use.
What
modules
might
suit
your
purposes
best
so
from
to
that
end,
I
would
definitely
recommend
starting
at
electron,
usually
and
I.
Should
electron,
userland
or
electron
down
atom.
A
So
there's
a
there's,
a
repo
called
awesome
electron.
You
know,
there's
this
whole
awesome
repo
phenomenon
where
people
collect
links
about
a
particular
topic,
and
so
there's
one
for
electron.
That's
a
great
place
to
start,
because
the
curators
of
that
repo
are
quite
discerning,
so
you
can't
just
throw
links
up
there,
but
this
is
a
problem.
That's
very
near
and
dear
to
my
heart.
Having
worked
at
NPM,
designing
the
packaged
page
that
people
still
see
today.
A
The
sidebar
has
some
useful
information,
but
nowadays
I
actually
mostly
use
github
com
to
kind
of
make
an
assessment
of
a
particular
package.
So
if
you're
looking
at
a
repository
page
or
for
a
package,
you
can
see
how
recently
it
was
updated.
The
number
of
contributors,
it's
easy
to
browse
the
code.
There
are
a
number
of
signals
on
a
repo
page
that
can
kind
of
give
at
least
a
rough
idea
of
the
the
health
of
a
package.
But
it
all
depends
like
some
packages.
A
A
The
electron
team,
recently
at
our
mini
summit,
we
kind
of
made
a
decision
that
we
should
start
becoming
a
little
bit
more
opinionated
about
the
recommendations
that
we
make
for
what
tools
to
use
in
NPM,
userland,
so
part
of
the
value
of
userland
is
that
it's
like
everyone
can
do
exactly
what
they
want
and
if
you
don't
find
the
thing
that
you
want,
then
you
can
roll
your
own
and
it's
really
easy
to
do.
But
we
don't
want
people
wasting
their
time.
A
We
don't
want
people
having
to
spend
half
of
their
development
time
just
trying
to
find
the
right
module
to
solve
a
particular
problem.
So
what
we've
decided
to
do
is
start
making
more
recommendations
into
our
documentation
about
known
modules
that
work
well
with
electron,
so
stay
tuned.
For
more
of
that.
B
C
The
big
difficulty
there
is
currently
that
Apple
does
not
allow
third-party
web
rendering
engines,
which
makes
things
difficult
like
even
Chrome
for
iOS
is
uses.
Webkit
doesn't
use
its
own
thing,
so
it'd
be
absolutely
amazing
to
have
at
a
certain
point
but
I
think,
to
a
certain
extent
that
would
sort
of
depend
on
somethings
from
us,
potentially
perhaps
but
Apple
primarily.
A
Yeah,
so
I
don't
have
a
good
answer
to
this
question,
but
I
think
it's
what
we
all
want
right,
like
it
just
seems
like
a
natural
progression
of
where
we'll
end
up.
So
in
the
beautiful
future,
we
will
write
apps
in
open
technologies
and
be
able
to
deploy
them
to
all
devices,
we're
not
there.
Yet
one
thing
that
I
have
seen
the
customer.
You
know
electron
users
have
been
able
to
do.
A
Is
that
they'll
write
a
like
a
client-side
application
using
you
know,
react
or
angular,
or
you
know
any
of
these
popular
frameworks,
and
then
they
will
wrap
their
client
in
an
electron
app
for
desktop
and
then
they'll
use
PhoneGap
to
to
publish
to
deploy
those
applications
on
mobile.
So
right
now
it's
kind
of
a
mix
of
electron
and
Cordova
to
make
that
happen.
B
C
All
right,
so
a
few
things
were
moving
towards
at
the
moment
are
currently
electron,
doesn't
support
semantic
versioning,
just
because
it's
difficult
to
deal
with
a
hard
dependencies
on
chromium
and
node,
but
we've
decided
to
change
a
little
bit
about
how
we
update
chromium.
So
semantic
version
is
in
fact,
coming
just
normal
major
minor
patch.
At
the
moment
it
was
just.
It
was
like
pretty
custom
to
major.
It
was
breaking
changes,
breaking
API
changes,
minor
was
minor,
chrome
updates
or
major
node
updates,
I
believe
and
then
minor
was
just.
A
So
we
are
in
the
process
of
localizing
the
website,
so
documentation
will
be
available
in
different
languages.
We're
using
this
really
awesome
tool
called
crowd
in
that
has
a
github
integration,
where
you
can
actually
connect
it
to
a
github
repo
specify
where
your
source
content
is.
You
can
write
markdown
and
you
can
write.
You
can
have
structured,
JSON,
yamo
files.
Things
like
that
crowd
in
will
pull
that
content
into
its
platform.
A
People
can
go
off
into
crowd
in
using
their
github
account
and
then
just
start
translating
strings
to
whatever
language
they
they
want
and
the
content
actually
propagates
back
to
the
github
repo
by
a
pull
request.
So
we're
kind
of
setting
up
all
this
integration
right
now
and
we
will
soon
have
a
version
of
the
website
that
it's
in
a
bunch
of
different
languages,
and
it's
also
going
to
be
a
node
website
instead
of
a
static
website.
A
So
that's
going
to
open
up
a
lot
of
possibilities
for
us
to
to
do
more
interesting
things
with
it
on
the
semantic
versioning
note,
I
think
the
takeaway
would
just
be
for
a
2.0
of
electron.
It
may
not
actually
be
many
new
bells
and
whistles
it'll,
probably
just
be
chromium
61.
So
each
time
we
do
a
chromium
upgrade
or
a
node
major
upgrade
that's
going
to
bump
the
major
version
of
electrons,
so
I
think
we
saw
this
from
reactor
right.
You
know
they
were.
They
went
from
0.14
to
15.0
or
something
like
that.
A
B
You
I
think
with
that.
I
could
sit
here
to
ask
you
questions
all
day,
but
they
won't.
Let
me
so
I
will
say
that
you'll,
both
Zeke
and
Shelley,
will
be
here
for
a
little
bit
or
around
for
a
little
bit
after
they
cut
me
off.
So
you
can
continue
to
ask
some
great
questions.
I
know
a
lot
of
you
have
questions
about.