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
Build Cross Platform Desktop Application with E...
Search
WM
October 04, 2015
Technology
4
860
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
270
Metaprogramming in ES2015
kidwm
3
910
Other Decks in Technology
See All in Technology
制約理論(ToC)入門
recruitengineers
PRO
9
3.7k
ここ一年のCCoEとしてのAWSコスト最適化を振り返る / CCoE AWS Cost Optimization devio2025
masahirokawahara
1
1.3k
ヒューリスティック評価を用いたゲームQA実践事例
gree_tech
PRO
0
450
ヘブンバーンズレッドのレンダリングパイプライン刷新
gree_tech
PRO
0
470
MCPで変わる Amebaデザインシステム「Spindle」の開発
spindle
PRO
3
2.5k
Flutterでキャッチしないエラーはどこに行く
taiju59
0
210
コスト削減の基本の「キ」~ コスト消費3大リソースへの対策 ~
smt7174
2
330
Language Update: Java
skrb
2
230
AIエージェントの活用に重要な「MCP (Model Context Protocol)」とは何か
masayamoriofficial
0
250
モダンフロントエンド 開発研修
recruitengineers
PRO
10
6.3k
ガチな登山用デバイスからこんにちは
halka
1
210
ZOZOマッチのアーキテクチャと技術構成
zozotech
PRO
3
1.2k
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Raft: Consensus for Rubyists
vanstee
140
7.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
570
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Typedesign – Prime Four
hannesfritz
42
2.8k
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