WOT Zhang Xingye: Practice of Weex technology in Meizu small applications

【51CTO.com original article】Seven years of hard work, a gorgeous transformation. Since 2012, 15 summits have been held for 6 consecutive years, bringing together a large number of technical experts, learning from a wide range of knowledge and making a breakthrough. The 2018 WOT Global Software and Operation Technology Summit has set sail, focusing on 12 core hotspots, bringing together 60 first-line experts from home and abroad to create a high-end technology feast!

At the "Front-end Engineering Practice" forum, Meizu senior engineer Zhang Xingye will give the audience a keynote speech titled "The Practice of Weex Technology in Meizu's Small Applications". Before the meeting, 51CTO reporters interviewed him and asked him to "spoiler" in advance. Let's "sneak peek" at the wonderful speech content!

【Lecturer Profile】

Zhang Xingye is mainly engaged in application technology support work, including Android basic technology research, the use and optimization of Web-related technologies in applications, etc. He is currently focusing on the application and optimization of dynamic technology on mobile terminals and the use of AI technology on mobile terminals.

Zhang Xingye said that the release of WeChat Mini Programs has brought new ideas to mobile front-end development. Meizu has been thinking about whether it can create a set of Mini Program solutions suitable for its own business and upgrade the existing dynamic solutions. It is based on this thinking and combined with the fact that many applications in the Flyme system focus on operation attributes that Meizu has implemented its own Mini Program solution based on Weex technology.

Why did Meizu choose to use Weex technology to develop small applications?

Zhang Xingye admitted that Meizu has been exploring dynamic solutions for applications, including webapp, Hybrid, json2view, etc. Before 2016, Meizu focused more on Hybrid and json2view, especially json2view, because system applications have high performance requirements and dynamic requirements. Some views send json from the server, and the client parses the json data to render UI or animation. For example, Meizu's ActionView (Activision system) uses the json2view solution.

In 2016, the Meizu development team noticed ReactNative and Weex. At that time, the team was familiar with Vuejs, so they preferred to use Weex. At the same time, through the comparison of basic components and performance between ReactNative and Weex, they found that there was no gap in basic components, and they could also be expanded by themselves. The performance was also comparable to ReactNative, so they finally chose Weex.

Zhang Xingye introduced to reporters that Weex is a dynamic mobile solution that Alibaba opened its source code to at the end of 2016. It can take into account both performance and dynamism, allowing mobile developers to write native-level performance experience through simple front-end syntax, and supports multi-terminal deployment such as iOS, Android, YunOS and Web. For mobile developers, Weex helps them solve the two major pain points of frequent version releases and multi-terminal R&D, and also solves the problems of poor front-end language performance and limited display effects.

Zhang Xingye said that the development process of Meizu mini-applications is the same as that of Weex. Meizu mini-applications use Weex as their rendering framework. On this basis, the team added many Meizu-specific interfaces and components, and wrote detailed usage documents for the interfaces and components they provided for internal use and communication.

Currently, Weex solutions are used in many small applications of Meizu, such as user feedback, international traffic, personal homepage, comment center, etc., which have covered more than two-thirds of Meizu users.

How to ensure the performance and stability of small applications?

A popular program must have high performance and high stability. So, how can we ensure the performance and stability of small applications? In this regard, Zhang Xingye believes that the high stability and high performance of the entire program are inseparable from the support of the front-end and back-end, including the optimization of the rendering layer.

In terms of stability and performance, Meizu mini-apps adopt the stability and performance standards of Meizu mobile terminals. The testing team will conduct special tests on each mini-app in terms of stability, CPU, memory, traffic, power, and security. At the same time, the development team uses the Weex solution to develop and deploy programs in a front-end manner, and finally render them into a native way on the mobile terminal, and optimize the network, rendering, cache, etc.

We know that in terms of application performance, the focus is on speed and smoothness, how to display it in front of users in the shortest time and have the smoothest perception. When a program is displayed to users, the main time is spent on network download and UI rendering. In terms of network, the Meizu development team used GSLB (Global Server Load Balance) and CDN support; in terms of UI rendering, on the basis of the original weex, adjustments were made to complex controls, especially the support for long lists. When using Listview, the long list had a memory full situation. After analysis, it was found that cells can be reused, but when the amount of data is large, the amount of DOM will be large, occupying a lot of memory. The data structure of DOM is much more complex than JSON data and requires more storage space. If the number of lists is controllable, this problem can be solved by optimizing cells. However, for the case where the number of items in the list is uncertain, optimizing cells cannot solve this problem. In the end, the development team chose to provide cell templates to allow the list to support as many items as possible.

In an interview with ***, Zhang Xingye suggested that during the development of mini-programs, the development team should be proficient in the relevant languages ​​for mini-program development, be familiar with development documents, have a front-end foundation, be familiar with VueJS, and read more development documents of Weex. Although Weex front-end development also uses the Vuejs framework, it is only a subset. Therefore, many components or attributes are not supported yet, and using previous front-end experience to achieve good results.

On May 18-19, the world's most noteworthy IT technology feast will be held at Beijing JW Marriott Hotel. The 2018 WOT Global Software and Operation Technology Summit will definitely be an important platform for you to discover new ideas, explore the latest ideas, and expand your network.

At present, all our tickets are on sale. Please note that the earlier you buy your tickets, the bigger the discount! Communicate with KOLs up close and present a different "hero feast"!

Click on the official website for details: wot..com

30% off pre-sale, grab your tickets as soon as possible.

[51CTO original article, please indicate the original author and source as 51CTO.com when reprinting on partner sites]