►
Description
Speakers: Felix Rieseberg
Chances are high that you’re already using desktop software built with JavaScript and Node.js: Apps like Visual Studio Code, Slack, or WhatsApp use the framework Electron to combine native code with the conveniences of Node.js and web technologies.
In this talk, Felix will give a techical introduction to Electron. Building a small code editor live on stage, he’ll cover the basics and explain both benefits and challenges of using Node.js and JavaScript to build major desktop applications.
A
All
right,
I
think
we
might
as
well
get
started
it's
11
training
with
30
minutes,
but
it's
not
a
lot
of
time,
so
I'm
gonna
get
started.
My
name
is
Felix
I
work
at
slack
as
a
senior
staffer
on
slacks
run
time
team,
which
is
responsible
for
Co.
Maintaining
electron
I,
mostly
focus
on
outreach
and
education.
A
The
actual
engineers
are
sitting
down
here,
but
I'm
going
to
talk
a
little
bit
about
what
electron
is
why
it
is
and
will
show
a
little
bit
of
how
you
would
build
your
first
teeny-tiny
app
yeah
we're
gonna
build
a
tiny
code.
Editor,
it's
not
gonna,
be
anything
advanced,
but
just
so
you
get
a
feeling
for
how
someone
would
build
something
with
the
electron
and
before
we
get
into
this
talk.
A
I
usually
want
to
motivate
the
whole
thing
a
little
bit,
because
one
of
the
biggest
concerns
I
have
today
is
that
there
is
this
notion
of
JavaScript
being
inherently
slow
or
Electra
maps
being
inherently
slow
and
I.
Have
this
feeling
that
JavaScript
today
works
a
little
bit
like
CGI
in
the
sense
that
it's
bad
when
people
notice
it
but
I'm
convinced
that
most
people
don't
notice
and
how
many
places
JavaScript
can
actually
be
found
and
I've
brought
just
a
few
of
my
favorite
examples.
A
This
one
is
the
one
that
surprises
people
the
most,
but
the
user
interface
and
battlefield
one
is
a
typescript
and
reactor
application.
The
little
ammunition
counter
that
whole
thing.
It's
all
react
it's
actually
backed
by
MA
packs
with
about
a
thousand
observables,
and
the
thing
that
I
always
like
to
point
out
here
is
that,
as
someone
who
comes
from
native
development
I've
been
beating
this,
we
should
do
web
technologies
from
for
about
10-15
years
now,
obviously
a
JavaScript
conference.
A
But
there's
this
like
understanding
that
JavaScript
is
supposedly
easier
and
maybe
not
as
good
as
native
technologies.
I
can
assure
you
that
the
people
working
at
dice
do
know
a
thing
or
two
about
native
development.
They're
quite
go
to
building
complex
native
applications,
but
there's
a
reason
why
they
chose
typescript
and
react
to
build
a
user
interface,
and
that
is
that
the
web
really
is
one
of
the
best
technologies
we
have
today
for
building
user
interfaces
that
contain
information.
It's
just
really
really
good
at
it
right.
A
It's
that's
a
very
important
point
and
the
other
example
I
have
is,
from
a
similar,
similar
point
of
view.
It's
the
NVIDIA
GeForce
experience.
If
you
have
a
Windows
device
that
has
an
a
graphics
card,
you
have
this
application
installed.
It
comes
with
the
drivers
and
the
nvidia
geforce
experience
comes
with
not
only
web
components,
but
also
no
js'.
Every
single
nvidia
driver
contains
a
version
of
nodejs
and
it's
used
for
communication
between
the
GPU
and
applications
and
nvidia
tools.
A
So
things
like
the
nvidia
in-game
experience
where
you
can
record
things
all
of
that
is
handled
via
nodejs,
and
this
is
an
interesting
use
case
for
me,
because
we
often
talk
about
node.js
as
being
cross-platform
and
JavaScript
being
cross-platform
and
video
doesn't
really
necessarily
care
about.
All
of
that.
It's
just
a
really
convenient
way
to
write.
This
kind
of
stuff
and
again
I
love
this
Nvidia
example,
because
the
Nvidia
people
to
have
a
whole
plethora
of
coding
languages
to
choose
from,
and
it's
not
that
there's
a
bunch
of
people
sitting
in
a
video
and
going.
A
Oh,
we
sadly
only
know
JavaScript.
If
only
there
was
anything
else.
We
could
use
they've
chosen
this
tool
because
it
is
really
the
best
one
for
the
application
and
then
lastly,
the
Adobe
Creative
Suite,
which
is
sort
of
and
the
way
they
designed
that
cross-platform
solutions
a
little
bit
like
the
grandfather
of
electron,
because
the
Adobe
Creative
Suite
was
one
of
the
first
applications
that
shipped
with
the
chrome,
content,
module
and
nodejs
embedded.
So
every
single
time
you
open
up
Photoshop,
Lightroom,
Premiere
Pro,
any
of
those
creative
Adobe
applications,
you're
opening
up,
nodejs
and
chrome.
A
It's
not
the
whole
application,
but
they
do
power.
The
plug-in
experience
with
those
two
tools
and
the
reason
they
did,
that
is
to
allow
plug-in
developers,
including
Adobe
itself,
to
build
cross-platform
experience
that
can
hook
into
the
native
experience.
There
was
the
idea
right.
We
didn't
really
have
a
solution
for
building
semi
native
code.
They
could
hook
into
the
operating
system
and
also
build
some
kind
of
user
interface
for
plugin
developers,
so
they
chose
those
two
technologies
and
then
lastly,
the
fury
latest
a
few
latest
came
all
the
electronic
ations
there's.
A
A
few
famous
examples
that
you
may
have
heard
of
Visual
Studio
code
is
sort
of
our
poster.
Child
slack
is
the
one
that
I
work
on,
but
there's
also
ones
that
I
find
personally
more
interesting
as
an
X
Microsoft
person,
the
installer
for
Visual
Studio
itself,
the
big
Visual
Studio
is
written
in
an
electron
abdication,
which
is
one
of
my
favorite
stories,
but
there's
so
many
other
ones.
Right.
A
Whatsapp
I
personally
built
a
little
windows,
95,
emulator
and
electron.
There's
dozens
of
applications
out
there
and
chances
that
you're,
an
electron
implication
on
your
notebook,
are
pretty
actually
pretty
high.
I
just
want
to
do
this
real,
quick.
How
many
of
you
are
running
either
Visual
Studio
code,
slack,
Microsoft
teams,
discord
or
Adam
on
your
device.
A
A
Thank
you,
okay.
So,
whenever
I
give
that
presentation,
the
the
reaction
isn't
great
and
it
wasn't
great
before
we
started
working
this
electron
thing
before
that
it
was
wind,
ray
asked
this
notion
of
writing
Windows
applications
and
web
technologies,
but
there's
a
real
reason.
Why
we're
doing
it
right
and
the
primary
reason
that
I
want
to
point
out
is
that
most
of
the
people
working
on
electron,
even
the
people
using
electron
today,
would
gladly
choose
something
else.
On
electron
itself,
you
have
a
bunch
of
native
developers.
A
A
This
brilliant,
no
other
way
to
say
that
which
pains
me,
but
especially
if
you
want
to
build
a
cross-platform
application
that
is
supposed
to
run
on
Windows
seven
and
up
with
a
big
one,
Windows
7
was
released
the
same
year
as
the
iPhone
3,
which,
by
the
way,
had
the
headline
feature
of
copy
and
paste
and
sending
pictures
via
text
messages.
That's
how
old
this
operating
system
is.
A
So
if
you
want
to
support
that
operating
system
together
with
the
modern
Windows
systems
and
Mac
OS
and
Linux,
there
really
isn't
much
and
there
certainly
isn't
much
that
doesn't
require
you
to
build
a
bunch
of
native
applications
for
each
platform.
So
with
that
being
said,
what
is
electron-electron
is
a
combination
of
three
major
components:
the
first
one
being
the
chrome
content
module.
This
is
in
your
head.
A
Basically,
in
an
analog
to
chromium
right,
it's
the
anything
chrome
deems
necessary
to
build
a
browser,
everything
that
is
google-specific,
so
no
Google
profiles,
but
everything
need
to
turn
javascript
HTML
CSS
into
pixels,
and
then
we
have
no
js'
the
v8
runtime.
We
all
love
dearly
right
and
then
we
have
a
very
thick
layer
of
c++
around
it,
and
this
layer
of
c++
implements
a
bunch
of
api's.
You
might
need
to
build
a
native
application.
A
Those
are
things
like
interacting
with
the
native
window
object
or
sending
native
notifications
or
interacting
with
a
touch
bar
whatever
you
might
need
and
there's
a
pretty
thick
layer
of
c++
and
electron
comes
with
that
allows
you
to
do
that.
Cross-Platform,
so
how
do
you
actually
use
all
of
that
right?
A
A
Editor
is
a
thing
implemented
in
Microsoft
a
bunch
of
years
ago,
as
Visual
Studio
online,
which
didn't
really
work
out
and
eventually
became
a
part
of
era
websites,
and
it
was
sort
of
this
notion
that
in
Azure
you
had
a
little
little
pen
and
when
you
hit
it,
you
could
edit
your
website
as
your
website
itself,
wasn't
the
biggest
success.
But
this
little
text
editor
was
pretty
damn
good
and
at
that
time
someone
made
this
joke
of.
A
Oh,
if
you
put
that
in
a
window
and
I
give
it
to
people,
they're
gonna
use
it,
which
was
a
funny
joke,
but
you
know
then,
then
they
did
it.
So
that's
how
we
have
Visual
Studio
code
today,
so
we're
gonna
do
the
same
thing
right
like
this
is
how
many
electron
applications
begin.
They
start
as
a
website
or
a
web
application
that
is
extremely
powerful
and
then
eventually
someone
goes
oh.
This
could
be
an
amazing
desktop
application
if
only
it
could
do.
A
X
right
and
X
could
be
whatever
you
want,
because
no
GS
allows
you
to
write
in
whatever
you
want.
If
you
want
to
write,
C
or
C++
or
anything
else,
we
have
a
lot
of
objective-c
and
select
desktop
applications.
You
can
do
that.
You
have
native
know
that
ons,
but
that's
usually
out,
begins
and
the
case
a
Visual
Studio
code.
The
most
obvious
thing
that
happened
was
this
would
be
a
great
text
editor.
A
If
only
could
read
and
save
files,
which
is
one
of
the
basic
features
of
a
text
editor
which
in
2019
you
can
actually
do
with
a
browser,
but
certainly
in
Visual
Studio
code
started.
You
couldn't
write
and
if
you
think
about
the
editor
today,
it
has
a
native
debugger
right,
all
kinds
of
features
that
you
can't
really
do
in
a
website.
So
let's
actually
do
that
and
go
through
the
motion.
A
There
we
go
so
now
we
have
a
package
Jason
and
in
this
package
Jason
what
we
would
normally
do
if
we
were
to
build
a
note
application.
It's
that
we
defined
a
start
script
right
and
for
most
applications
there
will
be
no
doubt
noticed
sort
of
the
runtime
that
runs
our
JavaScript
right.
So
when
we
execute
this
application
with
an
NPM
start,
what
happens
is
that
note
reads
our
index,
which
is
which
right
now
and
here's
a
console
log
and
then
eventually
executes
it.
So
to
turn
this
into
an
electron
implication.
A
A
When
we
execute
this
application,
is
that
correct?
Writing
will
start?
What
happens
now?
Is
that
more
or
less
the
same
thing
happens
when
you
boot
up
electron?
We
start
something
called
the
main
process
which,
to
you,
might
look
and
feel
a
lot
like
a
normal
node
process.
There's
one
important
difference.
The
first
one
is
that
you
can
now
see
electron
down.
Here
we
are
an
actual
application
and
the
other
one
is
that
this
script
doesn't
immediate,
but
otherwise
this
is
basically
node.
A
If
you
want
to
require
s,
you
can
do
that
and
you
can
use
this
any
any
given.
Node
script
will
be
basically
around
here
right.
You
have
everything
else
that
you
have
normally
available,
and
this
is
our
main
process.
Once
we've
started
this
main
process,
we
also
boot
up
everything
we
need
for
Chrome.
So
those
are
typical
things
like
the
GPU
process
and
then
eventually
we
can
start
additional
renderer
processes
which
for
us
our
window.
A
So
when
you
want
to
build
a
desktop
application,
one
of
the
most
important
pieces
of
primitives
you
have
is
the
user
interface,
the
window
that
you're
going
to
start
painting
things
in
and
the
way
electron
solves.
That
is
that
it
should
feel
very
familiar
to
anyone
who's
used
to
note
applications
and
that
you
already
know
the
fs
module.
You
know
the
Utah
module.
We
have
one
additional
one
that
is
called
electron
right,
so
you
can
can
do
this.
A
In
electron
itself
contains
a
bunch
of
modules,
the
first
one
being
the
app
module
and
the
second
one
being
the
browser
window
module
and
those
are
the
ones
we're
going
to
use
for
a
second.
So
the
application
object
allows
us
to
interact
with
the
applications
lifecycle
on
your
operating
system.
What
I
mean
by
that
is,
when
you
start
an
electron
application,
this
main
process
never
has
any
user
interface.
A
It's
always
invisible
on
windows,
who
don't
even
have
anything
in
your
in
your
taskbar,
but
we
also
boot
up
a
GPU
process
and
various
services,
and
eventually
those
services
are
going
to
be
ready
and
ready
for
you
to
start
doing.
Ui
stuff,
so
we're
gonna,
say
application
on
ready
and
do
things
now
and
what
we're
gonna
do
is
we're
gonna
make
a
window
just.
A
Like
so,
and
now,
when
we
start
this
application,
we
get
an
empty
window.
Nothing
super
exciting
here.
In
fact,
if
you
open
the
developer
tools,
they
crash
immediately
because
they
do
expect
some
kind
of
content
which
is
currently
not
present,
but
that's
fundamentally,
I
will
open
up
a
browser
window
and
we're
going
to
start
doing
we're
gonna
start
doing
user
interfaces
here.
But
one
cool
thing
about
electron
is
that
we
can
combine
the
powers
of
node
with
the
power
of
chromium.
So
as
specification
I
can
say,
web
preferences
don't
integration.
True.
A
A
Okay,
so
that
brings
us
one
step
closer
to
an
actual
application,
in
that
we
now
have
a
window
with
a
dock
icon
and
in
the
window
we
have
actual
content.
But
the
thing
that
makes
this
very
quickly
very
interesting
is,
if
I
zoom
in
here,
is
that
we
have
all
of
node
available
here,
including
native
modules,
if
you
want
to
so,
if
I
want
to
read
anything
this
works.
This
is
here
in
my
window,
so
that
allows
you
to
combine
the
powers
that
you
know
from
the
Dom
CSS
with
everything
you
know
from
node
right.
A
So
if
you
have
a
piece
of
native
code,
say
sequel,
light
or
something
you
can
load
that
here
that
actually
works,
and
you
can
combine
those
two
things
together
and
what
I'm
gonna
do
so
I'm
going
to
install
Monaco,
loader
and
Monica
editor.
These
are
modules
that
are
normally
consumed
with
web
pack
or
some
other
common
J's
and
port
turn
into
web
stuff
kind
of
tools,
but
I'm
gonna
go
ahead
and
add
a
renderer
ojs
and
because
in
here
I
already
explained
that
we
have
no
devale
about
speaking
about
miles.
A
A
Also,
lock
hello,
we
run
this
again
to
open
up
the
console.
You
will
see
my
little
hello
all
right
there,
so
taking
that
one
step
further,
let's
actually
start
building
our
editor,
a
few
things
I'm
going
to
do,
I'm
going
to
start
by
actually
including
the
loader
itself,
and
this
is
not
electron
specific.
This
could
be
any
node.js
code.
It's
just
that
this
is
fairly
simple,
straightforward
code,
therefore
good
for
demonstration
and
now
I'm
going
to
get
my
Def
Con
staff
document.getelementbyid
e
container-
and
this
is
cool.
A
You
know
how
you
sometimes
need
to
do
some
canvas
stuff,
a
node,
and
then
you
install
50,000
modules
because
implementing
a
canvas,
Android
javascript
is
kind
of
difficult.
We
have
to
fold
available
here,
all
of
it
whatever
you
need
so
another.
We
have
our
diff
I'm
going
to
create
a
little
editor,
and
this
is
Monaco
specific
code.
But
what
I'm
doing
is
I'm,
saying
hey
dear
Monaco
editor,
please
create
a
new
editor
in
the
div
language.
I
want
JavaScript
and,
as
theme
I
want
vs
dark.
A
But
since
I'm
shipping,
my
own
browser
engine
I,
don't
really
have
to
worry
about
that
and
getting
a
new
browser
engine
into
an
enterprise
environment.
It's
a
lot
easier
than
convincing.
You
know
some
super
secure
environment
to
install
an
entirely
new
browser.
So
we've
done
that
and
we
can
start
this
application
again
and
now
we
get
something
that
looks
a
little
bit
like
Visual
Studio
code
itself.
A
Let's
move
this
over
here
and
this
over
here
and
if
I
wanted
to
I
can
now
load
my
actual
app
in
here
you
can't
zoom
in
yet
I
didn't
we
didn't
build
the
whole
zoom
thing
yet
we
can
but
I
don't
think
it's
actually
gonna
work
just
a
key
one
to
it.
Yeah
there
we
go
and
believe
it
or
not.
This
is
pretty
much
the
bad
ones
version
of
Visual
Studio
code
right,
like
most
of
the
things
we
use
in
Visual
Studio
code
every
single
day
and
are
available
in
this
teeny
tiny
application.
A
There
isn't
really
that
much
more,
that
people
did
the
first
version,
edit
local
loading
and
saving
using
the
FS
module.
I
just
read
it
in
save
it
out
and
more
or
less
that's
everything
that
happened
here,
which
is
an
interesting
point
to
talk
a
little
bit
about
the
challenges
right,
I
promise
in
the
abstract
that
we
would
talk
a
little
bit
about
what
makes
this
difficult
and
there's
one
very
common
pitfall
that
many
applications
fall
into
right
after
realizing
all
these
powers.
A
Sooner
or
later,
someone
is
going
to
have
the
really
clever
idea
of
doing
all
of
that,
and
then
loading
something
from
the
internet
right
that
would
be
a
very
straightforward
process
would
be
like.
Why
do
we
even
ship
all
our
HTML?
We
could
just
load
it
from
the
Internet,
and
that
is
probably
the
biggest
challenge,
because
that
is
a
terrible,
terrible
idea
and
that's
a
terrible
idea,
because
again
you
have
all
of
node
available
which
has
the
same
rights
as
you,
and
it
has
a
child
process.
A
And
if
you
want
to
spawn
things,
you
can
do
that.
So
the
way
electron
is
used
today
by
modern
applications
is
one
of
two
ways.
The
first
one
is
the
visual
studio
code
way
where
you
do
actually
ship
all
your
application
code,
and
you
trust
that
code
and
you
have
node
code
that
you
trust
right
and
then
the
alternative
is
model.
A
But
fundamentally,
the
idea
here
is
that
you
sort
of
choose
your
you
choose
your
poison
I.
Do
either
don't
trust
where
you're
loading
and
then
you
need
to
control
what
kind
of
things
that
application
can
do
or
you
ship
everything
with
your
application,
and
that
is
probably
the
biggest
challenge,
and
now
that
we've
pulled
this
application.
A
The
next
typical
step
for
people
would
be
that
you
go
ahead
and
try
to
turn
that
into
an
actual
binary
right
and
there's
various
solutions
available
for
that.
One
of
the
things
that
is
great
about
electron
is
that
tons
of
applications
depend
on
it
because
tons
of
applications
depend
on
it.
The
ecosystem
is
extremely
rich
to
date.
A
There
is
more
than
a
thousand
five
hundred
modules
available,
NPM
that
do
something
electron
specific
and
usually
that
thing
is
to
an
electron
into
a
certain
application
package
right,
if
you
want
to
ship
your
electron
application
to
the
snap
craft
store
that
is
available.
If
you
want
to
notarize
it
with
Mac
OS
that
is
available,
and
one
of
the
one
of
the
tools
that
does
it
extremely
well
is
electron,
forge
as
built
by
Sam
who's
sitting
right
there.
A
A
So
if
we
you
know,
if
you
want
to
see
that
in
action,
one
of
the
applications
I
would
recommend
to
look
at
is
electrons
own
little
application
called
fiddle,
which
also
lets
you
play
with
electron
itself
fiddle,
is
sort
of
the
thing
that
we
just
built,
except
that
we
kept
going
fiddle
is
a
little
code,
editor
that
allows
you
to
build
little
teeny,
tiny,
electron
experiments
and
play
with
them,
and
you
can
check
out
various
tools
in
there.
So
if
you
want
to
see
something
like
the
desktop
capture,
which
is
a
tool
that
lets
you.
A
So
anyway,
as
I
was
saying,
if
you
want
to
see
something
like
the
desktop
capture
on
action,
you
can
run
this
little
application
and
the
desert
capture
is
broken,
which
we
will
debug
later.
But
it's
it's
a
little
application.
That's
not
only
open-source.
It's
also
using
electron
forge,
so
you
can
sort
of
see
how
we
turn
this
application
into
actual
binaries.
We
do
all
of
that
in
CI.
A
Alright,
we
have
about
five
minutes
for
Q&A.
If
anyone
has
any
questions,
while
we
do
that,
I'm
gonna
leave
this
open.
If
any
of
you
want
to
get
started
with
it
and
haven't
yet
recommend
fiddle,
recommend
electron
j/s
fiddle
also
allows
you
to
export
your
little
experiments
as
a
forge
project.
So
you
can
build
something
tiny,
just
export
it
as
a
desktop
app.
Send
it
to
your
parents
right,
which
is
honestly
one
of
the
big
benefits
of
any
of
your
write,
npm
modules.