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
38
Web Security, Frontend Masters
stevekinney
0
1.5k
Making Music with the Web Audio API, JSConf Colombia 2023
stevekinney
0
65
React and TypeScript, Turing School
stevekinney
0
280
Redux Workshop, 2021-05-05
stevekinney
2
2k
TypeScript and React Utility Types
stevekinney
1
180
A Gentle Introduction to GraphQL Resolvers
stevekinney
1
150
React State
stevekinney
11
10k
React State: useEffect and Custom Hooks
stevekinney
0
220
Other Decks in Technology
See All in Technology
Fearsome File Formats
ange
0
550
mixi2 の技術スタックを探ってみる (アプリ編)
ichiki1023
0
110
知っててうれしい HTTP Cookie を使ったセッション管理について
greendrop
1
110
The key to VCP-VCF
mirie_sd
0
160
Alignment and Autonomy in Cybozu - 300人の開発組織でアラインメントと自律性を両立させるアジャイルな組織運営 / RSGT2025
ama_ch
1
1.7k
DevFest 2024 Incheon / Songdo - Compose UI 조합 심화
wisemuji
0
250
PHPerのための計算量入門/Complexity101 for PHPer
hanhan1978
6
1.5k
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
1
16k
rootful・rootless・privilegedコンテナの違い/rootful_rootless_privileged_container_difference
moz_sec_
0
110
Qiita埋め込み用スライド
naoki_0531
0
5.5k
Storage Browser for Amazon S3
miu_crescent
1
350
I could be Wrong!! - Learning from Agile Experts
kawaguti
PRO
8
2.5k
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
Become a Pro
speakerdeck
PRO
26
5.1k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Writing Fast Ruby
sferik
628
61k
Adopting Sorbet at Scale
ufuk
74
9.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Navigating Team Friction
lara
183
15k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
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