F(X) Team of Ali Tao Department – Su Chuan
Design draft intelligent generation code development
According to incomplete statistics, taobao Tmall only structures, class module in the new incremental above 1 w, page increment of 100 w, these product pages mind different UI visual variety, different business nature lead to different business logic, a large number of modules is difficult to reuse, the front end of the need to invest a lot of manpower to develop, the front-end business pressure is very big.
In order to solve this dilemma, in 2017, we developed a tool that can automatically generate code, called Da Vinci at that time. Later, we gradually introduced CV, NLP and other AI technologies to solve the problem of layer recognition and semantics. After more than a year of development, we’ve been able to generate readable and maintainable code with few constraints on the design draft, and officially opened the imgCook platform in January 2019.
Stability and performance are the necessary horizontal projects of the annual promotion, to ensure the stability and performance experience of the conference venue externally. Since November 11, 2019, R&D efficiency has also become one of the horizontal projects of the promotion, to improve the internal R&D efficiency, release manpower, and reduce the business pressure of the front-end students.
Imgcook, the Design to Code (D2C) platform, as the core to improve the R&D efficiency of the special project, undertook the automatic generation of 78.94% of the new modules in the 2019 Double 11 Promotion Conference, and the Code availability rate reached 79.34%.
This year, the front-end intelligent power front-end research and development model was upgraded. Several BU front-end design draft identification algorithm models and data sets were applied on a large scale in the Venue of Double 11. Comprehensive upgrade of design draft code generation technology system (such as UI polymorphism, live video components, intelligent recognition enhancement of circulation, etc.) brought the marketing module r&d link productization upgrade: 90.4% (higher than last year) of new module code intelligent generation. The intelligent checking ability of design draft was upgraded, and the codes generated intelligently without artificial assistance were retained and released online, accounting for 79.26%. Compared with the traditional module development mode, the coding efficiency (the ratio of module complexity to r&d time) increased by 68% after using the design code generation technology, and the throughput of module demand per fixed manpower unit time increased by about 1.5 times.
This year’s Double 11 research and development efficiency
There are 52 new modules in the statistical range of This year’s Double 11, among which D2C modules account for 90.4% of the new modules, including the main venue, industry venue, special venue, list venue, new product venue, U first venue, gratitude venue, etc. The reason for not using IMGCook is as follows: Complex interactive interaction, dynamic effects, 3D and UI design strong scene. The picture below shows some modules developed through Imgcook visual R&D link in this Double 11.
R&d efficiency improvement is a common and broad concept. According to the real front-end time spent, we counted the specific time of more than 100 Amoy C front-end developers, and the results (with the consent of the students counted, the computer installed Timing similar software for batch statistics, a total of about 2200h+) are as follows:
- The front-end time accounted for the highest 27.7% in coding phase, and the top2 was 20% in online communication.
- In addition to coding, there are many other front-end links, and each link is time-consuming, such as sharing summary and learning time accounts for a lot of time. Front-end is a position requiring continuous learning and summary.
- From the overall point of view, the front-end overall efficiency improvement is concerned with the improvement of the overall front-end human efficiency. How many people can be reduced? Or now there is a shortage of personnel, the statistical method of personnel reduction is not feasible, it depends on the demand throughput rate (fixed front-end personnel unit time demand throughput); From a partial point of view, currently D2C mainly improves efficiency in the coding stage, so the coding efficiency is also a key indicator of efficiency improvement. Further analysis shows that the main factors affecting the coding efficiency include the availability of intelligently generated codes and the complexity of business.
A measure of r&d performance
We measure the effectiveness of r & D from three aspects: demand throughput rate, coding efficiency and code availability
Demand throughput rate
In the double 11 hall project, the choice of the two formal classmates and two outsourcing as a tester, only do module demand, module according to the highly complex, moderate and low complex, number according to the medium complexity for the unit conversion module, such as a higher complexity module is equivalent to two or three medium complexity module, One low complexity module is equivalent to 0.5 medium complexity modules. The end result is this:
At the same time, I have interviewed dozens of students, and I can develop 1.5 modules per week on average without using D2C, so I will
PS: More samples of this demand throughput indicator need to be added daily for continuous verification.
Coding efficiency
Requirements throughput takes into account the overall requirements, including requirements communication time, while coding efficiency measures the amount of development done per unit of time. We calculated the Complexity and development Time of 38 modules developed in IDE and 34 modules developed using IMGCook after September 2020, and calculated the efficiency value E=Complexity/Time for each module.
The average r & D coding efficiency value in IDE is 0.604 and R & D coding efficiency value in IMGCook is 1.89. Converted into the comparison of coding time of the same complexity module, it can be seen that the r & D coding efficiency of IMGCook can be improved by about 68%.
Code availability
We measured the percentage of lines of code generated by Imgcook’s last restore that remained in the online version closest to the restore. That is, code availability = (imgCook generated lines of code – deleted lines of code)/online lines of code. In the event of Double 11 without manual assistance, the availability rate of pure view code, CSS code and overall code is 70.07%, 73.88% and 79.26% respectively.
We take a double-11 module as an example to analyze the code generation situation. For a module with good layout generation, the code modification mainly lies in adding some event binding and field binding codes, and the code generation rate of this module is 89.8%.
Change and innovation
In the background of front-end intellectualization, the whole link of D2C technology system is upgraded with intellectualization capability, and the front-end algorithm engineering framework Pipcook, which enables front-end engineers to become machine learning engineers, and Samplecook, which solves sample collection problems, are brought to front-end students. At the same time, it brings the marketing module r&d link product upgrade, and helps the whole link r&d improve efficiency.
D2C technical system upgrade
The intelligent ability of D2C is distributed in each stage of the restore link. Aiming at improving the code availability, we upgrade the intelligent ability of the whole link, and refine the technical scheme into how to improve the accuracy of model recognition at each stage and how to apply the recognition results to the code generated by the intelligent restore link. How to make the whole process from sample collection, model training, model deployment, model application to engineering link to be automated, self-iterative optimization, continuous optimization and iterative model ability.
The application of intelligent ability also needs the support of engineering links, such as the application of model recognition results, online user behavior recall, and the acceptance of UI component recognition results by front-end development components. The overall D2C technology system also needs to be upgraded synchronously.
D2C r&d mode upgrade
Amoy marketing is based on module development, the complete link of module development is from the module management platform to create module ⇥ into Imgcook platform intelligent generation code & visualization research and development ⇥ after the completion of development into IDE debugging preview ⇥ after the completion of testing into the engineering platform release. The whole R&D process needs to switch over multiple platforms, and the development link experience and engineering efficiency need to be improved.
Imgcook platform intelligent code generation & visual research and development, if you can directly develop, debug, preview and publish in Imgcook platform, one-stop D2C research and development mode is a good choice to improve the overall research and development efficiency and experience.
Imgcook visualization editor, intelligent code generation and visualization development in visualization mode, and generated code one-click synchronization to source mode WebIDE, in WebIDE support interface debugging, preview, release.
By calculating the efficiency (complexity vs. time) of modules developed using Imgcook’s visual development model, we found that the coding efficiency of modules developed using Imgcook’s visual development link improved by 68%.
Add algorithmic engineering system
By providing generic model capabilities such as image categorization, object detection, text categorization, and so on, Pipcook reduces the threshold from developing to launching these models in IMGCook, making it possible for so many low-level recognition capabilities to iterate quickly as well. Imgcook’s whole link recognition capabilities, such as component recognition, Icon recognition, field semantic recognition, are based on Pipcook training.
In the coming year outlook
Coding and communication is the largest part, and it is expected to reduce communication time by structuring requirements and improving the quality of PRD delivery. In the future, it is expected that the business RESEARCH and development platform can create a new business research and development mode of demand-as-code, demand-as-production and online collaboration, and improve the overall demand link research and development efficiency.
Read more
-
Design Draft Basic Specification – Two core actions that make the generated code absolutely accurate
-
Use custom components – rotation, video, focus buttons and other components can be configured, intervention, rendering, code
