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
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
170
Snowflake Intelligence × Document AIで“使いにくいデータ”を“使えるデータ”に
kevinrobot34
1
120
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
ganota
2
320
スクラムガイドに載っていないスクラムのはじめかた - チームでスクラムをはじめるときに知っておきたい勘所を集めてみました! - / How to start Scrum that is not written in the Scrum Guide 2nd
takaking22
1
170
Snowflake Intelligenceにはこうやって立ち向かう!クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
gappy50
0
280
プラットフォーム転換期におけるGitHub Copilot活用〜Coding agentがそれを加速するか〜 / Leveraging GitHub Copilot During Platform Transition Periods
aeonpeople
1
230
まずはマネコンでちゃちゃっと作ってから、それをCDKにしてみよか。
yamada_r
2
120
未経験者・初心者に贈る!40分でわかるAndroidアプリ開発の今と大事なポイント
operando
5
750
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
190
「その開発、認知負荷高すぎませんか?」Platform Engineeringで始める開発者体験カイゼン術
sansantech
PRO
2
590
LLM時代のパフォーマンスチューニング:MongoDB運用で試したコンテキスト活用の工夫
ishikawa_pro
0
170
20250912_RPALT_データを集める→とっ散らかる問題_Obsidian紹介
ratsbane666
0
100
Featured
See All Featured
Scaling GitHub
holman
463
140k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Six Lessons from altMBA
skipperchong
28
4k
Documentation Writing (for coders)
carmenintech
74
5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Docker and Python
trallard
46
3.6k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
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