Slack 桌面 3.0 迁移到 BrowserView

Slack 最近在 beta 通道中提供了 3.0 版本，该版本包含大量的性能提升和漏洞修复。大多数主要变更都是围绕从 Electron 组件 WebView 到 BrowserView 的迁移，BrowserView 是一个更新且更稳定的替代选择。Slack 工程师 Charlie Hess 发表了一篇博客，概述了这次迁移过程。

Slack 使用 Electron 开发，Electron 是一种框架，它使用像 NodeJS 和 Chromium 这样的网络技术来开发桌面应用程序。虽然这种技术有助于 Slack 保持跨平台性，但 Slack 并未像团队所希望的那样稳定。Hess 解释说，这主要是由于 WebView，一个用于渲染网页的 Electron 特性。

WebView 的主要问题之一是组件本身直接在 Chromium 中实现。这意味着 bug 修复最终要由 Chrome 团队完成，这会大大妨碍进度。为了解决这个问题，Electron 团队引入了 BrowserView，它是一个更像 Chrome 选项卡的组件，并且是操作系统窗口层次结构的一部分。团队正在迁移，这是 Slack 3.0 中的大部分工作：

我们的意思是，与 WebView 不同的是，你不能将 BrowserView 拖放到 DOM 中，并使用 CSS 操作它。与顶级窗口类似，这些视图只能从后台 Node 进程创建。因为我们的应用程序是作为一组 React 组件来编写的，该组件包装了 WebView，这些组件位于 DOM 内，所以这看起来像一次完全重写。

然而，Hess 解释说，通过做出良好的技术选择和设计决策，重写是极其轻松的，并且他估计，最终他们能够保留超过 70% 的原始代码。

该团队决定引入使用了 Redux 的 redux-electron 。本质上，Slack 由许多进程组成，每个进程都包含自己的 Redux 存储。redux-electron 使用 Electrons IPC（进程间通信）来共享进程之间的动作，该进程使用主进程作为单一数据源 (SSoT)，并将其它进程作为代理。

另一个选择是 TypeScript ，Hess 说它给这个项目带来了很多好处。在重构过程中，类型检查帮助我们避免了许多可能检测不到的错误：

你永远不用再考虑 flatMap 的输出（比如获得的是数组还是单个项）、reduce 的参数顺序、或一个看起来像 throttle 但以 D(debounce) 作为开头的运算符名称。在 VS Code 中使用自动补全功能时，编写 JavaScript 感觉就像在编写 C#。

最后，Hess 解释说，Slack 使用 redux-observable 和基于 RxJS 5 的中间件。Slack 本质上通过一个原语（一个接收和生成动作流的函数）将反应式编程引入 Redux。

在线阅读完整的博客，其中用代码示例做了更详细的介绍。此外，最新版本的Slack 可以在 beta 通道下载。

查看英文原文： Slack Desktop Migrated to BrowserView for 3.0