Sina Weibo iOS client architecture and optimization path

With the rise of Facebook, Twitter, and Weibo, content-consuming apps that provide a platform for UGC, PGC, OGC, and self-media have evolved into a unique client-side architecture model. Unlike e-commerce and communication tools apps, Weibo clients feature multiple streams, rich content, data volume, and latency sensitivity. The information flow of micro-blog carries the content form of text, webpage, photograph, video, live broadcast and so on, so the complex information flow brings great challenge to the team's development efficiency and the performance of the app.

June 2016 24-25th, the GMTC Global mobile Technology conference will be held in Beijing. This session, we invited Sina Weibo Mobile senior research and development experts 邱晨嬿 teacher. 邱晨嬿, who has worked for Facebook, STORM8, and Twitter, will share with the General Assembly the "architecture of the complex information flow of Weibo" to share with you the challenges of dealing with complex information flows. With the opportunity of this Conference, we interviewed 邱晨嬿 teacher about the architecture and optimization experience of Sina Weibo client.

Guest Introduction

邱晨嬿, senior research and development expert of Weibo mobile terminal

has worked for Facebook, STORM8, Twitter, as a full-stack engineer to participate in the development of a plethora of apps, the product has a persistent passion. It is now primarily responsible for client process optimization, continuous integration, and some refactoring efforts.

Hello, Miss Qiu, your company including Facebook, Twitter, Weibo, can you tell me about the characteristics of their research and development team style?

邱晨嬿: Facebook is a company with a hack spirit, and engineers have a lot of ideas about their products. At the time of Hack week, everyone will put their idea into the review, and the review will be formally launched. "Move Fast & Break Things" This FB motto embodies its bold attempt at the engineer culture.

Twitter's style is the ultimate in technology, while encouraging bold communication. People will be happy to share and learn new technologies and keep their curiosity about technology. Twitter has a program called Twitter University, which will be available every week, and everyone can sign up for it, and can also register as a lecturer and share it with everyone. On Twitter, people are focused on code quality and integration testing, as much as possible to nip bugs in the development phase.

Weibo's research and development team is passionate about technology, often with technical experts at home and abroad, and is constantly improving its architecture and learning new technologies. Find the best and most suitable solution through your own practice. My mobile research and development center has been constantly trying to introduce new technologies, such as the Componentkit,react Native,hybrid app. The communication between engineers is simple and straightforward, something like Twitter that minimizes communication costs and solves problems quickly.

Can you tell me a little bit about the micro-blogging iOS framework and what are the components?

邱晨嬿: Micro-blogging iOS is mainly composed of Weibo core source, third party Team SDK and open Source SDK. In the business layer, each line of business has its own one or several modules, which ensures the parallel development of multiple lines of business. In addition to code base, we also have a system to support the entire app development process, including Gerrit Codes Review, AB test systems, packaging platforms, jeckins environments, and automated integration systems.

What does the microblog iOS architecture model do with controller optimization?

邱晨嬿: The architecture mode of the microblog iOS is based on MVC and MVP, along with the singleton model. The information flow architecture mainly uses the MVP idea, we will establish a middle layer to process the business logic and the synchronization logic, and the data source and some other protocol in the middle layer implementation. All the basic functions are separated, the corresponding store and manager Singleton is created, the network request is sent, obtained and parsed in these singleton, and only the callback block is specified in the controller. These basic functions and the corresponding model will be composed of basic class modules like share, unread, and log. At the same time, we will move some business logic into the model category, to optimize the controller.

How is the component of Weibo iOS implemented?

邱晨嬿: The components of the microblog iOS are divided into three tiers, including the business layer, the base layer and the tool layer, and the dependencies are top-down. Weibo project main modules have information flow, Page, message box, login, sharing, payment, multimedia, tools, network, Uikit, etc., now has more than 60 modules, each module for a separate project, through Cocoapods assembly. Some of these components are available to third parties for use as SDKs, including networks, accounts, and so on. Since there are some third-party team in the micro-BO project to develop together, but also to reduce the time spent in the development process of compiling, the microblog will compile each module's source code into a static library, using Librarypods to support some source code compilation. Before the component, the microblog was relatively heavy using OpenURL for module jumps, but OpenURL made it difficult to comb the logic. So after the component optimization, we have reduced the use of OpenURL.

The information flow of Weibo is very complex, so what is the main aspect of Weibo that enhances the scalability of the information flow?

邱晨嬿 : Weibo iOS contains multiple streams, main feed, Hot recommendation, surrounding micro Bo and so on. The source of each stream is different, so each stream will have a stream instance corresponding to it, responsible for the refresh, loading and storage of the information flow. In a stream instance, all the information is stored as a section fragment, each of which is independent of each other.

Weibo has a lot of typical scenarios for long lists, and long list rendering is a common topic in client performance optimization, how does Weibo iOS optimize long list rendering for complex content?

邱晨嬿: For the optimization of long list rendering, Weibo developed a set of its own asynchronous drawing framework, which was launched in 2012 and is the first in the country to use the iOS app for large-scale asynchronous drawing applications. The framework has also led to the industry-leading slide performance, from low-end equipment only about 30 fps to all devices close to 60fps, the current FPS average stability in the ideal 60, jitter is very small. In addition, there are a number of other optimization points, such as on-demand loading, which do not load the picture when fast sliding. does not block the main thread, especially IO operations. And the pre-compute and cache heights that are unique to the iOS, as well as optimizing the sliding effect. Other well-known optimization points, such as reusing cells, are no longer mentioned. We also tried to optimize the flow of information using the COMPONENTKIT framework developed by Facebook on the iOS side, but the use of Componentkit was shelved because the effect was not very significant.

What technologies are used for dynamic and hot-fix iOS?

邱晨嬿: Hot repair, Weibo is now the most popular jspatch, we already have Jspatch release platform for management scripts, because Jspatch has some impact on performance, each script will be carefully evaluated to be issued in full volume. In the dynamic aspect, we also try to react the use of native, there are already some peripheral pages are based on the RN framework development completed.

How does the iOS team of Weibo complete the task of fast iteration? What is the iteration cycle?

邱晨嬿: The Weibo client team is using the Agile development model, which is a sprint every two weeks. Before the iteration cycle begins, each line of business is assigned a task for the next sprint based on the technical schedule. At the end of the iteration cycle, there will be a one-week test period, with a full-time case test, where only important bug fixes can be made. At the same time, we will control the feature and delivery ratio through the AB test system to ensure the stability of the client. After feature, the AB test system collects the core data from the relevant business and displays it in a comparison with the console. By analyzing the data feedback of different experimental groups, we further decide whether to increase the proportion of feature or the downline.

Thank you for receiving our interview. We look forward to your wonderful sharing at the GMTC conference.

Sina Weibo iOS client architecture and optimization path