BT

Your opinion matters! あなたのご意見でInfoQが変わる!

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

| 作者: Andrew Morgan フォローする 0 人のフォロワー , 翻訳者 尾崎 義尚 フォローする 0 人のフォロワー 投稿日 2017年12月5日. 推定読書時間: 3 分 |

あなたのリクエストに応じて、ノイズを減らす機能を開発しました。大切な情報を見逃さないよう、お気に入りのトピックを選択して、メールとウェブで通知をもらいましょう。

原文(投稿日:2017/11/09)へのリンク

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

SlackはNodeJSChromiumといった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%以上のコードを残すことができた。

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

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

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

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

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

Rate this Article

Adoption Stage
Style

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

あなたの意見をお聞かせください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする
コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

ディスカッション

InfoQにログインし新機能を利用する


パスワードを忘れた方はこちらへ

Follow

お気に入りのトピックや著者をフォローする

業界やサイト内で一番重要な見出しを閲覧する

Like

より多いシグナル、より少ないノイズ

お気に入りのトピックと著者を選択して自分のフィードを作る

Notifications

最新情報をすぐ手に入れるようにしよう

通知設定をして、お気に入りコンテンツを見逃さないようにしよう!

BT