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

SlackはどうやってBrowserViewに乗り換えたのか / How Slack move...

tipo159
December 21, 2017

SlackはどうやってBrowserViewに乗り換えたのか / How Slack move from webview to BrowserView

Slackは、デスクトップ 3.0でどうやってElectronのwebviewからBrowserViewに乗り換えたのか
・webviewの問題点
・BrowserViewへの乗り換えで必要な変更
・electron-reduxを使ったRedux Stateの集約
・redux-observableを使った非同期Actionとユーザ操作に伴うActionの一元化
・TypeScriptによる速く正確なリファクタリング

tipo159

December 21, 2017
Tweet

More Decks by tipo159

Other Decks in Programming

Transcript

  1. 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
  2. BrowserView΁৐Γ׵͑ • BrowserViewͷಛ௃ • webViewΑΓChromeͷλϒʹ͍ۙಈ࡞ • DOMΤϨϝϯτΑΓωΠςΟϒwindowʹ͍ۙಈ࡞ • ElectronͰҡ࣋؅ཧ •

    มߋ͕ඞཁͳՕॴ • HTML΍CSSͰѻ͏͜ͱ͕Ͱ͖ͳ͍ͨΊɼτοϓϨϕϧwindowͱಉ༷ʹόο Ϋάϥ΢ϯυϓϩηεͰ࡞੒ • ϨΠϠʔ͸ϓϩάϥϜͰ؅ཧ • BrowserView͸βͷͨΊAPIมߋͷՄೳੑ͋Γ 4
  3. 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
  4. 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