Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Build Cross Platform Desktop Application with Electron
WM
October 04, 2015
Technology
4
810
Build Cross Platform Desktop Application with Electron
@JSDC.TW 2015
WM
October 04, 2015
Tweet
Share
More Decks by WM
See All by WM
Fetch Web Streams
kidwm
0
260
Metaprogramming in ES2015
kidwm
3
710
Other Decks in Technology
See All in Technology
srenext2022-skaru
mixi_engineers
PRO
1
1.1k
個人的に使って良かったUiPathアクティビティ
saoritakita
0
280
Learning from AWS Customer Security Incidents [2022]
ramimac
0
1.6k
CAMのサービス開発の歴史と共通基盤を使った 開発スタイルへの変遷について
ishikawa_pro
0
110
Server-side Kotlin in LINE Messaging API
line_developers
PRO
0
200
開発者のための GitHub Organization の安全な運用と 継続的なモニタリング
flatt_security
3
4k
LINE WORKS API 2.0について
mmclsntr
0
150
AI Company
shurain
0
600
Data Warehouse or Data Lake, which one do I choose?
ahana
0
160
Whats new in Android Media?
myolwin00
2
120
ZOZOTOWNのProduction Readiness Checklistと信頼性向上の取り組み / Improvement the reliability of ZOZOTOWN with Production Readiness Checklist
akitok_
5
2.2k
STORES・STORES レジを支えるチーム開発文化 / Sustaining the team culture of STORES EC Regi
phayacell
0
110
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
19
1.4k
GitHub's CSS Performance
jonrohan
1020
410k
A better future with KSS
kneath
225
15k
Designing on Purpose - Digital PM Summit 2013
jponch
106
5.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
315
19k
The Web Native Designer (August 2011)
paulrobertlloyd
74
1.9k
Automating Front-end Workflow
addyosmani
1351
200k
Rebuilding a faster, lazier Slack
samanthasiow
62
7.2k
Teambox: Starting and Learning
jrom
121
7.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
655
120k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1M
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.4k
Transcript
Build Cross Platform Desktop Application with Electron @kidwm 1
Why to Build Desktop Application?
Desktop Factors • Massive Assets (Game) • Quick Typing (Messenger)
• Urgent Usage (Office) • Frequent Access (Music) Show Logo to your user constantly 3
How to Build Desktop Application?
How to Build Cross Platform Desktop Application?
Cross Platform Technology • Java • GTK+ / Qt •
XULRunner • Chrome Apps • Chromium Embedded Framework CEF everywhere! 6
CEF integrated with nodejs • brackets-shell • NW.js (node-webkit) •
Electron (atom-shell) Electron everywhere! 7
What is Electron?
History • Started in January 2013 • Built initially for
the Atom text editor • Renamed from atom-shell • use libchromiumcontent and Brightray to wrap Chromium Content module 9
browser process renderer process renderer renderer process process ipc
main.js var app = require('app') ; app.on('ready', function() {
electron-prebuilt sudo npm install --global electron-prebuilt electron main.js 12
Features
require modules built-in modules and npm packages modules for main
process and renderer process read module documentation 14
Inter-Process Communication
ipc • ipc.send(channel, args) • ipc.on(channel, callback) browser process renderer
process renderer renderer process process ipc 16
message channel app.js (renderer process) ipc.send ('connect', url); main.js (browser
process) ipc.on ('connect', function(event, url){}); 17
remote • remote.require(module) • remote.getCurrentWindow() • remote.getGlobal(name) browser process renderer
process renderer renderer process process ipc 18
remote procedure call main.js (browser process) global['config'] = JSON.parse(fs.readFileSync(path, 'utf8'));
app.js (renderer process) remote. getGlobal('config') ; 19
browserWindow & webContents • window.capturePage() • webContents.printToPDF() • webContents.enableDeviceEmulation() •
webContents.sendInputEvent() • webContents.executeJavaScript(code[, userGesture]) 20
webContents.session • session.cookies • session.enableNetworkEmulation() • session.setProxy() • session.clearStorageData() 21
<webview />
webview • preload script • disable websecurity • webview.openDevTools() •
webview.insertCSS() 23
shell
shell • shell.openExternal(url) • shell.openItem(fullPath) • shell.showItemInFolder(fullPath) • shell.moveItemToTrash(fullPath) 25
dialog
dialog • dialog.showOpenDialog() • dialog.showSaveDialog() • dialog.showMessageBox() remote.require('dialog'). showOpenDialog({
menu
menu template var Menu = remote.require('menu') ; var menu =
Menu.buildFromTemplate([{
contextmenu event window.addEventListener('contextmenu', function (e) {
tray
menubar 32
global-shortcut
auto-updater
Development Tips
Augmentation Add-on • Native Node Module • node-ffi • PPAPI
(Flash) 36
-webkit-user- drag: none;
window.process
electron- packager
asar
Pros • Latest nodejs and Chrome integration • Expose many
browser features • Actively Developing • Update with Upstream Quickly • Great Community Support 41
Cons • binary size is big⋯ • limited native system
features (still improving) • lack some browser features (eg. workers) but you have nodejs & npm! 42
Who uses Electron?
Kitematic
None
Slack
Caprine
nodeshot
Nightmare
Kaku
Mojibar
Plasmon
Plasmon • http://pcman.ptt.cc/ • Powered by pcman.js • currently focus
in Mac OSX • Welcome contribution 53
more on Awesome Electron
Thanks! @kidwm 55