Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Building Desktop Applications with Electron, JS...
Search
Steve Kinney
October 07, 2016
Technology
2
170
Building Desktop Applications with Electron, JSConf Colombia 2016
Steve Kinney
October 07, 2016
Tweet
Share
More Decks by Steve Kinney
See All by Steve Kinney
Introduction to Testing
stevekinney
0
76
Web Security, Frontend Masters
stevekinney
0
2.5k
Making Music with the Web Audio API, JSConf Colombia 2023
stevekinney
0
86
React and TypeScript, Turing School
stevekinney
0
320
Redux Workshop, 2021-05-05
stevekinney
2
2.1k
TypeScript and React Utility Types
stevekinney
1
190
A Gentle Introduction to GraphQL Resolvers
stevekinney
1
160
React State
stevekinney
11
10k
React State: useEffect and Custom Hooks
stevekinney
0
240
Other Decks in Technology
See All in Technology
Digitization部 紹介資料
sansan33
PRO
1
4.5k
ClaudeCodeにキレない技術
gtnao
1
860
VS CodeとGitHub Copilotで爆速開発!アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave
yamachu
3
460
Maintainer Meetupで「生の声」を聞く ~講演だけじゃないKubeCon
logica0419
0
110
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
820
ソフトウェアQAがハードウェアの人になったの
mineo_matsuya
3
200
Figma Dev Mode MCP Serverを用いたUI開発
zoothezoo
0
230
“日本一のM&A企業”を支える、少人数SREの効率化戦略 / SRE NEXT 2025
genda
1
270
全部AI、全員Cursor、ドキュメント駆動開発 〜DevinやGeminiも添えて〜
rinchsan
10
5.1k
United™️ Airlines®️ Customer®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedguide
0
800
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
1
310
SRE with AI:実践から学ぶ、運用課題解決と未来への展望
yoshiiryo1
0
310
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7k
A better future with KSS
kneath
238
17k
For a Future-Friendly Web
brad_frost
179
9.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
340
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Agile that works and the tools we love
rasmusluckow
329
21k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Transcript
http://bit.ly/electron-jsconfco Clone down the two repositories and run npm
install in each.
Building Desktop Applications with Electron Steve Kinney — @stevekinney JSConf
Colombia 2016
Hi. I'm Steve @stevekinney
http://turing.io
http://dinosaurjs.org
http://bit.ly/electronjs
None
None
None
Electron (née Atom Shell)
Electron (née Atom Shell) A framework for building cross-platform desktop
applications with web technologies.
None
So, why would you want to use this Electron thing?
You want to build an application that has advanced permissions
like accessing the file system.
You want to build a small application that lives in
the user’s menubar or system tray.
You want to build an app that works well offline.
You want to be able to Command/Alt-Tab to your application.
You want to build a GUI for your Node application.
None
None
None
None
sindresorhus/caprine
Why is Electron so super cool?
None
Chrome Content Module HTML5 support GPU acceleration Blink and V8
Node 6.5.0 Filesystem access Native modules
None
None
Electron uses a pretty modern build of Chromium. Electron: 1.4.3
Node: 6.5.0 Chromium: 53.0.2785.113 V8: 5.3.332.45
None
None
None
The web browser lives in a kind of sandbox with
a bunch of restrictions in place in the name of security.
None
None
Electron applications have all of the freedom of any other
Node process.
None
require(…);
None
None
None
hij1nx/levelui
None
None
None
None
None
None
None
None
None
None
muan/mojibar
How does Electron work?
Let's take a look at a everything from a high
level before we dig in.
npm install -g electron-prebuilt
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
Inherently, offline first.
None
None
None
None
None
None
None
versus
None
None
None
None
None
None
None
No good.
None
electron.remote
None
None
None
None
None
None
None
None
None
Building a menu
electron.Menu
None
None
None
None
None
None
None
None
electron.globalShortcut
electron.globalShortcut
electron.globalShortcut
And more…
None
None
None
None
None
None
Let's get started.
None
npm install electron-prebuilt
npm install menubar
None
None
What about JSX or SASS or LESS?
npm install electron-prebuilt-compile npm install electron-packager-compile
What about Ember CLI?
ember install ember-electron
npm install electron-packager
None
None
sindresorhus/awesome-electron
None
Turing School: http://turing.io Electron in Action: http://bit.ly/electronjs ¡Gracias! Twitter: @stevekinney