Dingding front-end team original, click on the upper right corner to follow us, learn more about front-end technology

Author: Candle elephant

The introduction

The volume of nail business has reached 100 million level, and the data model and interface of nail technology, such as server and client, have reached a high complexity. Interface Description Language (IDL) is used to describe the convention of multi-terminal data communication in the IO environment of various clients and technology stack to reduce maintenance risks caused by service complexity.

For the front end, container environment from mobile, Web to intelligent hardware IOT, desktop CEF container; Upstream and downstream data sources also include Java, C++, node.js and other host languages.

In the context of collaborative collaboration and front-end engineering, we’ve started using Typescript heavily to make our code more robust and maintainable. In this article, I’ll share how I designed automated code tools to speed uP typescript’s rollout to the team.

The front-end code evolves to Typescript

It is believed that most front-end users have a sense of motion. The data interface and model changes accompanied by business iteration require the front-end students to check the business code manually. Once the changes are not thorough and the unit test does not cover the branch process, the online stability is very easy to be threatened, and the sense of motion as a development is also very poor.

In 2017, with the opportunity of Dingding desktop client evolving from Node-WebKit to native CEF architecture, we introduced Typescript as the development language and gradually adopted TS technology ecology, such as RXJS and Redux-Observable.

From 2017 to 2018, there were 230,000 lines of front-end code running in the CEF container of The Dingding desktop client, and the maintainer reached 20 bits.

The adoption of Typescript on the Dingding desktop has been validated by the fact that Dingding’s work schedule has been refactoring from JS to TS, that ts is written directly in the sales system on the open platform, and that TS is preferred in languages written in multiple internal NPM modules.

But, it was thought that TS could be promoted smoothly in the team, But the reality was not so. Js is still selected for many new businesses. Is it too high engineering cost or too difficult for TS?

We learned that many new students and interns could quickly pick up the old TS project when they joined the team, and asserted that TS language was not the source of the problem.

After communicating with business development students, we found that the compilation of data interface definition and the re-familiarity with TS scaffolding were the main obstacles in the process of technology stack migration from JS to TS.

Engineering and r&d efficiency issues constitute a high COST of TS r&d, and cost means lower revenue.

Indeed, to enjoy the benefits of TS type checking, type derivation, compile-time code checking, and so on, front-end projects must provide TS definitions of data models and interfaces, and we wanted to find a solution to automate the generation of TS code to solve this problem.

Typescript landing IDL automatically generates code

Before introducing our IDL automated code generation solution, LET me briefly introduce IDL, a powerful multi-terminal data interface description language.

Background knowledge of nailing IDL

The pin interface description (IDL) file consists of model and interface. Model describes the data model definition and interface describes the interface information. For example

/** * model.idl * Gateway error return object */
module test;

struct GatewayErrorModel {
    // Whether to demote. 1, 0 n
    1: int isDegrading;    
    // Security gateway domain name
    2: string domain;
};
Copy the code
/** * interface.idl */
module test;
include test.GatewayErrorModel;

interface GatewayIService {
    /** * Abnormal gateway access error * @param appId ID * @param host domain name * @param errMsg Error message */
    GatewayErrorModel testRpc(string appId,string corpId,string domain,string errCode,string errMsg);
};
Copy the code

Idl and model.idl belong to the same module, whose name is specified by the module keyword, namely test. The dependency between model and interface is described by include, and the data structure is described by struct. Idl file of model and interface, combined to form the exposed data interface of the module. In dingding, IDL describes the IO information of each end of the data. Different code languages such as Java, C++ RPC and the automatic generation of push model are based on IDL. IDL provides consistency for coding on all sides so that all data and requests are traceable.

After a brief introduction to IDL, we return to the question of how to reduce the cost of TS for business development.

As most readers have guessed, our solution is to write tools to translate IDL into Typescript interfaces and model definitions, as illustrated below.

Front-end code automation tool dingtalk-IDL-TS

From an information entropy perspective, IDL can override data conventions in languages such as c++/ Java, and it certainly contains enough information to override Typescript definitions.

The details of dingtalk-IDL-TS implementation are shown in the following figure.

Then the AST generates fs. WriteFile to generate preliminary TS files. Then generate different compilerOptions for TSC commands based on language modules such as ES and CJS. Finally, call TSC command line to automatically generate RPC code and module definition. Interested students can know each link of the code implementation.

Isn’t it enough to have tools to automate TS generation? We are going to inject the stability requirement into the generated TS product

Dingtalk-idl-ts makes optional property of the data model while automating code generation in order to generate the highest confidence of the data model. So no line of business-layer code that does not protect the model’s property selector will compile.

This design pattern brings a certain degree of redundancy to the business code, but protects the bottom line for the correct operation of the business and error tracing.

The automated code generation output is roughly as follows:

Through the command line tool provided by Dingtalk-IDL-TS, business development only needs a command line to generate the TS data interface definition required by the project on demand, freeing from the error-prone manual writing of TS code.

At present, this tool has been used in dingding desktop, small program and H5 application, and the further promotion of TS is gradually implemented with the improvement of infrastructure.

Write in the back

These are some of the solutions and practices we have implemented in Typescript. We welcome suggestions and suggestions from students with better ideas. I hope you have a certain harvest after reading this article.

Recruitment Time:

Nail nail front – end team recruitment fully open, for various technical talent to join.

Resume should be sent to [email protected]

Author nail number: Huangxiaogang

Scan code for more nail techniques

😊 Nailing welcome scan code to pay attention to “Nailing Technology circle”

😊 Please scan code to follow the wechat public account of Dingdingda Front End Team