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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Kevin Sawicki
April 23, 2016
Technology
510
1
Share
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
360
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
170
Other Decks in Technology
See All in Technology
Claude Code を安全に使おう勉強会 / Claude Code Security Basics
masahirokawahara
12
39k
Modernizing Your HCL Connections Experience: Visual Report to chain, Profile Enhancements, and AI Integration
wannesrams
0
210
MySQL 9.7がやってきた ~これまでのあらすじと基本情報~ @ 日本MySQLユーザ会会2026年04月 / mysql97-yattekita
sakaik
0
140
バイブコーディングで3倍早く⚪⚪を作ってみた
samakada
0
200
Rapid Start: Faster Internet Connections, with Ruby's Help
kazuho
2
960
アクセシビリティはすべての人のもの
tomokusaba
0
160
エージェントスキルを作って自分のインプットに役立てよう
tsubakimoto_s
0
490
ファインディの事業拡大を支える 拡張可能なデータ基盤へのリアーキテクチャ
hiracky16
0
580
AWS Transform CustomでIaCコードを自由自在に変換しよう
duelist2020jp
0
210
20260423_執筆の工夫と裏側 技術書の企画から刊行まで / From the planning to the publication of technical book
nash_efp
3
680
Good Enough Types: Heuristic Type Inference for Ruby
riseshia
1
380
Cortex Codeのコスト見積ヒントご紹介
yokatsuki
0
130
Featured
See All Featured
Mind Mapping
helmedeiros
PRO
1
170
Faster Mobile Websites
deanohume
310
31k
RailsConf 2023
tenderlove
30
1.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
133
19k
The AI Search Optimization Roadmap by Aleyda Solis
aleyda
1
5.7k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
sarafernandez
0
170
How Software Deployment tools have changed in the past 20 years
geshan
0
33k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
apolaine
0
290
Music & Morning Musume
bryan
47
7.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.2k
Deep Space Network (abreviated)
tonyrice
0
130
How to audit for AI Accessibility on your Front & Back End
davetheseo
0
330
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