From 0 to 1, how does the IDE improve the efficiency of end-to-end R & D| DX R & D mode

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 In pursuit of the ultimate performance experience , Performance bottlenecks and practical experience .

Chapter one ：《 TaoBao Native The evolution and thinking of R & D mode  | DX R & D mode 》

Second articles ：《 List containers & How the event chain can help businesses improve the iteration efficiency of publishing ？ | DX R & D mode 》

Third articles ：《 How to continuously improve performance  | DX R & D mode 》

this paper ：《 from 0 To 1,IDE How to improve end-to-end R & D efficiency  | DX R & D mode 》

background

With the application DinamicX( abbreviation DX, The same below ) Technical scenarios and teams are becoming more complex and extensive , Continuous support DX Core competitiveness , Support team level collaborative development , The demand to help complex business scenarios is becoming stronger . Previous DX Develop a template based platform , Its core is based on open source Monaco Editor ( drive VScode Open source code editor for ) Custom developed front end engineering . Although the template platform has met the needs of business development to some extent in the past , But its editing experience , Debugging experience and performance guarantee are increasingly difficult to meet the requirements of developers .

Facing these problems , from DX From the perspective of business R & D needs , We need a one-stop development environment , Provides creation from , Development , compile , debugging , The whole R & D cycle guarantee from release to release .

Full R & D cycle guarantee

Technical scheme selection and design

Based on the above considerations , What we need is a IDE. Different from the template platform Editor,IDE Provides complete development cycle support . At present, the mainstream of the industry VSCode, Not only provides a wealth of API For extension , It also contains an extremely rich plug-in market , Through the development of VSCode Plug-ins to provide DX IDE.

▐  VSCode ecology

1. The template platform runs on Web Environmental Science , Limited to browsers , IDE Run in local environment , It is easy to expand , Controllable environment and good compatibility ;

2. The editor can be used for rich editing period support , Its LSP API Except part API( The call stack , Quick fix , Show all references , Dynamically evaluate expressions , Inline value calculation , Class inheritance relation , The symbol table ) Outside support , It provides rich functions such as editing and completing documents ;

3. Compared to a pure editor ,IDE It provides complete development cycle support , Including the project system , Code history context understanding , debugging , Combination with other functions ( Like scaffolding , Compile etc. ), Apply R & D cycle management , Platform related content ( Such as Swift, Kotlin, Faas) etc. .

although VSCode Provides many capabilities and extensions , Including but not limited to file tree and menu , Engineering system , Editor and language services ( intellisense ), Debugging services , Better integrated build and development lifecycle management , Platform tools, etc , But at the developer - oriented interaction level , There are still many limitations and inconveniences . meanwhile , Originated in the interior of Ali economy IDE frame --OpenSumi frame ( Ali & Ants study by themselves IDE R & D framework , Open source ), Compatible with 100% VS Code API, It also extends many API, Provides a wealth of UI Custom support , It greatly simplifies the interactive development of custom plug-ins , So we use OpenSumi As IDE Final technology selection .

▐  OpenSumi Custom extensions

Above , The figure below briefly illustrates OpenSumi Support for custom views .

Combined with the above development objectives and technology selection , We have the following design .

▐   Large design drawing

▐   Layered design

overall IDE It is divided into the following levels ：

• IDE Containers (CLI)

As mentioned above, we used a method based on OpenSumi Framework of the IDE Pedestal , Not only is it compatible VSCode ecology , There are also many API Such as extension , To form the ide-framework. And then through customization under the economic scenario , Such as login status , Front end development workbench, etc , Package and build O2 This final deliverable . For us , Is to develop compatibility VSCode API Of OpenSumi plug-in unit , By means of O2 Install plug-ins on to achieve final product delivery .

Consider the command line call 、 The reason for code reuse , We designed it based on Node.js Of CLI Used to support many basic functions , For example, create a template , Compiling templates , Release templates, etc . There is also a two-level hierarchy . That is to provide general debugging services , Static file service utbd-devtools, And based on utbd-devtools The differences between CLI/IDE plug-in unit ( adopt DaemonInterface Same as utbd-devtools Interact ).

• Underlying capability

Here we mainly abstract some public services that are not directly related to template development , Including commissioning protocol ( passageway )、 Data storage and persistence 、 Management pool of singleton objects 、Git service 、 Data embedding point service, etc .

• Basic services ( Template development )

Here are some basic services required for template development .

From an editorial point of view , Mainly customized DSL Code IntelliSense under , The core is to analyze the syntax tree structure of the source code in real time , On the one hand, we should combine DSL To judge each tree node according to its own constraints and specifications ( And attributes ) Is it legal or not , combining VSCode Language server protocol provided by itself , Realize the final code intelligence perception . from DX From the point of view , We need to consider the following DSL Analysis of :

