Slackデスクトップは3.0でBrowserViewに移行した

Slackは先日、多くのパフォーマンス改善とバグ修正をしたバージョン3.0を開発し、ベータチャネルで提供した。その中核は、ElectronコンポーネントであるwebViewから、より新しく、安定したbrowserViewに移行した。SlackのエンジニアであるCharlie Hess氏この変更の概要をブログで公開した。

SlackはNodeJS やChromiumといったWeb技術でデスクトップアプリケーションを開発するために使われるElectronで書かれている。この技術の選択はSlackのクロスプラットフォームを維持するために役立ったが、チームが望んでいるほど安定はしていなかった。 Hess氏はElectronはWebページの描画がwebViewに依存していると説明している。

webViewの主な問題は、コンポーネント自体がChromiumに直接実装されていることであった。つまり、バグの修正はChromeチームがすることになり、進捗を妨げることになる。この問題を解決するためにElectronチームは、オペレーティングシステムのウィンドウ階層の一部であるChromeタブのように動作するコンポーネントであるbrowserViewを導入した。これがSlack 3.0への移行作業の大部分を占めていた:

—webViewとは違って—BrowserViewはDOMに入ってCSSを操作することはできません。トップレベルウィンドウと同じく、これらのビューはバックグラウンドのNodeプロセスからのみ作成できます。私たちのアプリはwebViewにラップされたReactコンポーネントで書かれており、—React—はDOM内に存在していたため、完全な書き換えが必要に思えました。

しかし、Hess氏いわく、優れた技術とデザインを選択したおかげで、書き換えは可能な限り痛みを伴うことなく、最終的に70%以上のコードを残すことができた。

チームによるひとつの決定はReduxでredux-electronを導入したことである。Slackは多くのプロセスで構成され、それぞれに独自のReduxストアを含んでいる。Redux-electronは、メインプロセスをシングルソースとして使用し、他をプロキシとして扱うために、プロセス間でのアクションの共有にElectrons IPC (inter-process communication：プロセス間通信) を使っている。

もうひとつの選択はHess氏がプロジェクトに大きなベネフィットをもたらしたと話しているTypeScriptである。大きなリファクターや、型チェックは、他の方法では検出できない大きなバグを避けるのに役立った:

flatMap(配列が返るか、ひとつのアイテムなのか)のアウトプット削減された引数、Dから始まる名前のthrottleに似たオペレーター（それはdebounce）、についてもう考える必要はありません。VS Codeのオートコンプリートと組み合わせることで、JavaScriptの記述はC#に近くなる。これは可能な限り素晴らしい方法です。

最後にHess氏はSlackは、Reduxにredux-observableとRxJS5ベースのミドルウェアを使っていると説明した。 これは本質的に、これは、アクションのストリームを生成する関数であるエピックプリミティブを通じて、Reduxにリアクティブプログラミングを提供する。

コードの例と詳細が書かれているブログの全文はオンラインで読むことができる。さらに最新バージョンのSlackはベータチャネルからダウンロードできる。