Slack͸Ͳ͏΍ͬͯBrowserViewʹ৐Γ׵͔͑ͨ We Are JavaScripters! @14th 2017.12.21 tipo159

LT಺༰ • webviewͷ໰୊఺ͱBrowserView΁ͷ৐Γ׵͑ • ৐Γ׵͑࣌ʹमਖ਼ͨ͠໰୊఺ • ෳ਺Redux Storeؒͷಉظ • ඇಉظActionʹΑΔ෭࡞༻ • ϦϑΝΫλϦϯά • ·ͱΊ Growing Pains: Migrating Slack’s Desktop App to BrowserView https://slack.engineering/growing-pains-migrating- slacks-desktop-app-to-browserview-2759690d9c7b 2

webviewͷ໰୊఺ • ChromiumͰҡ࣋؅ཧΛߦ͍ͬͯΔͷͰɼElectron͔Βͷཁ ๬௨Γʹόάमਖ਼͕ߦΘΕͳ͍ • Chrome extensionsͰ͔͠࢖ΘΕ͍ͯͳ͍ͨΊɼόάमਖ਼ͷ༏ઌ ౓͕௿͍ • ͜Ε·ͰͷҰ൪ͻͲ͍όά͸ɼwebviewΛඇදࣔʹͨ͠ޙ࠶දࣔ ͯ͠΋ίϯςϯπ͕࠶ඳը͞Εͳ͔ͬͨ͜ͱ 3

BrowserView΁৐Γ׵͑ • BrowserViewͷಛ௃ • webViewΑΓChromeͷλϒʹ͍ۙಈ࡞ • DOMΤϨϝϯτΑΓωΠςΟϒwindowʹ͍ۙಈ࡞ • ElectronͰҡ࣋؅ཧ • มߋ͕ඞཁͳՕॴ • HTML΍CSSͰѻ͏͜ͱ͕Ͱ͖ͳ͍ͨΊɼτοϓϨϕϧwindowͱಉ༷ʹόο Ϋάϥ΢ϯυϓϩηεͰ࡞੒ • ϨΠϠʔ͸ϓϩάϥϜͰ؅ཧ • BrowserView͸βͷͨΊAPIมߋͷՄೳੑ͋Γ 4

BrowserViewͷίʔυྫ // In the main process. const {BrowserView, BrowserWindow} = require('electron') let win = new BrowserWindow({width: 800, height: 600}) win.on('closed', () => { win = null }) let view = new BrowserView({ webPreferences: { nodeIntegration: false } }) win.setBrowserView(view) view.setBounds({ x: 0, y: 0, width: 300, height: 300 }) view.webContents.loadURL('https://electronjs.org') 5

ෳ਺Redux Storeؒͷಉظ • ϫʔΫεϖʔεʹରԠ͢Δϓϩηε͕ෳ਺ଘࡏ͠ɼͦΕͧΕ ͷRedux StoreΛಉظ͢Δඞཁ͕͋ͬͨ • electron-reduxΛ࢖͍ϝΠϯϓϩηεͷRedux Stateʹू໿ 6

ඇಉظActionʹΑΔ෭࡞༻ • Redux͚ͩͰ͸ඇಉظActionͱͦΕʹΑΔ෭࡞༻Λ͏·͘ѻ ͑ͳ͍ʢSlackͷ۩ମతͳهड़ͳ͠ʣ • redux-observableΛ࢖͍ඇಉظActionͱϢʔβૢ࡞ʹ൐͏ ActionΛҰݩԽ • ActionͷετϦʔϜΛૢ࡞͢ΔepicΛهड़ • epic͸Ϧσϡʔε͞ΕͨstateͰ͸ͳ͘ɼActionͷετϦʔ ϜΛੜ੒ 7

redux-observableͷίʔυྫ import { BrowserWindow } from 'electron'; import { REHYDRATE } from 'redux-persist/constants'; import { getWorkspacesCount } from '../reducers/workspaces'; const signInWindowEpic = (action$, store) => { // Rehydrate is just a $10 word for "we loaded saved state from a file" // Since we're a redux-persist app, it's one of the first actions that occurs return action$.ofType(REHYDRATE) .filter(() => getWorkspacesCount(store) > 0) .map(() => createSignInWindow(store)) .do((browserWindow) => browserWindow.show()); }; function createSignInWindow(store) { const browserWindow = new BrowserWindow( /* ... you get the idea */ ); } 8

ϦϑΝΫλϦϯά • TypeScriptʹΑΔ଎͘ਖ਼֬ͳϦϑΝΫλϦϯά • JavaScriptͷlinterΑΓ༗ޮͳίʔυνΣοΫ • TypeScript͸ैདྷ͔Β࠾༻͍͕ͯͨ͠ɼϦϑΝΫλϦϯά ͰҖྗΛൃش • Ҿ਺΍໭Γ஋ͷܕ͕ObservableΛ࢖ͬͨίʔυهड़ͷॿ͚ ʹ 9

·ͱΊ • webview͔ΒBrowserView΁ͷ৐Γ׵͑ • electron-reduxΛ࢖͍ϝΠϯϓϩηεͷRedux Stateʹू໿ • redux-observableΛ࢖͍ඇಉظActionͱϢʔβૢ࡞ʹ൐͏ ActionΛҰݩԽ • TypeScriptʹΑΔ଎͘ਖ਼֬ͳϦϑΝΫλϦϯά 10