1. xml： namely main.xml, It describes the structure and style of the view , There are mature schemes for its analysis ;

2. json： Include event_chain.json and mock.json, Used to describe the chain of events and mock data , There are mature schemes for its analysis ;

3. expression ： Data source based on template settings (data), Developers can describe attributes in the form of expressions , Such as ：

<ImageView
  width="match_content"
  height="14"
  scaleType="fitXY"
  imageUrl="@{data.picUrl}"
  visibility="@{data.picUrl?'visible':'gone'}"
/>

Here imageUrl and visibility Attributes are written through expressions , Expressions can be used not only for XML, It can also be used for event chain files . Expression syntax is a truncated version of TypeScript grammar , By writing antlr4 Grammar files (Lexer.g4 and Parser.g4), Use antlr4ts The tool can automatically generate the corresponding Lexer.ts,Parser.ts,ParserListener.ts and ParserVisitor.ts file , So as to be used in the follow-up AST analysis .

Analysis leads to DSL Of AST after , Through metadata ( Platform constrained controls 、 expression 、 Atomic power, etc ) Constraints , combination VSCode LSP Code IntelliSense supported under API, We can achieve including completion 、 Suspended documents 、 The diagnosis 、 Jump definition 、 Code formatting 、 Fold 、 Highlight and other code development support .

• Feature Development and R & D mode assembly

We include a workflow according to the R & D mode , Workflow can be divided into several stages ( Preparation stage 、 Create a stage 、 Editing stage 、 Debugging phase 、 Testing phase 、 Release stage ), Each stage also includes multiple Feature( For example, the creation phase includes the creation of projects and templates ) Such a hierarchical relationship , By developing Feature The final assembly is DevelopPattern.

• R & D mode extension

In practice , There are not only demands for various R & D modes , For a variety of reasons , There are also many custom extensions based on R & D mode , For example, the message business domain is based on DX Script extensions for patterns , Rookies and CBU It's based on DX Container building extension of pattern . So , We also designed the R & D mode extension , Allow plug-ins to customize and extend the above R & D mode to meet their respective demands .

IDE Function and use

This article only introduces DX R & D mode related functions .

Ribbon diagram

▐   Create a stage

The creation phase includes DX Engineering and formwork .

• Create a project

1. Set up GitlabToken( Only once , To automatically create Gitlab project )

2. Click create project entry

3. Select R & D mode ( This should be DX)

4. Configuration parameters , Create project

• Create a template

【 New template 】

1. Click create template entry

2. Configuration parameters , Create a template

【 Clone template 】

1. Select the template corresponding to the template to be cloned cola.build And right click

2. Click clone template

▐   Editing stage

• Import template

This includes searching for templates by keyword , Search results can be opened directly ( If it exists locally ), You can also choose to import .

Import time , We can choose to import a single template , You can also use the application name + Retrieve all related templates by business name , Import... Together .

During template import , All version numbers of each template will be queried one by one , The corresponding content has been , Use these as Git Record , To be submitted . For official version number , Will be marked in the shape of : release/templatename/templateversion In this way tag.

• Template dependency management

at present IDE Compiling base components is not supported in , Only reference to basic components is supported . To edit basic components, you need to operate on the template platform , Then update the metadata locally to obtain the latest version number and update the dependency to take effect . This is because , We hope for the future Import Can be Template Label to replace ,Template Relevant editors , Reference and compile IDE Both of them support .

thus , This only includes dependency management of basic components and batch version change .

Dependency management for basic components , It's actually visual editing cola.build Medium dependencies Field .

Batch version change is applicable when a basic component is referenced by a group of templates , Batch update the version dependent descriptions of the referenced basic components of these reference templates ( Source code ), By selecting pre release , We can also update the source code at the same time , Pre publish the reference template in batch .

Similar to the batch modification that the basic component depends on ,IDE Also support the Slot Batch modification of references .

• Code help

This mainly includes event chain formatting 、 Expression formatting 、 Local file search 、 And code sample search .

The local file search can accurately search the file through simple rules, such as clicking open , Such as s/s/m Match to : sub_main/src/mock.json.

Code sample search can search to the current... By keyword Aone The code base (Gitlab) What are the references on , Such as @getEngineStorage combination event_chain.json You can learn that in the time chain getEngineStorage Specific usage of .

• Expressions support

The main function here is to realize the one key format of the expression .

• Event chain visualization

Here, the call and transfer of atomic capabilities described by the event chain are mainly displayed in a visual way , Currently, a variety of transfer relationships are supported , Including explicit transfer and implicit ( expression ) The transfer relationship of .

