Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Learn Web Frontend with Electron
Linda_pp
November 07, 2015
Technology
28
12k
Learn Web Frontend with Electron
Slide at #nodefest
Linda_pp
November 07, 2015
Tweet
Share
More Decks by Linda_pp
See All by Linda_pp
rhysd
0
290
rhysd
1
2.3k
rhysd
5
1.1k
rhysd
3
1.5k
rhysd
0
690
rhysd
4
2.4k
rhysd
5
3.3k
rhysd
13
4.2k
rhysd
3
820
Other Decks in Technology
See All in Technology
saoritakita
0
340
satoryu
0
2.1k
tdys13
4
3.4k
kanaugust
PRO
0
160
sakon310
4
4.2k
pinboro
1
1.5k
kawaguti
0
110
toshinoritakai
1
200
clustervr
0
200
yuyaabo
0
260
ocise
0
130
hecateball
1
12k
Featured
See All Featured
lauravandoore
437
28k
ddemaree
274
31k
jeffersonlam
328
15k
zenorocha
297
39k
orderedlist
PRO
329
35k
trishagee
20
2k
lara
590
61k
geeforr
332
29k
yeseniaperezcruz
302
31k
philnash
8
490
mza
80
4.1k
schacon
145
6.6k
Transcript
Σϒॳ৺ऀ͕ Electron Ͱϑ ϩϯτΤϯυೖͨ͠ ɹɹɹ౦ژNodeֶԂࡇ 2015
@Linda_pp @rhysd
$ ͱ--7.ͰԶݴޠίϯύΠϥ ʢ%BDITʣ 4IJCB 5SFOEZ 5JMFDUSPO • ͦͷଞ • Vim
ϓϥάΠϯʢclever-f.vim, committia.vim, …) • Crystal Languageʢຊମ, Crisp, crdoc, vim-crystalʣ
$ ͱ--7.ͰԶݴޠίϯύΠϥ ʢ%BDITʣ 4IJCB 5SFOEZ 5JMFDUSPO &MFDUSPOͰσεΫτοϓΞϓϦʂ • ͦͷଞ •
Vim ϓϥάΠϯʢclever-f.vim, committia.vim, …) • Crystal Languageʢຊମ, Crisp, crdoc, vim-crystalʣ
͓͠ͳ͕͖ • Electron ͱ • Electron Ͱ ϑϩϯτΤϯυ ೖ •
Electron ։ൃ Tips
Electron ͱ • Electron ͱ • Electron ΞϓϦͷΞʔΩςΫνϟ • ΞϓϦྫ
Electron ͱ • ΫϩεϓϥοτϑΥʔϜͳσεΫτοϓΞϓ ϦϑϨʔϜϫʔΫʢOS X, Windows, Linuxʣ • Web
ͷٕज़ͰσεΫτοϓΞϓϦ͕ͭ͘ΕΔ ʢɹɹChromium + ɹɹʣ • GitHub ʢ@zcbenzʣɼAtom Editor ͷͨΊ ʹͭ͘ΒΕͨ
http://electron.atom.io/
$ISPNJVN .BJO1SPDFTT ϝΠϯϓϩηεΞϓϦ 3FOEFSFS1SPDFTT ΣϒΞϓϦ *1$ TQBXO
Main Process • ϓϩάϥϜͷΤϯτϦϙΠϯτͰ Node.js Ξϓ Ϧ • ϒϥβΟϯυͷཧ •
ΟϯυΛ্ཱͪ͛ͯRenderer ϓϩηεΛ ىಈ͢Δ • ։͍ͨΟϯυͰ html ϑΝΠϧΛϩʔυ
Renderer Process • Main ϓϩηε͕ϩʔυͨ͠ html ϑΝΠϧ͕ ΤϯτϦϙΠϯτ ʢChrome ͷλϒʣ
• ҰൠతͳγϯάϧϖʔδΞϓϦέʔγϣϯͱ ࣮ͯ͠ • αϯυϘοΫε֎Ͱ࣮ߦ͞ΕΔ
σεΫτοϓΞϓϦ͚ػೳ • Windows Installer • Auto Updater for Windows and
OS X (Squirrel) • Desktop Integration • Dock (OS X) • αϜωΠϧπʔϧόʔ (Windows) • ௨ʢOS XɼLinuxʣ • Mac AppStore ͚Ϗϧυ
࠷খͷΞϓϦέʔγϣϯ 1 { 2 name: MinimalApp, 3 version: 0.0.1, 4
main: main.js, 5 devDependencies: { 6 electron-prebuilt: ^0.34.2 7 } 8 } 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>Minimal App</title> 6 </head> 7 <body> 8 Hello, world!! 9 </body> 10 </html> 1 'use strict'; 2 const app = require('app'); 3 const BrowserWindow 4 = require('browser-window'); 5 const path = require('path'); 6 7 app.on('ready', () => { 8 let win = new BrowserWindow( 9 {width: 800, height: 600} 10 ); 11 win.on('closed', () => { 12 win = null; 13 app.quit(); 14 }); 15 const url = 'file://' 16 + path.join(__dirname, 'index.html'); 17 win.loadUrl(url); 18 }); NBJOKT QBDLBHFKTPO JOEFYIUNM
࠷খͷΞϓϦέʔγϣϯ OPEF@NPEVMFTCJOFMFDUSPO
جຊతͳ։ൃπʔϧ • electron-compile • JS, CSS ΛΞϓϦىಈ࣌ʹ on the fly
ͰίϯύΠϧ • electron-packager • ֤ϓϥοτϑΥʔϜ͚ʹҰൃͰύοέʔδ࡞ • electron-rebuild • ໘ͳ native ύοέʔδͷϏϧυΛࣗಈԽ • electron-mocha • mocha Ͱॻ͍ͨςετΛ Electron ্ʢϝΠϯ or ϨϯμϥʣͰ࣮ߦ
αϯϓϧΞϓϦɿCurve-app IUUQTHJUIVCDPNCFOPHMFDVSWFBQQ • GitHub ͷதͷਓ ͷαϯϓϧΞϓϦ • جຊతͳ Electron ։ൃπʔϧͷ͍
ํ͕͔Δ
Ϧιʔε • https://github.com/atom/electron/tree/master/docs • ެࣜυΩϡϝϯτɽඞಡɽ • https://discuss.atom.io/c/electron • Electron ͷ࣭͕Ͱ͖ΔϑΥʔϥϜɽ
• https://github.com/sindresorhus/awesome-electron • awesome Ϧετɽ • Slack • atomio ͷ #electronɼelectron-jp
IUUQLPCJUPRJJUBDPNXJO Electron ΞϓϦྫ1 Kobito for Windows
IUUQTOZMBTDPN/ Electron ΞϓϦྫ2 Nylas N1
IUUQTXXXHJUCPPLDPNFEJUPS Electron ΞϓϦྫ3 GitBook Editor
Electron Ͱ ϑϩϯτΤϯυೖ • Electron ͷྑ͞ • ࣗͷ߹ • ϑϩϯτΤϯυΛษڧ͠ͳ͕Β࡞ͬ
ͨΞϓϦ
Electron ͷྑ͞ • େͳ web ͷࢿ࢈͕͑Δ • Node.js ͷࢿ࢈͕͑Δ •
ΣϒαʔϏε͚ʹ࡞ͨ͠ίϯϙʔωϯτ͕ͦͷ·· ͑ΔʢReact ίϯϙʔωϯτͳͲʣ • Chromium ͚ͩߟ͍͑ͯΕྑ͍ʢES2015, HTML5ɼCSS3 ͍์ʣ • ࡞Γ࢝Ί͔ͯΒಈ͔ͤΔΑ͏ʹͳΔ·Ͱ͕͘͢͝ૣ͍
ࣗͷ߹ ࣄͰʮWindows Ͱಈ͘ GUI ݕূπʔϧʯ ͕ඞཁʹͳΔ → Javaʁ Qtʁ ͲͪΒ͋·Γ֮͑ͯͳ͍…
→ Ͳ͏ͤͳΒ web ֶΔ Electron ͬͯ ΈΔ͔ʂ
web ͷ͕ࣝແ͍ͷΛߟྀʹ ೖΕͯαΫοͱͰ͖ͨ ࠓ·Ͱ΄͍͠ͱࢥ͍ͭͭࠊ͕ॏ ͔ͬͨπʔϧͬ͞ͱͰ͖Δͷ Ͱ…ʁ
ͭͬͯ͘Έͨ • ShibaɿϚʔΫμϯϓϨϏϡʔΞϓϦ • TrendyɿGitHub τϨϯυϦϙδτϦΫϥΠΞ ϯτ • TilectronɿλΠϧܕΟϯυϒϥβ •
࡞Γத
Shiba IUUQTHJUIVCDPNSIZTE4IJCB
Shiba • จॻϏϡϫʔʢϑΝΠϧอଘ࣌ʹࣗಈߋ৽ʣ • ɹɹPolymer + ɹɹTypeScript • ͪΐ͏Ͳ Polymer
1.0 ͕ग़ͨλΠϛϯάͩͬ ͨ • ϓϥάΠϯͱͯ͠ WebComponent ΛՃ͢ Δ͜ͱͰରԠจॻΛՃͰ͖ΔΑ͏ʹ͍ͨ͠ IUUQTHJUIVCDPNSIZTE4IJCB
Trendy IUUQTSIZTEHJUIVCJP5SFOEZ
Trendy • GitHub ͷ Trending ϖʔδΛ crawling ͯ͠৽نϦϙ δτϦ͕͋Ε௨͢Δ •
ϝΠϯϓϩηεଆͰ crawling ͯ͠Ϩϯμϥଆʹ௨ • ϝχϡʔόʔΞϓϦ • React + Flux + ɹ Primer +ɹɹTypeScript • Flux ָ͍͠ IUUQTSIZTEHJUIVCJP5SFOEZ
Tilectron IUUQTHJUIVCDPNSIZTE5JMFDUSPO
Tilectron • ͍σΟεϓϨΠ͚ͷΟϯυׂՄೳͳϒϥ βɽΟϯυ͕ڱ͘ͳͬͨΒϞόΠϧϖʔδʹ fallbackʢ࡞Γதʣ • ɹ React + Redux
+ ES2015 + Dexie.js • ϒϥβͷίΞ෦ Electron Λͦͷ··͑Δ <webview/> • UI ͱΩʔϚοϐϯά෦Λ͕ΜΔ IUUQTHJUIVCDPNSIZTE5JMFDUSPO
Electron ։ൃ Tips • ΩʔϘʔυγϣʔτΧοτ • ΞϓϦ config • Electron
ΞϓϦͷςετ • npm ύοέʔδͱͯ͢͠Δ • ωΠςΟϒΞϓϦʹ͍ۙσβΠϯ • …ͦͷଞʢ͕࣌ؒ͋Εʣ
ΩʔϘʔυγϣʔτΧοτ • HTML KeyboardEvent • https://github.com/ccampbell/mousetrap • https://github.com/atom/atom-keymap • Menu
ͷ item ͷγϣʔτΧοτ • global-shortcut Ϟδϡʔϧ • ϗοτΩʔͳͲ
ΞϓϦͷ config JSON Schema Ͱઃఆ߲Λఆٛͯ͠ json- editor Ͱઃఆ UI Λੜ
IUUQTHJUIVCDPNKEPSOKTPOFEJUPS
ΞϓϦͷ config IUUQTHJUIVCDPNKEPSOKTPOFEJUPS
Electron ΞϓϦͷςετ • Electron ඇґଘ → Ұൠతͳ node ΞϓϦͱಉ͡ •
Ϩϯμϥϓϩηε or ϝΠϯϓϩηεͷΈͷ୯ମςετ → electron-mocha • Ϩϯμϥϓϩηε + ϝΠϯϓϩηε • → WebDriver.js + Selenium Ͱ E2E ςετ • http://electron.atom.io/docs/v0.34.0/tutorial/using-selenium-and- webdriver/ • → ςετ࣮ߦ༻ͷখ͍͞ Electron ΞϓϦΛࣗલͰͭ͘Δ
Electron ΞϓϦͷςετ Electron ϔουϨεͰ࣮ߦͰ͖ͳ͍ͷͰɼ Travis Docker ্Ͱ࣮ߦ͢Δ࣌ԾϞχ λΛ͏ 1
before_script: 2 - "export DISPLAY=:99.0" 3 - "sh -e /etc/init.d/xvfb start"
npm ύοέʔδͰఏڙ͢Δ • ύοέʔδͱͯͭͭ͠͠ɼίϚϯυҰൃͰೖ Δ npm ύοέʔδͱͯ͢͠Δ • electron ͷόΠφϦΛෳΞϓϦͰڞ༗͢Δ
• electron-prebuilt Λ͋͑ͯґଘؔʹೖΕͳ͍ ʢnpm2ʣ • npm3
ωΠςΟϒΞϓϦʹ͍ۙ σβΠϯ • PhotonʢOS X ෩ʣ IUUQQIPUPOLJUDPN
ωΠςΟϒΞϓϦʹ͍ۙ σβΠϯ • react-desktop • ʢϓϥοτϑΥʔϜωΠςΟϒͳσβΠϯʣ IUUQQIPUPOLJUDPN
γϯάϧΠϯελϯεΞϓϦ 1 var myWindow = null; 2 3 var shouldQuit
= app.makeSingleInstance(function(cmdline, workdir) { 4 // Someone tried to run a second instance, we should focus our window 5 if (myWindow) { 6 if (myWindow.isMinimized()) myWindow.restore(); 7 myWindow.focus(); 8 } 9 return true; 10 }); 11 12 if (shouldQuit) { 13 app.quit(); 14 return; 15 } 16 17 // Create myWindow, load the rest of the app, etc... 18 app.on('ready', function() { /*...*/ }); ಉ͡ΞϓϦΛෳىಈ͠ͳ͍Α͏ʹ͢Δʢv0.34.1~ʣ
ϝχϡʔόʔΞϓϦ MojibarʢֆจࣈೖྗʣɹgitifyʢGitHub ௨ʣ IUUQTHJUIVCDPNNVBONPKJCBS IUUQTHJUIVCDPNFLPOTUBOUJOJEJTHJUJGZ
ϝχϡʔόʔΞϓϦ Electron ͷΟϯυΛϝχϡʔόʔΞϓϦ ͱͯ͠ wrap ͨ͠ϥΠϒϥϦ IUUQTHJUIVCDPNNBYPHEFONFOVCBS
ipc ͷҙ • ipc େ͖͍σʔλΛΓͱΓ͢Δͱ͍ • େ͖͍σʔλΛΓͱΓ͢Δͷආ͚Δ • ϑΝΠϧܦ༝ •
WebSocket • ϝΠϯϓϩηεΛ worker తʹ͏ͷΊͯ WebWorker Λ͏ • https://github.com/atom/electron/issues/1258
·ͱΊ • Electron ͰσεΫτοϓΞϓϦ͕؆୯ʹͭ͘ ΕΔ • ΫϩεϒϥβΛؾʹͤͣϑϩϯτΤϯυٕ ज़Λֶָ͘͠Δ • Electron
ͰφΠεͳσεΫτοϓΞϓϦΛͭ ͘ΔͨΊͷݟΛڞ༗͍͖ͯ͠·͠ΐ͏ʂ