Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Learn Web Frontend with Electron

Dea1add99f4cf942792c0f185aa2f2fd?s=47 Linda_pp
November 07, 2015

Learn Web Frontend with Electron

Slide at #nodefest

Dea1add99f4cf942792c0f185aa2f2fd?s=128

Linda_pp

November 07, 2015
Tweet

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 .BJO1SPDFTT ϝΠϯϓϩηεΞϓϦ 3FOEFSFS1SPDFTT ΢ΣϒΞϓϦ *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

    ͰφΠεͳσεΫτοϓΞϓϦΛͭ ͘ΔͨΊͷ஌ݟΛڞ༗͍͖ͯ͠·͠ΐ͏ʂ