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
1
480
10 things to know about Electron
Presented at DevPulseCon on April 23rd, 2016.
http://devpulsecon.squarespace.com
Kevin Sawicki
April 23, 2016
Tweet
Share
More Decks by Kevin Sawicki
See All by Kevin Sawicki
Electron 1.0
kevinsawicki
1
350
Testing your Electron apps with ChromeDriver
kevinsawicki
4
17k
The History of Electron
kevinsawicki
4
8.9k
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
130
Other Decks in Technology
See All in Technology
いつも初心者向けの記事に助けられているので得意分野では初心者向けの記事を書きます
toru_kubota
2
230
30 代子育て SRE が考える SRE ナレッジマネジメントの現在と将来
kworkdev
PRO
0
190
AIエージェント開発における「攻めの品質改善」と「守りの品質保証」 / 2024.04.09 GPU UNITE 新年会 2025
smiyawaki0820
0
370
React Server Componentは 何を解決し何を解決しないのか / What do React Server Components solve, and what do they not solve?
kaminashi
6
1.4k
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
21k
Creating Awesome Change in SmartNews
martin_lover
1
170
ペアーズにおけるData Catalog導入の取り組み
hisamouna
0
270
Tirez profit de Messenger pour améliorer votre architecture
tucksaun
1
220
“パスワードレス認証への道" ユーザー認証の変遷とパスキーの関係
ritou
1
150
ブラウザのレガシー・独自機能を愛でる-Firefoxの脆弱性4選- / Browser Crash Club #1
masatokinugawa
0
270
アセスメントで紐解く、10Xのデータマネジメントの軌跡
10xinc
1
180
”知のインストール”戦略:テキスト資産をAIの文脈理解に活かす
kworkdev
PRO
9
4k
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
41
2.6k
Adopting Sorbet at Scale
ufuk
76
9.3k
Code Review Best Practice
trishagee
67
18k
We Have a Design System, Now What?
morganepeng
52
7.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.2k
Bash Introduction
62gerente
611
210k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
GraphQLとの向き合い方2022年版
quramy
45
14k
How to Ace a Technical Interview
jacobian
276
23k
The Cost Of JavaScript in 2023
addyosmani
48
7.7k
Making Projects Easy
brettharned
116
6.1k
Transcript
10 THINGS TO KNOW ABOUT ELECTRON
KEVIN SAWICKI GITHUB @KEVINSAWICKI KEVIN@GITHUB.COM
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