Evolution and thinking of Taobao native R & D mode | DX R & D mode

DSC0000.jpg(646.42 KB, amount of downloads : 0)

Download the attachment

7  Hours before Upload

  
 
 

   
  
  
DX Full name DinamicX, At present, it is widely used in Taobao and even the whole Alibaba group Native Dynamic scheme , The core advantages are performance and stability . In the past few years, there have been other Taobao / The group's external articles cover DX, but DX I haven't made a complete introduction to the outside world , To the outside world, these two letters are rather mysterious . This series of articles 《DX R & D mode 》 We will pull down its mysterious veil , Look at the past two years  DX  What are you doing? . 
   
  
  
  This paper mainly expounds  DX  And the key construction items in the past two years , Like watching videos and PPT Classmate , Can be in 【 Alibaba mobile technology 】 Reply in official account 「DX」, Watch the author's share at the end of last year “ TaoBao Native The evolution of R & D model ”. 
   
  
  
 《DX R & D mode 》 The series is as follows , Welcome to your attention ： 
   
  
  
 
   
  
  
  this paper ：《 TaoBao Native The evolution and thinking of R & D mode 》 
   
  
  
  List containers & How the event chain helps the business to iterate quickly  | DX R & D mode  
   
  
  
  How to continuously improve performance ？DX  Detailed performance optimization strategy  
   
  
  
  from 0 To 1,IDE How to improve end-to-end R & D efficiency ？| DX R & D mode 
  
 
 

author ： Zhou Jie ( Chord searching )
DX The origin and development of

DSC0001.jpg(156.83 KB, amount of downloads : 0)

Download the attachment

7  Hours before Upload

DX It is hatched from the homepage to solve the problems of consistency and dynamics at both ends of the business , After several upgrades and iterations , Gradually completed the dynamic scheme from the home page —— Basic link dynamic scheme —— Group Co Construction Dynamic scheme —— Group mobile group standards Native Multi level jump of R & D mode . As more and more businesses and developers access 、 Usage scenarios are becoming more and more complex and diverse , The technical category is also from the end to the side SDK Extend to dynamic technology system , Until then Native R & D mode .
Technology selection of Taobao

DSC0002.jpg(149.82 KB, amount of downloads : 0)

Download the attachment

7  Hours before Upload

This is probably the most complicated thing on the planet right now App Taobao technology selection standard , We divide all the businesses of Taobao into three categories ： Core domain 、 Shopping guide domain and open domain . Different scenarios for performance experience 、 stability 、 Delivery efficiency has different demands , Nothing here “ Technical silver bullet ”, Only the best solution for the target scenario .
What are the challenges we have faced in the past two years
As the core domain standard technology selection DX, What are the challenges of the past few years ？
First, let's take a look at the big business background ：

  

• Business competition intensifies , The group upgraded from aircraft carrier strategy to App Matrix strategy , There are higher requirements for delivery volume and efficiency ;  
  
• With the live broadcast / Short video /AR/3D Development and popularization of Technology , The mobile terminal enters the immersive mode / Rich interactive experience ,Native The advantages of the technology stack are more obvious ;  
  
• Taobao's shopping efficiency is getting higher and higher , User access time / Frequency reduction , Most purchase decisions take place outside taowai , Taobao has gradually become an order / Price comparison tools , When the content field has mastered a large amount of inlet traffic and user duration , Start to close their own closed-loop e-commerce transactions , Once the drainage channel has become a direct competitor , Taobao will also face “ Water without source 、 A tree without roots ” Plight , So Amoy has been building its own content in recent years / Community , Let more consumer pre purchase decisions take place in Amoy .
  

These three business backgrounds have a profound impact on access DX Each business and potential new business , So in the past two years , Our work mainly focuses on R & D mode upgrading and experience upgrading .
First, let's talk about R & D mode upgrading , Originally, there were two main problems ：
1、DX Its own technical system is incomplete , stay 19 Years ago ,DX It can only be said to be a client-side dynamic solution , Contains an end side SDK And a component platform , But as more and more new services are accessed ,DX The bottleneck of incomplete technical system is becoming more and more obvious , A large number of new businesses need to repeatedly build end-to-side containers 、 Build platform and other infrastructure , Leading to high access costs 、 Low earnings , The containers and platforms built by each business , It is difficult to precipitate and reuse , It further aggravates the difficulty of the follow-up technology .
2、 The R & D model is too single , With the spread of immersive experience and rich interactive experience , Many businesses bid farewell to the old model of emphasizing presentation over interaction , Start to upgrade the experience towards moderate interaction , In particular, the class content field represented by browsing and subscription separated from wechat , Need to browse more immersively / Interactive experience to attract users to stay and consume more content , In the past, our build based approach could not support the research and development of such scenarios .
The next step is to upgrade the experience , Although we cannot determine the visual interaction and experience design of specific business scenarios , But for great experiences , We can do a few things ：

  

