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 Electron
Search
WM
October 04, 2015
Technology
4
820
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
780
Other Decks in Technology
See All in Technology
Kernel MemoryでAzure OpenAI Serviceとお手軽データソース連携
mitsuzono
1
240
コンテナセキュリティの基本と脅威への対策
kyohmizu
3
760
サーバー間 GraphQL と webmock-graphql の話 / server-to-server graphql and webmock-graphql
qsona
2
180
AWSに詳しくない人でも始められるコスト最適化ガイド
yuhta28
0
190
反実仮想機械学習とは何か
usaito
PRO
11
4.3k
生産性向上チームの紹介
cybozuinsideout
PRO
1
870
エンジニアのキャリアをちょっと楽しくする3本の軸/Three Pillars to Make an Engineer's Career More Enjoyable
kwappa
0
2.7k
現代CSSフレームワークの内部実装とその仕組み
poteboy
8
3.6k
オーナーシップを持つ領域を明確にする
konifar
13
3.1k
私が trocco を推す理由
__allllllllez__
1
210
20240418_Google ColabにLLMが搭載されたようなのでPython x データ分析の勉強方法を考えてみる
doradora09
0
130
ServiceNow Knowledge 24の歩き方 EYストラテジー・アンド・コンサルティング
manarobot
0
190
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
The Mythical Team-Month
searls
216
42k
Faster Mobile Websites
deanohume
299
30k
Statistics for Hackers
jakevdp
789
220k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
[RailsConf 2023] Rails as a piece of cake
palkan
23
3.9k
Product Roadmaps are Hard
iamctodd
44
9.7k
Building a Scalable Design System with Sketch
lauravandoore
456
32k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Ruby is Unlike a Banana
tanoku
96
10k
Agile that works and the tools we love
rasmusluckow
325
20k
Navigating Team Friction
lara
178
13k
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