Building up the
Electron Project
Jessica Lord
JSConf Hawai’i 2019
Team & Community Engineering
Slide 2
Slide 2 text
she/her
tw/jllord
gh/jlord
Jessica Lord
Slide 3
Slide 3 text
Electron
An open source library built at GitHub that combines Node.js
and Chrome into one environment so that you can build
desktop apps with HTML, CSS and JS/Node.
Slide 4
Slide 4 text
atom-shell
The year is 2015.
Slide 5
Slide 5 text
Desktop
Applications
Could mean 3 teams, 3 apps each native to an OS.
Or reach fewer users. Mac, Windows,
Linux
Slide 6
Slide 6 text
Atom
GitHub’s text editor built with web technologies.
HTML, JS, CSS
Node.js
Slide 7
Slide 7 text
CEF NW.js atom-shell
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
Finding atom-shell
Some people had looked into the Atom org on GitHub to see
what Atom was built on.
Slide 10
Slide 10 text
VS Code Atom
Slide 11
Slide 11 text
atom-shell
becomes Electron
An electron is a part of an atom!
Slide 12
Slide 12 text
Me, in
meetings
Slide 13
Slide 13 text
“Electron is
not important.”
Slide 14
Slide 14 text
“No one will work
on Electron.”
Slide 15
Slide 15 text
“Use your weekends.”
Slide 16
Slide 16 text
She Persisted
Researched usage, the space, what was missing and made
roadmaps.
Slide 17
Slide 17 text
40 More Hours
for Electron!
Began by spending my work weeks (on the Atom team)
on Electron.
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
First Things First
Documentation!!!
Slide 20
Slide 20 text
Static Sites FTW
They’re great. Please see JAMStack for more.
JavaScript,
APIs, Markup
Slide 21
Slide 21 text
Documentation
Body of docs exists, edit, standardize consistent language and
markdown semantics.
Slide 22
Slide 22 text
Single Source of Truth
Docs live in the Electron repo, everyone gets a copy,
they’re markdown. download,
fork, clone
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
Stream docs from
release tarball,
parse and generate
Jekyll front matter.
Slide 27
Slide 27 text
Breadcrumb,
Version,
One-liner,
Process
Slide 28
Slide 28 text
From Markdown
to Better
A little bit of CSS to make notation more discernible
and approachable.
Slide 29
Slide 29 text
Improve
readability with
styles
Slide 30
Slide 30 text
Don’t forsake
the markdown
Slide 31
Slide 31 text
An App of One’s Own
Get people up and running quickly, comprehensibly and don’t
give yourself a lot of extra work, either.
Slide 32
Slide 32 text
Not Gonna Init
Electron apps vary too much in scale and style to prescribe one
way and it’s futile to try and maintain every permutation.
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
Electron Quick Start
Clone, install and run for an Electron app. Hint at what’s
possible but keep it familiar.
HTML, CSS,
Dev tools
Slide 35
Slide 35 text
Dev tools,
a couple API calls
Slide 36
Slide 36 text
Developers,
Developers, Developers
Prioritize the education of devs who don’t yet realize what
they can do.
Slide 37
Slide 37 text
Electron API
Demos App
Electron app to show what you can do with Electron, sample
code included; built to be opened up and examined.
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
Sample Code is
the Code
The demo app uses Node APIs to read its own files and web
APIs to put them to the DOM in the app.
Slide 40
Slide 40 text
ES6: just because
you can doesn’t
mean you should.
Slide 41
Slide 41 text
Built to Open up
Folder structure, naming conventions are all done so that new
users exploring the insides can make sense of it.
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
Document structure
and diagram of chain
of events.
Slide 44
Slide 44 text
Electron Community
and Userland
Electron needs the community and userland for support and is
in a unique position to respond to the community.
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
1.0
We’d launched the 1.0, grown to a team of 4, had our own
names and meetings!
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
Final Thoughts
These are the slides near the end and are about what the
point of all of this was.
Slide 49
Slide 49 text
Community
Engineering
How people understand and experience a system. Putting new
developers first.
Slide 50
Slide 50 text
Electron’s situation
was different
Which was good. Unplanned, outside the view of dot com, was
able to work on ideas (mostly) unchallenged and the project
could respond to the community rather than internal forces.
Slide 51
Slide 51 text
One Day, Electron
will be gone
As it should be. And hopefully one day our current ideas on
documentation and talking about code will be gone, too.
Slide 52
Slide 52 text
jlord.us/essential-electron
Slide 53
Slide 53 text
Scale Down, People Up
Don’t give yourself extra work! Things can probably be simpler
than you think.