• Provide standardized components with an out of the box experience , Like the calendar / Rich text / Complex nested containers /Page Indicator And so on , Greatly reduce the adaptation cost brought by the refinement of the experience , Such as Dark Mode/ Automatic enlargement and adaptation of silver version font, etc ;  
  
• In rich media / The rapid development of end-to-end intelligence , And the increase of low-end equipment in the sinking market , Continue to optimize DX Render the performance level of the pipeline , Enhance the basic browsing and interactive experience of the broad business scenarios ;  
  
• Provide more sophisticated performance tools , Help developers in the face of relative “ Black box ” When there is a performance problem with the template , Early discovery can be achieved 、 Can be checked 、 Can be optimized .
  

About ProCode and LowCode Thinking
When we accept new subscriptions and browse new scenes, we find , In this scenario of content-based interaction , With rich interaction 、 Linkage and transition ,DX In the past, the dynamic logic had insufficient expressive power and was built based on modules LowCode The R & D model cannot support its efficient R & D , The core contradiction is dynamic logic 、 Complex container and internal linkage 、 Multi person parallel development and module reference , So after a series of discussion and thinking , With this picture below ：

DSC0003.jpg(105.6 KB, amount of downloads : 0)

Download the attachment

7  Hours before Upload

Based on the problems faced in the new scenario , We decided to layer the R & D model , Strong customization / Business scenarios with high requirements for dynamic logic , use ProCode Model , Through strong professional DX IDE+Git To carry out engineering multi person collaborative development , Can be done UI And dynamic logic debugging （ Chain of events ）, But the customization is weak / Business scenarios with high reusability , use LowCode Pattern to undertake , Drag and drop to generate views and layouts through a visual platform , Configure corresponding data sources and rules . meanwhile , Constantly abstract and precipitate the component library / Capability pool , Make more and more interactions / function / Layouts can be generated by dragging and dropping them visually .
The future we envision is , When business students have a new business idea , Can pass LowCode The mode is built and configured by itself , Circle a small number of users on the line for gray level verification , After verifying that the product direction is correct , More professional technicians will be invested to further product customization and upgrading , To produce greater business results .
ProCode “ troika ”
Must let ProCode Pattern shaping , What must be solved is dynamic logic 、 Complex containers and corresponding R & D support problems , So there it is ProCode Of “ troika ”：IDE、 List containers 、 Chain of events .
IDE
The first is the IDE, Here is some background information , Doing it IDE Before ,DX There is a template platform , It mainly carries the development of templates / debugging / Release work , Then why should we make another one IDE Well ？
First , Strictly speaking , original DX The platform is not called IDE, It can only be said that Editor, From a relational point of view ,IDE contain Editor, Borrow one VSCode To illustrate the difference between the two ：

DSC0004.jpg(197.62 KB, amount of downloads : 0)

Download the attachment

7  Hours before Upload

