INCHMAN

我们是如何构建Twitter Lite的

原文链接: blog.twitter.com

非常激动向大家介绍 Twitter Lite ,一个已经能在mobile.twitter.com上体验的渐进式网页应用。 Twitter Lite速度更快,应用了响应式设计,流量消耗更少,占用的存储空间也更小,并且在现代浏览器中支持消息推送和离线使用。网页正在逐渐成为一个承载按需使用、安装简易、渐进更新的轻量级应用的平台。近几年我们逐渐采用了新的、开放的网页端API,极大提升了网页应用的性能和用户体验。

架构纵观

Twitter Lite包括一个客户端的JavaScript应用和一个简单的Node.js服务器。服务器负责处理用户验证,绘制应用的初始状态,并渲染出应用的初始HTML结构。一旦浏览器完成初次加载,应用会直接从Twitter API请求数据。这种基本架构的简单性帮助我们提供了出色的大规模的可靠性、高效性服务——Twitter Lite比起服务端渲染的桌面网站运行起来消耗更少。

在客户端JavaScript应用的开发、构建和测试中,我们使用了非常多的开源框架,包括React, Redux, Normalizr, Globalize, Babel, Webpack, Jest, WebdriverIO, and Yarn。依托着已经成熟的开源软件,我们有了更多的时间去提升用户体验,提高迭代速度和解决一些Twitter中现存的问题,比如定制化和操控时间线和推中包含的数据。

我们书写现代化的JavaScript(ES2015及以后),然后由Babel编译,Webpack打包。API返回的数据在被送往不同的Redux模块之前,首先由Normalizr处理——我们能够删除重复数据并将数据转换成多种格式——之后则用于取出、存储、取回远程和本地数据。UI由数以百计的React组件构成,这些组件负责从小到渲染文本,大到管理虚拟列表、懒加载模块和延迟渲染的所有事务。Twitter Lite支持42种语言,我们用Globalize来定制化数字、日期和信息的显示。

为性能而生

每个月有数十亿的人访问mobile.twitter.com。我们想要让Twitter Lite在您的网络速度慢、低可用、受限制或费用昂贵时,成为您访问Twitter的最佳选择。我们通过PRPL pattern 做了一系列的性能升级,并使用了安卓平台上支持Service Worker, IndexedDB, Web App Install Banners, and Web Push Notifications等新功能的现代浏览器(比如Google Chrome),现在我们已经大大提升了访问速度和可靠性。

可靠性

Twitter Lite拥有网络自适应性。如果我们想达到每一个人,我们就必须达到使用低速、低可用网络的人。如果支持,我们会使用Service Worker来启用临时性的离线浏览和重复访问时的瞬间加载,不管网络状况如何。Service Worker会缓存HTML应用骨架和静态资源,还有一些流行的表情。当脚本或者取回数据失败时,我们会提供“重试”按钮,帮助用户重新获取数据。这些改进共同帮助我们提升了应用的可靠性,并且在重复访问时,大大提升加载速度、缩短启动时间。

渐进式加载

Twitter Lite在大多数使用3G的设备上五秒钟内便可以进入正常交互状态。这个世界上大部分人还使用着2G或者3G网络;初次体验的快速性是很重要的。在过去的三个月里,我们将平均加载时间降低了30%,并将进入交互状态之前的延迟降低了25%。为了达到这些,在服务器构建应用的初始状态时,应用会将初始的HTML响应流发送到浏览器端,并发送一系列的预加载指令,用来加载关键资源。应用了Webpack之后,应用的脚本会被打散到一个一个的小包之中,按需加载。这意味着初次加载仅需要请求在页面可见部分上使用的资源。(如果支持,Service Workder会预先缓存附加的资源和保证其它路由的瞬时加载。)这些改变支持我们渐进式地加载应用,因此人们可以更快地查看和创建推。

渲染

Twitter Lite打碎了昂贵的渲染工作。尽管我们已经优化了组件的渲染,推仍然是一个复杂的复合型组件,渲染超长列表依旧需要我们做额外的性能上的考虑。我们使用了虚拟列表组件,它只渲染当前视口可见的内容,使用requestAnimationFrame API渲染多帧上的条目,并保留不同页面的滚动状态。使用requestIdleCallback API,我们还可以推迟非关键渲染至空闲时段,这可以让应用的性能再上升一个台阶。

数据使用

Twitter Lite默认降低数据使用,措施包括请求小体积资源和依赖缓存。我们优化了您时间线上的图片显示,流量使用最高可降低40%。“省流量”模式会通过将推和消息中图片替换为小且模糊的预览图,大大减少流量使用。对图片使用HEAD请求可以帮助我们显示图片的体积大小,然后由用户决定是否加载。Twitter Lite只需要非常小的一片存储空间,因为它的体积只有原生应用的1%-3%。

设计系统和迭代速度

Twitter Lite的快速迭代性可以帮助我们维持高质量的用户体验。我们主要依赖弹性伸缩盒布局和其它一些固定数值的颜色、字体和尺寸。Twitter Lite建立在以组件为基础的自适应设计系统之上,适用于各种尺寸的设备。通过使用UI组件,我们建立了一套可以供设计与工程并用的语法,以此来展开快速迭代和组件复用的工作。我们的一些非常复杂的特性,比如内容混合的时间线,最短使用30行代码即可创建,其中包括配置和链接Redux模块与React组件。

展望

搭建一个这么大规模的快速的网页应用,并且让其持续保持这种状态,对来自Twitter不同团队的设计、产品、开发人员来讲都是一个很大的挑战。我们现在的进度相当不错,并且一直在通过使用HTTP/2、GraphQL和其它压缩格式试验如何将加载时间和流量消耗降至更低。在接下来的几个月里,我们会在可用性、安全性、设计、实用性和性能方面,在Twitter Lite中加入更多的改进。