Learn Web Frontend with Electron

Slide at #nodefest

Transcript

1. ΢Σϒॳ৺ऀ͕ Electron Ͱϑ ϩϯτΤϯυೖ໳ͨ͠࿩ ɹɹɹ౦ژNodeֶԂࡇ 2015 
2. @Linda_pp @rhysd 
3. $
   ͱ
   --7.
   ͰԶݴޠίϯύΠϥ
   ʢ%BDITʣ 4IJCB 5SFOEZ 5JMFDUSPO • ͦͷଞ • Vim ϓϥάΠϯʢclever-f.vim, committia.vim, …) • Crystal Languageʢຊମ, Crisp, crdoc, vim-crystalʣ 
4. $
   ͱ
   --7.
   ͰԶݴޠίϯύΠϥ
   ʢ%BDITʣ 4IJCB 5SFOEZ 5JMFDUSPO &MFDUSPO
   ͰσεΫτοϓΞϓϦʂ • ͦͷଞ • Vim ϓϥάΠϯʢclever-f.vim, committia.vim, …) • Crystal Languageʢຊମ, Crisp, crdoc, vim-crystalʣ 
5. ͓͠ͳ͕͖ • Electron ͱ͸ • Electron Ͱ ϑϩϯτΤϯυ ೖ໳ • Electron ։ൃ Tips 
6. Electron ͱ͸ • Electron ͱ͸ • Electron ΞϓϦͷΞʔΩςΫνϟ • ΞϓϦྫ 
7. Electron ͱ͸ • ΫϩεϓϥοτϑΥʔϜͳσεΫτοϓΞϓ ϦϑϨʔϜϫʔΫʢOS X, Windows, Linuxʣ • Web ͷٕज़ͰσεΫτοϓΞϓϦ͕ͭ͘ΕΔ ʢɹɹChromium + ɹɹʣ • GitHub ʢ@zcbenzʣ੡ɼAtom Editor ͷͨΊ ʹͭ͘ΒΕͨ 
8. http://electron.atom.io/ 
9. 
   
   
   
   
   
   
   
   
   
   $ISPNJVN .BJO
   1SPDFTT ϝΠϯϓϩηεΞϓϦ 3FOEFSFS
   1SPDFTT ΢ΣϒΞϓϦ *1$ TQBXO 
10. Main Process • ϓϩάϥϜͷΤϯτϦϙΠϯτͰ Node.js Ξϓ Ϧ • ϒϥ΢β΢Οϯυ΢ͷ؅ཧ • ΢Οϯυ΢Λ্ཱͪ͛ͯRenderer ϓϩηεΛ ىಈ͢Δ • ։͍ͨ΢Οϯυ΢Ͱ html ϑΝΠϧΛϩʔυ  
11. Renderer Process • Main ϓϩηε͕ϩʔυͨ͠ html ϑΝΠϧ͕ ΤϯτϦϙΠϯτ ʢChrome ͷλϒʣ • ҰൠతͳγϯάϧϖʔδΞϓϦέʔγϣϯͱ ࣮ͯ͠૷ • αϯυϘοΫε֎Ͱ࣮ߦ͞ΕΔ 
12. σεΫτοϓΞϓϦ޲͚ػೳ • Windows Installer • Auto Updater for Windows and OS X (Squirrel) • Desktop Integration • Dock (OS X) • αϜωΠϧπʔϧόʔ (Windows) • ௨஌ʢOS XɼLinuxʣ • Mac AppStore ޲͚Ϗϧυ 
13. ࠷খͷΞϓϦέʔγϣϯ 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 
14. ࠷খͷΞϓϦέʔγϣϯ 
    OPEF@NPEVMFTCJOFMFDUSPO
     
15. جຊతͳ։ൃπʔϧ • electron-compile • JS, CSS ΛΞϓϦىಈ࣌ʹ on the fly ͰίϯύΠϧ • electron-packager • ֤ϓϥοτϑΥʔϜ޲͚ʹҰൃͰ഑෍ύοέʔδ࡞੒ • electron-rebuild • ໘౗ͳ native ύοέʔδͷϏϧυΛࣗಈԽ • electron-mocha • mocha Ͱॻ͍ͨςετΛ Electron ্ʢϝΠϯ or ϨϯμϥʣͰ࣮ߦ 
16. αϯϓϧΞϓϦɿCurve-app IUUQTHJUIVCDPNCFOPHMFDVSWFBQQ • GitHub ͷதͷਓ੡ ͷαϯϓϧΞϓϦ • جຊతͳ Electron ։ൃπʔϧͷ࢖͍ ํ͕෼͔Δ 
17. Ϧιʔε • 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 
18. IUUQLPCJUPRJJUBDPNXJO Electron ΞϓϦྫ1 Kobito for Windows 
19. IUUQTOZMBTDPN/ Electron ΞϓϦྫ2 Nylas N1 
20. IUUQTXXXHJUCPPLDPNFEJUPS Electron ΞϓϦྫ3 GitBook Editor 
21. Electron Ͱ ϑϩϯτΤϯυೖ໳ • Electron ͷྑ͞ • ࣗ෼ͷ৔߹ • ϑϩϯτΤϯυΛษڧ͠ͳ͕Β࡞ͬ ͨΞϓϦ 
22. Electron ͷྑ͞ • ๲େͳ web ͷࢿ࢈͕࢖͑Δ • Node.js ͷࢿ࢈͕࢖͑Δ • ΢ΣϒαʔϏε޲͚ʹ࡞੒ͨ͠ίϯϙʔωϯτ͕ͦͷ·· ࢖͑ΔʢReact ίϯϙʔωϯτͳͲʣ • Chromium ͚ͩߟ͍͑ͯΕ͹ྑ͍ʢES2015, HTML5ɼCSS3 ࢖͍์୊ʣ • ࡞Γ࢝Ί͔ͯΒಈ͔ͤΔΑ͏ʹͳΔ·Ͱ͕͘͢͝ૣ͍ 
23. ࣗ෼ͷ৔߹ ࢓ࣄͰʮWindows Ͱಈ͘ GUI ݕূπʔϧʯ ͕ඞཁʹͳΔ → Javaʁ Qtʁ ͲͪΒ΋͋·Γ֮͑ͯͳ͍… → Ͳ͏ͤͳΒ web ΋ֶ΂Δ Electron ࢖ͬͯ ΈΔ͔ʂ 
24. web ͷ஌͕ࣝແ͍ͷΛߟྀʹ ೖΕͯ΋αΫοͱͰ͖ͨ ࠓ·Ͱ΄͍͠ͱࢥ͍ͭͭࠊ͕ॏ ͔ͬͨπʔϧ΋ͬ͞ͱͰ͖Δͷ Ͱ͸…ʁ 
25. ͭͬͯ͘Έͨ • ShibaɿϚʔΫμ΢ϯϓϨϏϡʔΞϓϦ • TrendyɿGitHub τϨϯυϦϙδτϦΫϥΠΞ ϯτ • TilectronɿλΠϧܕ΢Οϯυ΢ϒϥ΢β • ࡞Γத 
26. Shiba IUUQTHJUIVCDPNSIZTE4IJCB 
27. Shiba • จॻϏϡϫʔʢϑΝΠϧอଘ࣌ʹࣗಈߋ৽ʣ • ɹɹPolymer + ɹɹTypeScript • ͪΐ͏Ͳ Polymer 1.0 ͕ग़ͨλΠϛϯάͩͬ ͨ • ϓϥάΠϯͱͯ͠ WebComponent Λ௥Ճ͢ Δ͜ͱͰରԠจॻΛ௥ՃͰ͖ΔΑ͏ʹ͍ͨ͠ IUUQTHJUIVCDPNSIZTE4IJCB 
28. Trendy IUUQTSIZTEHJUIVCJP5SFOEZ 
29. Trendy • GitHub ͷ Trending ϖʔδΛ crawling ͯ͠৽نϦϙ δτϦ͕͋Ε͹௨஌͢Δ • ϝΠϯϓϩηεଆͰ crawling ͯ͠Ϩϯμϥଆʹ௨஌ • ϝχϡʔόʔΞϓϦ • React + Flux + ɹ Primer +ɹɹTypeScript • Flux ָ͍͠ IUUQTSIZTEHJUIVCJP5SFOEZ 
30. Tilectron IUUQTHJUIVCDPNSIZTE5JMFDUSPO 
31. Tilectron • ޿͍σΟεϓϨΠ޲͚ͷ΢Οϯυ΢෼ׂՄೳͳϒϥ΢ βɽ΢Οϯυ΢͕ڱ͘ͳͬͨΒϞόΠϧϖʔδʹ fallbackʢ࡞Γதʣ • ɹ React + Redux + ES2015 + Dexie.js • ϒϥ΢βͷίΞ෦෼͸ Electron Λͦͷ··࢖͑Δ <webview/> • UI ͱΩʔϚοϐϯά෦෼Λ͕Μ͹Δ IUUQTHJUIVCDPNSIZTE5JMFDUSPO 
32. Electron ։ൃ Tips • ΩʔϘʔυγϣʔτΧοτ • ΞϓϦ config • Electron ΞϓϦͷςετ • npm ύοέʔδͱͯ͠΋഑෍͢Δ • ωΠςΟϒΞϓϦʹ͍ۙσβΠϯ • …ͦͷଞʢ͕࣌ؒ͋Ε͹ʣ 
33. ΩʔϘʔυγϣʔτΧοτ • HTML KeyboardEvent • https://github.com/ccampbell/mousetrap • https://github.com/atom/atom-keymap • Menu ͷ item ͷγϣʔτΧοτ • global-shortcut Ϟδϡʔϧ • ϗοτΩʔͳͲ 
34. ΞϓϦͷ config JSON Schema Ͱઃఆ߲໨Λఆٛͯ͠ json- editor Ͱઃఆ UI Λੜ੒ IUUQTHJUIVCDPNKEPSOKTPOFEJUPS 
35. ΞϓϦͷ config IUUQTHJUIVCDPNKEPSOKTPOFEJUPS 
36. Electron ΞϓϦͷςετ • Electron ඇґଘ → Ұൠతͳ node ΞϓϦͱಉ͡ • Ϩϯμϥϓϩηε or ϝΠϯϓϩηεͷΈͷ୯ମςετ → electron-mocha • Ϩϯμϥϓϩηε + ϝΠϯϓϩηε • → WebDriver.js + Selenium Ͱ E2E ςετ • http://electron.atom.io/docs/v0.34.0/tutorial/using-selenium-and- webdriver/ • → ςετ࣮ߦ༻ͷখ͍͞ Electron ΞϓϦΛࣗલͰͭ͘Δ 
37. Electron ΞϓϦͷςετ Electron ͸ϔουϨεͰ࣮ߦͰ͖ͳ͍ͷͰɼ Travis ΍ Docker ্Ͱ࣮ߦ͢Δ࣌͸Ծ૝Ϟχ λΛ࢖͏ 1 before_script: 2 - "export DISPLAY=:99.0" 3 - "sh -e /etc/init.d/xvfb start" 
38. npm ύοέʔδͰ΋ఏڙ͢Δ • ύοέʔδͱͯ͠΋഑෍ͭͭ͠ɼίϚϯυҰൃͰೖ Δ npm ύοέʔδͱͯ͠΋഑෍͢Δ • electron ͷόΠφϦΛෳ਺ΞϓϦͰڞ༗͢Δ • electron-prebuilt Λ͋͑ͯґଘؔ܎ʹೖΕͳ͍ ʢnpm2ʣ • npm3 
39. ωΠςΟϒΞϓϦʹ͍ۙ σβΠϯ • PhotonʢOS X ෩ʣ  IUUQQIPUPOLJUDPN
40. ωΠςΟϒΞϓϦʹ͍ۙ σβΠϯ • react-desktop • ʢϓϥοτϑΥʔϜωΠςΟϒͳσβΠϯʣ  IUUQQIPUPOLJUDPN
41. γϯάϧΠϯελϯεΞϓϦ 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~ʣ 
42. ϝχϡʔόʔΞϓϦ MojibarʢֆจࣈೖྗʣɹgitifyʢGitHub ௨஌ʣ IUUQTHJUIVCDPNNVBONPKJCBS IUUQTHJUIVCDPNFLPOTUBOUJOJEJTHJUJGZ 
43. ϝχϡʔόʔΞϓϦ Electron ͷ΢Οϯυ΢ΛϝχϡʔόʔΞϓϦ ͱͯ͠ wrap ͨ͠ϥΠϒϥϦ IUUQTHJUIVCDPNNBYPHEFONFOVCBS 
44. ipc ͷ஫ҙ఺ • ipc ͸େ͖͍σʔλΛ΍ΓͱΓ͢Δͱ஗͍ • େ͖͍σʔλΛ΍ΓͱΓ͢Δͷ͸ආ͚Δ • ϑΝΠϧܦ༝ • WebSocket • ϝΠϯϓϩηεΛ worker తʹ࢖͏ͷ͸΍Ίͯ WebWorker Λ࢖͏ • https://github.com/atom/electron/issues/1258 
45. ·ͱΊ • Electron ͰσεΫτοϓΞϓϦ͕؆୯ʹͭ͘ ΕΔ • Ϋϩεϒϥ΢βΛؾʹͤͣϑϩϯτΤϯυٕ ज़Λֶָ͘͠΂Δ • Electron ͰφΠεͳσεΫτοϓΞϓϦΛͭ ͘ΔͨΊͷ஌ݟΛڞ༗͍͖ͯ͠·͠ΐ͏ʂ