Youku client is a multi platform entertainment ecological complex [phone, pad, Ott, macpc]. In order to reduce the development cost of multi terminal product iteration and provide users with high-performance and consistent product experience, Youku technology team launched the breakthrough of cross platform dynamic template engine technology scheme at the end of 19.
As the main body of content distribution, the main feature of Youku client in the product presentation layer is the standardization and card of component design. Youku dynamic template engine takes components as our problem space model in problem definition, which not only avoids the complexity and quantities of technical solutions such as weex and react native, but also allows us to experiment and engineer quickly. Secondly, it also fundamentally separates the technical scheme from the old path of JS bridge, ensuring the high performance of the end side.
Componentization is a very common component UI form in the current mobile terminal. In the distribution scenario of Youku client, the component carries more information presentation of films and dramas.
Of course, components themselves can form more complex presentation patterns through combination or nesting, but from the perspective of atomization, as a single element, components have very strong structural characteristics. After abstraction, their logic composition is as follows:
1. Visual elements: controls, pictures, text, rich text, etc
2. Layout: position control information of visual elements and element drawing style information, such as coordinates, font, font size, etc
3. Data: meaningful information that should be truly expressed to users, such as the name, performers, cover posters, etc
4. Event: feedback and logical response to user interaction, such as click button collection, reservation, attention, etc
All atomized components can be abstracted into the above metadata. How to organically combine this set of data structures to form a template and render it according to the same behavior in multi terminal scenes is the content to be described in detail in this article.
What is a template
In the overview, we can abstract atomized components into four types of core information: element, layout, data and event. Among them, element information is organized through JSON data structure to describe the composition and hierarchical relationship of elements in components; In the layout information, the layout relationship is described by the flexbox box model conforming to the CSS3 specification, and the style information is described by the standardized CSS; The concept of XPath is introduced into the data model. Since the data finally presented in the component element often comes from the JSON data sent from the cloud, this part needs to solve how to dynamically bind the text attribute of the text in the component with the data of a certain level in the cloud JSON data, which is similar to root path. router. title; So far, by combining the above data structures as a whole and packaging, we form a physical file, which is called template. When any client completely realizes the parsing and rendering of this template file, it can complete the drawing of components, so as to realize cross end.
Core implementation scheme of Youku dynamic template engine
Youku dynamic template engine is self-developed by Youku technology team and provides a client-side technical scheme for cross-end standardized parsing, construction and rendering of the above template files. Since the premise of developing cool content and technology is extremely demanding, we have the highest requirements for the performance of all scenarios.
The dynamic template engine is codenamed gaiax in Youku and is divided into four layers according to the layered design concept. The basic dependency layer adheres to the principle of minimum dependency. It should be emphasized that in order to ensure the high performance of template layout calculation, we have introduced stretchkit high-performance layout calculation engine written by rust[https://github.com/vislyhq/st…], it has the characteristics of cross end, small package volume (170k), excellent computing performance and so on; The core rendering layer constitutes the rendering core of the template engine, which solves the core logic of template file parsing, virtual node tree construction, layout calculation, expression construction and parsing, etc; The template center and template service layer are more business oriented, combined with Youku business architecture to reuse the existing capabilities, avoid repeated wheel building, and provide standardized template rendering and access services to the upper business.
For the dynamic template engine, the input structured template file forms a complete bus link through file IO, data analysis, virtual node tree construction, layout calculation, expression operation and rendering tree construction to the real view tree.
Virtual node tree
Virtual node is the core module of linking template file, generating layout, binding style and finally rendering view. The whole link belongs to thread safety. It can operate and layout in the thread and return to the main thread when generating view, which can provide a reliable guarantee for subsequent pre rendering and performance optimization.
The following figure describes the index JSON through the correspondence between gaianode and view:
• node, as the basic virtual node, is responsible for generating client style attributes from style information in CSS and frame layout information generated from stretchkit from CSS layout information, and obtaining the corresponding relationship between parent node and child node array.
• the relationship between node and view is one-to-one. Node creates different view views by creating view, and assigns style and frame to view at one time by renderview, so as to reduce repeated assignment operations.
• on this basis, RootNode, viewnode, imagenode and textnode are derived according to the view type in the template.
• stretchkit library benefits
Stretch is selected for its excellent performance and high memory utilization, which are brought about by the features of rust language. Rust has amazing speed and high memory utilization. The performance of standard rust is comparable to that of standard C + +, and the efficiency is even higher than that of C + +. Because there is no runtime and garbage collection, it can be competent for scenarios with particularly high performance requirements.
• ast level minimalism
Ast, the virtual node tree, is a logical tree constructed according to the template file. The rationality of its hierarchical structure is completely subject to the template creator’s familiarity with the flexbox layout. In order to improve the performance of the overall technical scheme, the dynamic template engine will actively carry out hierarchical optimization and leveling in the process of constructing the virtual node tree, so as to reduce unnecessary element redundancy and improve rendering performance.
• thread load reduction
Through the diff operation on the virtual node tree, the update processing is submitted only when the real data changes
Reduce the number of threads in the thread pool to avoid unnecessary resource overhead and snatching between concurrent threads
Asynchronize data traversal, JSON parsing and assignment, layout calculation and other processing to ensure that the main thread is not submitted unnecessarily
Horizontal comparison of technical schemes
|Technical scheme||DSL||Best practices||Glue layer||Rendering scheme||R & D team|
|Weex||Vue/Rax||Page dynamic||JSBridge||Native rendering||Alibaba hand Amoy technology team|
|ReactNative||React||Page dynamic / APP overall architecture scheme||JSBridge||Native rendering|
|MTFlexbox||XML||Component level access||nothing||Semi asynchronous rendering of native components||Meituan terminal business R & D team|
|Gaiax dynamic template engine||JSON||Component level access||nothing||Semi asynchronous rendering of native components||Youku application technology team|
|Low end machine||Middle end machine||High end machine||Low end machine||Middle end machine||High end machine|
Youku dynamic template engine business empowerment
At present, in the Youku 15 + business team, the dynamic template engine is used as the cross end efficiency improvement technical scheme; After a full year of business application since 2020, from the actual effect, the overall R & D efficiency of multi terminal component development can be improved by about 30%, and the human investment in single component R & D can be reduced from 0.5-1 person day to 0.25-0.5 person day.
Project open source
After the dynamic template engine is launched in Youku business scenario, it has a good performance in both online user experience and R & D performance measurement. From the perspective of the whole end-to-end open source community, there are still few cross-end dynamic solutions for component level. Therefore, Youku technology team decided to open source the solution in October 2021. On the one hand, whether it is to discover issues or contribute code, it hopes to realize continuous iterative evolution of the technical solution through the strength of the community and build it into a more powerful product with community influence. In addition, it is also hoped that mature and stable technical capabilities can help more individual developers and small and medium-sized technical teams to solve the pain points in the daily development of clients and achieve win-win results.
Open source program
Summary and Prospect
Youku dynamic template engine has been widely used by businesses as the basic capability of distribution field in the overall business architecture of Youku. As the template DSL is a front-end technology stack category, it has a certain learning cost for the client students. Therefore, the main R & D direction of the technical team after the engine technical ability is stable is to provide users with the ability of visual and structured lowcodeide platform. At present, the capability has also been delivered to various technical teams. From the actual effect, it is very effective in reducing the cost of template construction. In the open source project of dynamic template engine, the IDE itself has also carried out synchronous output, and the majority of community developers can directly use the platform to build templates.
With the open source of technical solutions, the team will realize the concerns and abilities of developers as soon as possible according to the feedback of the community. At the same time, some new features incubated in the business scenario will also be launched to the community in real time, so as to benefit more developers.
At present, Youku technology team has launched many technical solutions in Alibaba open source community, and will launch more capabilities in the future. We also hope that the majority of technology lovers will pay attention to Alibaba open source community（https://github.com/alibaba）, pay attention to the development of Youku end-to-side technology.