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
850
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
900
Other Decks in Technology
See All in Technology
Recoil脱却の現状と挑戦
kirik
2
340
Railsの限界を超えろ!「家族アルバム みてね」の画像・動画の大規模アップロードを支えるアーキテクチャの変遷
ojima_h
3
390
「現場で活躍するAIエージェント」を実現するチームと開発プロセス
tkikuchi1002
6
1k
AI Ready API ─ AI時代に求められるAPI設計とは?/ AI-Ready API - Designing MCP and APIs in the AI Era
yokawasa
21
5.8k
The Madness of Multiple Gemini CLIs Developing Simultaneously with Jujutsu
gunta
1
2.5k
AI エンジニアの立場からみた、AI コーディング時代の開発の品質向上の取り組みと妄想
soh9834
6
260
Shadow DOM & Security - Exploring the boundary between light and shadow
masatokinugawa
0
660
QuickBooks®️ Customer®️ USA Contact Numbers: Complete 2025 Support Guide
qbsupportinfo
0
110
OpenTelemetry の Log を使いこなそう
biwashi
5
990
Building GoReleaser - from shell script to paid product
caarlos0
0
270
BEYOND THE RAG🚀 ~とりあえずRAG?を超えていけ! 本当に使えるAIエージェント&生成AIプロダクトを目指して~ / BEYOND-THE-RAG-Toward Practical-GenerativeAI-Products-AOAI-DevDay-2025
jnymyk
4
230
AIを使っていい感じにE2Eテストを書けるようになるまで / Trying to Write Good E2E Tests with AI
katawara
3
1.6k
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Code Reviewing Like a Champion
maltzj
524
40k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
Automating Front-end Workflow
addyosmani
1370
200k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
How GitHub (no longer) Works
holman
314
140k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
Bash Introduction
62gerente
613
210k
Scaling GitHub
holman
461
140k
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