secondly , original DX On the platform Web Editor(Monaco) Although it also supports most LSP API, But no Engineering / Project system 、 file system 、 Code context understanding 、 Debugging and other capabilities , And limited to the browser environment , and IDE Run in local environment , It has rich extension capabilities and plug-ins , It can provide complete R & D lifecycle support .
therefore , stay ProCode In mode , Our technology selection is based on Katian IDE（ compatible VSCode API）, To get more view expansion capabilities , In the future, it can be deployed flexibly （ Remote development 、 Cloud deployment ）, Make it more efficient / Rapid R & D and collaboration .
at present DX IDE It has accessed several important businesses of the group, including Taobao , These developers use IDE After that, R & D efficiency has been greatly improved , In particular, the multi person collaboration and debugging efficiency have been improved by an order of magnitude . About DX IDE A more detailed introduction , You can read one of the articles in this series 《 from 0 To 1,IDE How to improve end-to-end R & D efficiency ？| DX R & D mode 》
List containers
The second is the list container , In the past, containers based on scaffolding had a feature , Containers / The page layout is described by the data protocol , That is, the data layout is integrated , This is in simple page structure （ Such as single list page ） It works well in the scenario , With the construction, the floor can be configured quickly , The end-to-end rendering is driven by the protocol , The server does not need to be too aware of the business structure （ The default is the single list layout ）. But in complex page structure （ Such as multiple layers Tab Nested container ）, Especially in the case of complex interaction , It will make the whole data structure too complex , At the same time, it also increases the data protocol paylaod, The page layout changes much less frequently than the business data .
In this case , Couple the two together , It's obviously not appropriate , therefore , Out of single responsibility and “ Dynamic and static separation ” Principles , We rethink and design , In template XML Unified description layout in （ Include container / The page layout ）, Let data return to pure data structure , meanwhile , We are also DX A new powerful list container is built into , Write it like this ：

  
 
 

   
  
  
<RecyclerLayout
   
  
  
 userId="recycler"
   
  
  
 width="match_parent"
   
  
  
 height="match_parent"
   
  
  
 dataSource="@data{itemList}"
   
  
  
 backgroundColor="@triple{@getEngineStorage{backgroundColor}, @getEngineStorage{backgroundColor}, '#ffffff'}"
   
  
  
 columnCount="2"
   
  
  
 columnGap="4"
   
  
  
 isOpenPullToRefresh="True"
   
  
  
 refreshPullText=" Drop down to refresh ..."
   
  
  
 refreshReleaseText=" Release to refresh ..."
   
  
  
 refreshLoadingText=" Loading ..."
   
  
  
 loadMoreFailText=" Loading failed "
   
  
  
 loadMoreLoadingText=" Loading ..."
   
  
  
 loadMoreNoMoreDataText=" Whether the "
   
  
  
 onPullToRefresh="@dxEventHandler{'refreshTest'}"
   
  
  
 onEndReached="@dxEventHandler{'loadMoreTest'}"
   
  
  
 >
   
  
  
 <Template
   
  
  
 if="@subdata{span}"
   
  
  
 sticky="True"
   
  
  
 colspan="2"
   
  
  
 name="aa"
   
  
  
 >
   
  
  
 <TextView
   
  
  
 width="match_parent"
   
  
  
 height="100"
   
  
  
 text="@data{text}"
   
  
  
 textSize="15"
   
  
  
 backgroundColor="#FFFF55"
   
  
  
 borderColor="#FF9911"
   
  
  
 borderWidth="2"
   
  
  
 />
   
  
  
 </Template>
   
  
  
 <Template
   
  
  
 if="@subdata{recyclerInsertItems}"
   
  
  
 name="recycler_sub_template1"
   
  
  
 version="2"
   
  
  
 />
   
  
  
</RecyclerLayout>
  
 
 

At present, the list container has covered many important business scenarios on Taobao and within the group , Nested containers are supported / Linkage framework / dynamic Template/Slot Equal ability , In the next year, we will also expand to more businesses .
Chain of events
The third is the event chain , In the past DX Only support UI Dynamic , Finite logic control can only be realized by expression , Other logic changes depend on the release , As the business has higher and higher requirements on the timeliness of release and launch , The demand for dynamic logic is becoming stronger . therefore , In the face of this appeal , After repeated discussion and reflection , Considering Apple's compliance 、 performance 、 stability 、 Development efficiency , The scheme of event chain is provided .
In the event chain scheme , Developers in XML Corresponding eventchain.json Using atomic capabilities and expressions for logical assembly , During the R & D period IDE Provides a chain of events JSON The ability of intelligent perception （ Including completion / Tips / Jump / format / Fold / Highlight, etc ）, The event chain playback function can be used , To graphically display flow of the event chain execution and access participation context of the each atomic capability , To facilitate troubleshooting . After development , In the compilation phase ,DX The compilation service will put the JSON Compile to binary , Distributed together with template binary , Ensure performance and consistency , There is an event chain engine on the end side to be responsible for binary parsing , And the scheduling of atomic capabilities .

DSC0005.jpg(108.92 KB, amount of downloads : 0)

Download the attachment

7  Hours before Upload

Want to know more technical details about list containers and event chains , You can look forward to and read this Thursday （5.26） Online series of articles List containers & How the event chain helps the business to iterate quickly | DX R & D mode .
Thinking and Practice on performance optimization
In the past two years, ,DX Our ability is getting stronger and stronger , More and more functions （ Dynamic animation 、 Chain of events 、 Complex nested containers 、 live broadcast / Video components 、3D Components etc. ）, that DX Performance advantages all the time , Will there be any impact or decrease ？ How do we continue to add new functions at the same time , Make sure that the performance does not decline but rise ？ Facing more and more complex templates , How to help developers face performance problems , There is a starting point for troubleshooting and optimization , Instead of being at a loss ？
Now let's say DX Rendering pipeline of , if Flutter The revolutionaries who took over the rendering of the entire system , that DX It is a reformer based on native system rendering .DX The main design idea of is based on Platform First To improve the system's native rendering pipeline / Performance bottlenecks and problems in the mechanism , And achieve unity at both ends .

DSC0006.jpg(182.45 KB, amount of downloads : 0)

Download the attachment

7  Hours before Upload

