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
530
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
RelayerというPHPのフレームワークを作った
polidog
PRO
0
130
Kiro入門|仕様駆動開発で変わるAI時代の開発スタイル
cmkudo
0
340
35分でわかるEffective Platform Engineering
nwiizo
5
620
20260817_生成AIの動向と中学校・高等学校での活用を考える_v1.00_公開用
doradora09
PRO
0
210
平文パスワードはログに“残り” ── 肝心の侵入は“痕跡すら残らない”
kuroneko13
0
120
コネクションをピン留めさせずに SELECTクエリのタイムアウトを設定した話
codmoninc
0
220
【GCC2026】TrueHDRIを用いたルックデブ環境とライティングテクニック
bandainamcostudios
PRO
0
350
Rust×eBPFでEDRっぽいものをつくる
sunlife3
2
890
[potatotips #96] Give Your AI Agent the Flutter Playbook
korodroid
0
150
私がブラウザを自作したくなった理由
supurazako
1
280
巨大気象データと戦う ― サロゲートモデル学習を高速化する圧縮技術
gpuunite_official
0
250
LLM Internals: 언어 모델의 계보와 알고리즘 진화 (2023~2026)
inureyes
PRO
1
890
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
515
110k
How to train your dragon (web standard)
notwaldorf
97
6.8k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
2.1k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
1.2k
Faster Mobile Websites
deanohume
310
32k
Designing for humans not robots
tammielis
254
26k
Rebuilding a faster, lazier Slack
samanthasiow
85
9.6k
Building an army of robots
kneath
306
46k
Scaling GitHub
holman
464
140k
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
870
Introduction to Domain-Driven Design and Collaborative software design
baasie
1
950
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
aleyda
2
11k
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