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
10 things to know about Electron
Search
Kevin Sawicki
April 23, 2016
Technology
520
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
10 things to know about Electron
Presented at DevPulseCon on April 23rd, 2016.
http://devpulsecon.squarespace.com
Kevin Sawicki
April 23, 2016
More Decks by Kevin Sawicki
See All by Kevin Sawicki
Electron 1.0
kevinsawicki
1
370
Testing your Electron apps with ChromeDriver
kevinsawicki
4
17k
The History of Electron
kevinsawicki
4
9.2k
Atom: 10 things to know about your new text editor
kevinsawicki
2
1.3k
Atom: your text editor for the next 50 years
kevinsawicki
0
180
Other Decks in Technology
See All in Technology
NetBoxを利用した作業効率化の試み_NetDevNight4
tnoha
0
450
[しろおび夏祭り2026] チャットするAIから、作業するAIへ - 使われ方の変化と、その裏側で起きていること
kk0n
0
1.5k
CloudWatchから始めるAWS監視
butadora
0
310
plamo-3-translateの開発
pfn
PRO
0
260
Swift&Xcodeのバージョンアップにまつわる怖かった思い出 / Scary Memories of Swift and Xcode Updates
bitkey
PRO
0
130
セキュリティ研修【MIXI 26新卒技術研修】
mixi_engineers
PRO
33
28k
『三匹の子ぶた』から学ぶネットワークセキュリティの昔と今 / Network Security: Then and Now Through the Lens of The Three Little Pigs
nttcom
1
1.5k
20260722_品質と開発生産性の相互作用
magicpod
0
110
【CEDEC2026】コードレビュー支援ツール開発から学ぶ:LLMを用いた業務システムの実践的な運用設計と誤出力対策
cygames
PRO
0
400
toio・myCobotでフィジカルAIっぽいことを行うための検討(とりあえず調査) / フィジカルAI LT(IoTLTによる開催)
you
PRO
0
260
侵入は突然に 〜 IoTマルウェアと悪用される家庭の機器 ~ / When Intrusion Strikes: IoT Malware and the Abuse of Home Devices
nttcom
0
1.3k
Master Dataグループ紹介資料
sansan33
PRO
1
4.8k
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Odyssey Design
rkendrick25
PRO
2
740
Color Theory Basics | Prateek | Gurzu
gurzu
0
400
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
790
Applied NLP in the Age of Generative AI
inesmontani
PRO
4
2.4k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
baasie
0
460
GraphQLの誤解/rethinking-graphql
sonatard
75
12k
How GitHub (no longer) Works
holman
316
150k
Building a A Zero-Code AI SEO Workflow
portentint
PRO
0
650
Navigating Team Friction
lara
192
16k
SEO Brein meetup: CTRL+C is not how to scale international SEO
lindahogenes
1
2.8k
Mobile First: as difficult as doing things right
swwweet
225
10k
Transcript
10 THINGS TO KNOW ABOUT ELECTRON
KEVIN SAWICKI GITHUB @KEVINSAWICKI
[email protected]
None
WHAT IS ELECTRON? #1
BUILD CROSS PLATFORM DESKTOP APPS WITH WEB TECHNOLOGIES http://electron.atom.io WHAT
IS ELECTRON?
None
None
5.10 49.0
None
WHO IS ELECTRON FOR? #2
IF YOU CAN BUILD A WEBSITE, YOU CAN BUILD A
DESKTOP APP
FREE, OPEN SOURCE STARTED BY GITHUB RELEASED 02/2014
THE HARD PARTS MADE EASY
HOW DOES ELECTRON WORK? #3
main process
main process node
main process menu tray dialog node
main process menu tray dialog window renderer process node ipc
main process menu tray dialog window renderer process node DOM
node ipc
main process menu tray dialog window window window renderer process
node DOM renderer process renderer process node DOM node DOM node ipc
HOW DOES YOUR ELECTRON WORK? #4
ELECTRON IS NOT PRESCRIPTIVE
None
REACT? BABEL? BROWSERIFY? GO FOR IT!
ANGULAR? BOOTSTRAP? WEBPACK? GO FOR IT!
OR ENJOY THE PURITY OF CHROME
CUSTOM ELEMENTS? CSS VARIABLES? ES6? GO FOR IT!
USE ANY OF THE 273,000 PACKAGES ON NPM
YOU CHOOSE WHEN TO UPGRADE
ELECTRON APPS FEEL NATIVE #5
None
TRAY API
TRAY API FRAMELESS WINDOW
TRAY API FRAMELESS WINDOW TRANSPARENT WINDOW
TRAY API FRAMELESS WINDOW NOTIFICATIONS TRANSPARENT WINDOW
TRAY API FRAMELESS WINDOW NOTIFICATIONS PHOTON CSS TOOLKIT TRANSPARENT WINDOW
None
None
★ TAKE SCREENSHOTS ★ ACCESS MICROPHONE AND CAMERA ★ NATIVE
OPEN, SAVE, MESSAGE DIALOGS ★ ADD CONTEXT AND SYSTEM MENUS ★ REGISTER GLOBAL KEYBOARD SHORTCUTS ★ PREVENT SLEEP MODE ★ REPORT CRASHES
ELECTRON MAKES DEBUGGING EASY #6
JAVASCRIPT DEBUGGER
RENDER TIMELINE
HEAP SNAPSHOTS
BUNDLE AND SHIP ADDITIONAL EXTENSIONS
ELECTRON CAN BE TEST DRIVEN #7
ELECTRON SUPPORTS WEBDRIVER & CHROMEDRIVER
WEBDRIVER IS AN OPEN SOURCE TOOL FOR AUTOMATED TESTING OF
WEB APPS ACROSS MANY BROWSERS. ChromeDriver docs WHAT IS WEBDRIVER?
CHROMEDRIVER IS A STANDALONE SERVER WHICH IMPLEMENTS WEBDRIVER'S WIRE PROTOCOL
FOR CHROMIUM. ChromeDriver docs WHAT IS CHROMEDRIVER?
None
ELECTRON APPS ARE OUT THERE #8
SLACK NYLAS N1 ATOM VISUAL STUDIO CODE
WEBTORRENT DESKTOP
★ Streaming torrent client implemented in JavaScript ★ Uses WebRTC
for peer connections ★ Free and open source
JIBO
None
ELECTRON HAS AN AMAZING COMMUNITY #9
★ 350 CONTRIBUTORS ★ 1,600 PULL REQUESTS ★ 27,000 STARS
★ 2,800 FORKS ★ 850 PACKAGES ON NPM
NATIVEFIER
SINDRESORHUS/AWESOME-ELECTRON
BAY AREA ELECTRON USER GROUP MAY 25TH @ 6:30 PM
MICROSOFT SF OFFICE HTTP://WWW.MEETUP.COM/BAY-AREA-ELECTRON-USER-GROUP
ELECTRON IS GOING 1.0 #10
API STABILITY
MORE APIS
BETTER DOCS
BETTER TOOLS
None
THANKS! HTTP://ELECTRON.ATOM.IO HTTP://GITHUB.COM/ELECTRON @ELECTRONJS