Click a node or edge to automatically select the corresponding code area .

• Code intelligence perception

1. Code completion : Support main.xml Control name in , attribute , Property value ;event_chain.json Atomic power name in , Atomic power parameters , Event chain node ; expression ( name /data Field / Event chain name ) etc.

2. Suspended documents : Support main.xml Control name in 、 Property name ;event_chain.json Atomic power name in , Atomic power parameters ; Expression name ;

3. Code diagnosis : Include main.xml Control name in , Property name , Property value ;event_chain.json Atomic power name in ( Atomic capability parameters are not supported for the time being , The main reason is that the constraints on the platform are not complete ); Expression name ;

4. Jump to definition : Mainly jump to mock.json( namely data expression , from main.xml or event_chain.json) and event_chain.json( from main.xml);

5. Code formatting : Include main.xml Formatting ,event_chain.json Formatting , Expression formatting ;

6. Code folding : Include main.xml, event_chain.json, mock.json And the folding of expressions ;

7. Code highlighting : It mainly refers to the highlighting of expression names .

▐   Debugging phase

• preview

This mainly includes debugging service code scanning 、 Preview page single template preview and business container multi template preview . Developers connect debugging services by scanning code , When a device is connected , Changes to the currently selected template will be compiled and the product will be pushed to the mobile phone in real time and take effect , When no device is currently connected , Template changes will be compiled in real time , And the compiled product is revealed in the form of two-dimensional code , You can directly scan the code to preview .

The preview page template preview is the same as the previous template platform .

The core of business container multi template preview is to solve some problems in preview page preview , Including the lack of good support for custom builds , Only single templates can be previewed , data Mock Unreal, etc , Use this feature , Developers can include... Anywhere DX Preview in the page of the template IDE Template file in , After the code is changed and synchronized to the device successfully , Refresh the page and re render the template to take effect .

This also includes passing Command+Shift+P Call up the command panel , Perform the function of switching preview template to quickly switch to the specified template ( Only valid under preview page preview ).

• View review

View review is mainly used to troubleshoot problems in layout display , For example, the node is lost , Attribute values are not equal .

Suppose you have scanned the code and connected to the debugging service , The same below , Don't go into .

1. IDE Turn on the enable view review switch on the

2. Device side rendering DX Templates

3. IDE Select a view review record on the ( Fuzzy search is also supported )

4. Open the corresponding template main.xml file

5. Click on main.xml A label in , The corresponding nodes in the three trees can be automatically expanded , And highlight the corresponding view on the equipment side .

6. Click to expand the tree node , Or expand the tree node attribute node , You can automatically select the corresponding source code .

• Expression playback

Expression playback is mainly used to troubleshoot the execution of complex expressions .

1. IDE Turn on the enable expression playback switch on the

2. Device side rendering DX Templates

3. IDE Select an expression playback record on the ( Fuzzy search is also supported )

4. Click the playback button , You can see the timing of the entire expression execution

5. Select a node that has been executed , You can see the context of its execution .

• Event chain playback

Event chain playback is mainly used to troubleshoot the execution of the event chain .

1. IDE Turn on the enable event chain playback switch on the

2. Device side rendering DX Templates

3. IDE Select an event chain playback record on the ( Fuzzy search is also supported )

4. Click the playback button , You can see the sequence of execution of the whole event chain

5. Select a node that has been executed , You can see the context of its execution .

• Equipment management

Mainly used in the same way iOS Simulator (Mac On ) Deep integration of , So even if the developer doesn't have one iOS equipment , Or the equipment manufacturer does not have a package available for testing , It can also be easily installed and used IDE Various functions of .

▐  Release Stage

• Template Publishing

1. Select the template to publish ( Support search )

2. Select the branch to publish

3. Fill in the release description

4. Select some configuration items ( The verification version conflict is mainly used to prevent some updated version numbers on the template platform ; Submitting changes in advance allows developers to quickly modify validation changes ( Especially for simple template changes ); skip Git Checking can be done without checking whether the content to be submitted , Especially when developers need to publish another branch , And the change of the current branch does not need to be submitted ; Pre release is used to configure whether to officially release )

5. Just publish

The release result pop-up window will also prompt the developers what version numbers have been generated in this release , product cdn Address, etc .

• Template historical version query

This includes : Templates url Copy 、 Templates zip download 、 Template preview 、 Publish the information 、 Source code view 、 Code Diff、 Content rollback 、Diff Link sharing (CR Use ) etc. .

• Batch built-in

Here we will complete the built-in of the double end product , as well as Android What the side needs presetTemplateInfos.json structure .

• Set up

This is mainly Gitlab Token Configuration of , And based on GitDiff Since the release of the template Diff Baseline configuration .

IDE Evolution thinking