from DX According to the time-consuming distribution of each stage of the pipeline , The main big head is load and render, So we mainly solve this problem by asynchronizing pipelines load The problem of time-consuming , This problem is solved by asynchronous rendering and high-performance components render The problem of time-consuming , Calculate resource management and control to ensure the reasonable allocation of resources .
Asynchronous pipeline and asynchronous drawing , The main thing is to enable more work to be executed in the sub thread , Or parallel scheduling , Reduce the burden on the main thread , Rational use of multi-core computing resources , stay DX List container , We built this capability , It can be used out of the box , In the business container , We need the business side to follow our suggested timing / The business will call the corresponding... At the appropriate time API, To get asynchronous scheduling .
High performance components , We mainly optimized the picture component and developed the rich text component by ourselves , Especially rich text components , We are system based TextKit/TextLayout Self test and self drawing are realized , Provides TextSpan/ImageSpan/ Ability to unfold, fold, etc , Compared to native components , Memory down （iOS 70% Android 8%）, Performance improvement （iOS 20% Android 10%）.
Management and control of computing resources , We mainly design and implement the off screen computing resource management framework , Used to implement video / live broadcast / The broadcast control problem of dynamic graph , It also provides the ability to configure rules , In the case of multiple videos ,iOS CPU Lower occupancy 66%/Android Reduce 25%, At present, some important information flow scenarios on Taobao have been launched .
Performance tools , In the past, we mainly carried out various low-level optimizations at runtime and performance warnings at compile time , When encountering template performance problems , Business parties and DX Students call respectively Log Look at the consumption of time and the location problem , Both sides are time-consuming and labor-intensive . This will happen , Part of the reason is DX And Native The combination degree of , There are a lot of... In a rendering process DX Internal code and business side custom code are intertwined , As a result, the problem can not be quickly and accurately located ; Another part of the reason is DX The rendering process of is relatively black box to the business side , The business side also has no effective starting point for troubleshooting and optimization .
To get rid of this scenario , We should make the whole template rendering process white boxed in the development stage , Display the rendering time and its attribution of each stage of the template in a visual graphic way （DX Internal or customized part of the business party , Which one is it Widget At what stage /DataParser/EventHandler）, At the same time, through the continuous accumulation of common performance problems , Perform automatic template analysis and provide some optimization suggestions .

DSC0007.jpg(260.26 KB, amount of downloads : 0)

Download the attachment

7  Hours before Upload

Thinking and Practice on performance optimization , You can read one of the articles in this series How to continuously improve performance ？DX Detailed performance optimization strategy
Big picture of Technology

DSC0008.jpg(175.63 KB, amount of downloads : 0)

Download the attachment

7  Hours before Upload

To sum up , This is the present time. DX A big picture of the technical system , R & D support layer , We go through IDE And the platform ProCode and LowCode The appeal of two production modes , Core runtime layer , We continue to strengthen the container / Components / Layout and other view capabilities , Introduce certain dynamic logic capability , Through joint construction, the atomic power pool will be continuously precipitated , Business framework layer , We also work with teams in Taobao , Manage complex states 、 Process arrangement and other capabilities are introduced DX In the technological ecology , Services can be accessed on demand .
Future outlook
From the perspective of technological evolution , We think DX The next stage of , To realize the three modernizations ：

  

• Standardization , at present DX Of DSL Favoring private standards , High development threshold , It is not conducive to expanding the developer community , Next, we need to keep up with the client industry standards , Attract more developers ;  
  
• modernization , at present DX Describe by imperative UI, And the industry has moved forward to the declarative style , From the technological evolution route , We also want to embrace the overture , Further improve the development experience and efficiency , Besides , R & D support , Our fiscal year started from 0 To 1 Created DX IDE, Install and run locally , Has been able to greatly improve the complexity of the page / The efficiency of template research and development , But we will not stop the pace of R & D to improve efficiency , Next, try cloud deployment , Installation free / Open the box / Workspace sharing, etc , Further improve R & D and collaboration efficiency ;  
  
• Integrated , At present, we have passed DX IDE Part of the engineering integration is realized , In the future, in order to further improve the efficiency of front and back-end collaboration , In order to Serverless Become one of the basic capabilities of the client , We want to realize the integration of end cloud , In an integrated R & D environment , With the same technology stack , Develop the end side and cloud side code at the same time , Simplify the development cost of end cloud remote scheduling , The release period is deployed to different targets through compilation technology , Improve the efficiency of front and back-end collaboration and the autonomy of end-to-end technical solutions .
  

Of course, to achieve this , There are a lot of technical challenges ahead of us , Welcome interested students to have technical exchanges with us , Or join us （ Contact email ：[email protected]）, Let's work together to create the future of the client ！
Focus on 【 Alibaba mobile technology 】, Ali frontier mobile dry goods & Practice gives you thinking ！