BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

Slack桌面3.0迁移到BrowserView

| 作者 Andrew Morgan 关注 0 他的粉丝 ,译者 张斌 关注 0 他的粉丝 发布于 2017年11月24日. 估计阅读时间: 3 分钟 | QCon北京2018全面起航:开启与Netflix、微软、ThoughtWorks等公司的技术创新之路!

亲爱的读者:我们最近添加了一些个人消息定制功能,您只需选择感兴趣的技术主题,即可获取重要资讯的邮件和网页通知

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

Slack使用Electron开发,Electron是一种框架,它使用像NodeJSChromium这样的网络技术来开发桌面应用程序。虽然这种技术有助于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%的原始代码。

该团队决定引入使用了Reduxredux-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

 

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT