首页 > 代码库 > 新浪微博iOS客户端架构与优化之路

新浪微博iOS客户端架构与优化之路

新浪微博iOS客户端架构与优化之路

技术分享

随着Facebook、Twitter、微博的崛起,向UGC、PGC、OGC,自媒体提供平台的内 容消费型App逐渐形成了独特的客户端架构模式。与电商和通讯工具类App不同,微博客户端具有多信息流、内容丰富多样、对数据量和延迟敏感等特点。微博的信息流承载着文字、网页、照片、视频、直播等多样的内容形式,所以复杂信息流对团队的开发效率、App的性能都带来了极大的挑战。

2016年6月24-25日,GMTC全球移动技术大会将在北京举行。本届大会,我们邀请到了新浪微博移动端资深研发专家邱晨老师。曾就职于Facebook、Storm8、Twitter的邱晨老师,将在大会上分享《微博复杂信息流的架构之道》,与大家分享如何应对复杂信息流所带来的挑战。借着这次大会的机会,我们采访了邱晨老师,了解新浪微博客户端的架构与优化经验。

嘉宾介绍

技术分享

邱晨,微博移动端资深研发专家

曾就职于Facebook, Storm8, Twitter,以全栈工程师的身份参与开发过多款App,对产品有着执着的热情。现在主要负责客户端流程优化、持续集成和一些重构的工作。

 


邱老师您好,您就职的公司包括Facebook、Twitter、微博,能否介绍一下它们的研发团队风格各有什么特点?

邱晨: Facebook是一家具有Hack精神的公司,工程师对产品有很多自己的看法。在Hack Week的时候,大家会把自己的idea实现出来进行评审,评审出好的idea会正式上线。“Move Fast & Break Things”这个FB的座右铭体现了它大胆尝试的工程师文化。

Twitter的风格是对技术追求极致,同时鼓励大胆的交流。大家会很乐于分享和学习新的技术,保持对技术的好奇心。Twitter有个项目叫Twitter University,每周都会推出课程,每个人都可以注册参加,同时也可以注册成为讲师,与大家分享。在Twitter,大家很注重代码质量和集成测试,尽量将Bug扼杀在开发阶段。

微博的研发团队对技术很有热情,经常会与国内外的技术专家进行技术交流,并且在不断地改进自身的架构和学习新的技术。通过自己的实践来找到最好且最适合的解决方案。我所在的移动研发中心,一直在不断地尝试引入新的技术,例如ComponentKit,React Native,Hybrid App等。工程师之间的交流方式也是简单直接,这点跟Twitter有些像,尽量减少沟通成本,快速解决问题。

能否简单介绍一下微博iOS端框架,由哪些部分组成?

邱晨:微博iOS端主要由微博核心源码、第三方团队SDK和开源SDK组成。在业务层,每条业务线都有自己的一个或者几个模块,这样保证了多条业务线的并行开发。在Code Base之外,我们还有Gerrit代码审查,AB Test系统,打包平台,联调环境,Jeckins自动化集成等系统来辅助整个App开发流程。

微博iOS端架构模式是怎样的,在Controller优化上做了哪些工作?

邱晨:微博iOS端的架构模式是以MVC和MVP为主,同时配合单例的模式。其中信息流的架构主要采用MVP思想,我们会建立一个中间层处理业务逻辑和同步逻辑,并且将Data Source和一些其他的Protocol在中间层实现。所有的基础功能都被分离出来,建立对应的Store和Manager单例,在这些单例中完成网络请求的发送、获取和解析,在Controller中只需指定回调block。这些基础功能和与之相应的Model将会组成像分享,未读,日志这样的基础类模块。同时,我们也会将一些业务逻辑移至Model的Category中,达到优化Controller的目的。

微博iOS的组件化是如何实现的?

邱晨:微博iOS端的组件主要分为三层,包括业务层、基础层和工具层,依赖关系自上而下。微博工程主要的模块有信息流,Page,消息箱,登录,分享,支付,多媒体,工具,网络,UIKit等,现在已有60多个模块,每一个模块为一个独立的Project,通过CocoaPods组装。其中一些组件是可以作为SDK提供给第三方使用的,包括网络,账户等。由于微博工程还有一些第三方团队在共同开发,同时也是为减少开发过程中编译所花的时间,微博将每个模块的源码编译成静态库,采用LibraryPods的方式支持部分源码编译。在组件化之前,微博是比较重度使用OpenURL进行模块跳转的,但是OpenURL让我们在梳理逻辑时造成困难。于是在组件化优化之后,我们已经减少OpenURL的使用。