In view of the shortcomings of the template platform in the past , We have implemented from editor to IDE The transformation of , Significantly improve the developer's R & D experience . Facing the future , We have the following aspects of evolution thinking ：

▐  Expand application scene / The team

• IDE Direct benefits

1. Engineering support , Developers can develop a set of templates for related businesses in a workspace ;

2. Code managed to Gitlab, Many people work together , Submit history , Roll back , Search for ,CR, Data statistics , Get through the group code service directly ;

3. Simpler batch template management , For example, batch modification of basic component dependencies , Batch release , Batch built-in, etc ;

4. Code intelligent perception experience of benchmarking advanced language editing ( completion , file , The diagnosis , Jump , format , Fold , Highlight, etc ), cover main.xml, expression , Event chain, etc . More Than This , For the event chain ,IDE Sorting is also provided , One click collapse all and visual preview ;

5. Better preview experience , Developers can combine IDE The business container preview of is directly used to dynamically replace the template in the current business container (IDE The template in is modified and compiled immediately );

6. Rich problem troubleshooting toolbox , Troubleshooting for view exceptions ,IDE Provides view review and source code correlation , Dynamic source code and actual view structure can be established ( attribute ) Two way Association of ; Complex problems for expression execution ,IDE Provides expression playback to track expressions AST The structure and , Execution order , Input output and context ; Execute complex problems for the event chain ,IDE Event chain playback is provided to track the execution order between atomic capabilities in the event chain , Input output and context ;

7. Better simulator Integration ,Mac On IDE Deep integration iOS Simulator , Developers can quickly install / Activate app , Connect to the debug service and preview the page .

• IDE Potential benefits

1. DX IDE It provides the extension of R & D mode , be based on DX Derived technical solutions can be easily integrated into IDE;

2. At present, we are working on the mobile team level with R & D experience CoE The team discusses the measurement model and indicators of client R & D performance , be based on IDE Multi dimensional and fine-grained perception of the R & D process , We will have the opportunity to help the team measure R & D effectiveness , Further improve the R & D experience .

• IDE Use cost

1. Developers need to install O2 and DX IDE plug-in unit , Then there will be automated scripts , Tools and commands to ensure that the environment meets the requirements ;

2. The cost of existing template migration , at present IDE Support search keyword based ( or ID) Single template import of , And based on app&biz Import a set of business templates , One click migration of required templates to DX engineering ;

▐  Technology iteration

at present ,IDE The implemented DX Engineering and full R & D lifecycle support , Contains excellent code editing experience , Many troubleshooting methods , Rich tool kit to solve R & D pain points , In the future, we will carry out technical iterations around the following aspects .

• Perfection of existing design

1. A filling Android SDK Middle view review function .

2. Performance aspect , Provide including editing period Linter, Real time performance collection during operation , Of the release period Benchmark, Performance index and other data during operation and maintenance period to improve template performance .

3. Compatibility , Get through the mobile phone, middle desk and other equipment services , Developers can quickly preview the rendering effect and performance on different devices .

• Technological evolution and exploration

1. Under the current technical framework , Developers install on demand IDE And plug-ins , There is a problem of high access cost . By way of IDE Remote deployment , Developers use Web Connect to the remote service , Not only can the installation cost be avoided , It is also convenient to share workspaces, etc ;

2. In the past, the research and development of client business was often the separation of client and server , Facing increasing business challenges , Faster iteration speed requires , Business centric end cloud integrated development has more value ,Faas Its growing maturity also makes it more convenient and feasible for the client to develop back-end logic .IDE As a unified programming plane , It can better support the front and back end logic under the integrated project ( page ) Development , Accelerate business value delivery ;

3. At present, the mainstream ecology in the industry increasingly uses declarative UI, Whether it is the progressiveness of technology or the growth of technical students , We should all embrace this trend more . Explore DX DSL Simultaneous Mingshi UI(JetpackCompose, SwiftUI,Flutter,ArkUI) The combination of , By upgrading DSL, combination Jetpack Compose/SwiftUI/Flutter, It is matched with tool chains such as relevant analysis, analysis, compilation and execution , Developers can be closer to native ( friendly ) Develop cross platform business .

team introduction

We are a terminal experience platform -DX R & D mode team , Mainly responsible for DX Construction and evolution of technical system , At present, it has been connected to 70+ App, It carries ten billion yuan a day +PV, service 1200+ developer , Our goal is to go deep into the native domain , Fully exploit native features , Create an industry-leading native R & D model , Improve the consumer and developer experience , Help business deliver quality & Quantity double liter , Welcome interested students to communicate with us ：[email protected]

*   Expanding reading

author | Wang Kang ( Positive object )

edit | Orange King