微博的信息流非常复杂,那么微博是主要从哪些方面增强信息流的可扩展性呢?

邱晨:微博iOS端包含多条信息流,主Feed,热门推荐,周边微博等。每一条信息流的来源是不一样的,所以每一条信息流都会有与之对应的Stream实例,负责信息流的刷新,加载和存储。在Stream实例中,所有的信息都是以Section片段的形式存储起来的,每一个Section之间相互独立。

在可扩展性上,微博还是以部件化的思维进行优化的。每一条微博中可能包含着各种各样的内容,比如图片、文字、视频、PageCard,地点等。这些内容都会包含在一个Cell内呈现在信息流中,我们通过Model对应的Adapter进行这些信息的拼装组合。例如一条微博,可能包含多种信息,这时Adapter会来判断使用哪一种Cell,在Cell中展示怎样的信息,进行拼装,并且所有的布局规则是在这个Adapter中实现的。而Adapter的展现形式是在Controller里面进行配置的。同一条微博在热门微博信息流的展现形式和主Feed可能是不同的。每一个部件只要各司其职,就可以呈现出不同的展现效果。而此时Controller并不需要知道一条微博对应的是哪种Cell,一个推荐用户对应的哪种Cell。

当我们想在信息流中加入一种全新的内容时,我们要做的就会很简单。例如,当我们要在主Feed中加入用户推荐,只需要增加一个用户推荐Model对应的Adapter,并且在主Feed的Controller中进行注册。这种Adapter知道如何组合已有的用户Avatar和用户信息View。又或者我们需要在信息流中支持头条文章的内容。在建立文章Card View之后,只要在微博对应的Adapter中增加文章Card的布局就可以加入这种新的内容。

微博有很多长列表的典型场景,而长列表的渲染是客户端性能优化的一个常见课题,微博iOS对于复杂内容的长列表渲染如何优化?

邱晨:对于长列表渲染的优化,微博开发了一套自己的异步绘制框架,这套框架于2012年上线使用,可以说是国内第一个大规模应用异步绘制的iOS App。这套框架也使微博的滑动性能达到了业内领先,从低端设备只有30左右fps提升至所有设备接近60fps,目前fps平均值稳定在最理想的60,抖动很小。另外,还有很多其他的优化点,例如按需加载,在快速滑动时不加载图片。不阻塞主线程,尤其是IO的操作。以及iOS端特有的预先计算和缓存高度,也能优化滑动效果。其他诸如重用Cell等熟知的优化点就不再赘述了。我们也尝试过在iOS端使用Facebook开发的ComponentKit框架进行信息流的优化,但是由于效果并不十分显著,所以搁置了ComponentKit的使用。

iOS端动态化和热修复使用了哪些技术呢?

邱晨:热修复方面,微博使用的是现在比较流行的JSPatch,我们已经有JSPatch的发布平台用于管理脚本,由于JSPatch对性能还是有一些影响,每一个脚本都会经过仔细评估才会全量下发。在动态化方面,我们也有尝试React Native的使用,目前已有一些周边页面是基于RN框架开发完成的。

微博的iOS团队是怎样完成快速迭代的任务的?迭代周期如何?

邱晨:微博客户端团队采用的是敏捷开发模式,每两周为一个Sprint。在迭代周期开始前,各业务线根据技术排期分配下一个Sprint的任务。在迭代周期结束后,会有一周的测试期,进行三轮Full Case测试,此时只能进行重要Bug的修复。同时我们会通过AB Test系统,控制Feature的上下线和投放比例,保证客户端的稳定性。在Feature投放后,AB Test系统会收集相关业务的核心数据,并在控制台进行对比展示。通过分析不同实验组的数据反馈,进一步决定是否提高Feature的投放比例或者下线。

感谢您接受我们的采访。期待您在GMTC大会上的精彩分享。

 

技术分享

 

 

由InfoQ主办的GMTC全球移动技术大会将于6月24日在北京召开。来自BAT、携程、滴滴、微博、和社区的技术专家联袂分享,主题包括应用架构、性能优化、动态化、插件化、Swift、React Native、Weex等,为中高级移动开发工程师献上一场技术盛宴!目前8折优惠期间,多人团购更多优惠,欲购从速!

新浪微博iOS客户端架构与优化之路