Typescript落地和代码自动化——前端稳定性和研发效率精进

简介: 钉钉前端团队原创,关注我们,了解更多前端技术

引言

钉钉业务体量已达亿级,钉钉技术的服务端、客户端等的数据模型和接口已达到极高的复杂度。面对多样的客户端和技术栈IO环境,我们采用了IDL(interface description language)来描述多端数据通信的约定,以收敛业务复杂度带来的维护风险。

对于前端来说,容器环境从mobile、web到智能硬件IOT、桌面端CEF容器;上下游数据源也包罗了Java、C++、Node.js等宿主语言环境。

image.png

在多人协作、前端工程化的大背景下,我们开始大量使用Typescript来增强代码的健壮性、可维护性。本文将分享笔者是如何设计自动化代码工具,以便加速typescript在团队的落地。

前端代码演进至Typescript

相信大部分前端掘友们都有体感,业务迭代伴随的数据接口、模型改动,都需要前端同学手动检查业务代码,一旦改动不彻底、单元测试没有覆盖分支流程,线上稳定性就极容易收到威胁,作为开发的体感也是极差。

在2017年,借助钉钉桌面客户端从node-webkit演进至native CEF架构的契机,我们引入Typescript作为开发语言,并逐步使用起ts的技术生态,如rxjs、redux-observable等。

从2017年到2018年,钉钉桌面客户端CEF容器中运行的前端代码就已经高达23万行,维护者达到20位。

Typescript在钉钉桌面端的落地让推广工作得到了认可,比如钉钉考勤在重构过程中,逐步从js迁移到ts,开放平台的售卖系统直接就用ts编写、多个内部npm模块编写的语言选型优先采用ts。

But , 原本以为ts可以在团队顺利推广,然而现实却并非如此。很多新业务在选型时还是选择了js,是工程化成本太高还是ts太难?

我们了解到很多新同学、实习生加入团队就能很快的上手老的ts项目,断言ts语言不是问题源头。

在和业务开发同学沟通后,我们发现技术栈从js迁移到ts的过程中,数据接口定义的编写、ts脚手架的重新熟悉是主要的障碍源。

工程化和研发效率的问题构成了较高的ts研发成本,成本就意味着收益降低。

确实,要想享受ts的类型检查类型推导编译期代码检查等便利,前端项目就必须提供数据模型和接口的ts定义,我们希望找到自动化生成ts代码的方案来解决这个问题。

Typescript落地之IDL自动化生成代码

在开始介绍我们的IDL自动化代码生成方案之前,我先简单介绍下钉钉的IDL —— 强有力的多端数据接口描述语言。

背景知识之 钉钉IDL

钉钉的接口描述(IDL)文件,由model和interface组成,model用来描述数据模型定义、interface描述接口信息。举个例子

/**
 * model.idl
 * 网关报错返回对象
 */
module test;
struct GatewayErrorModel {
    // 是否被降级。1是,0否
    1: int isDegrading;    
    // 安全网关域名
    2: string domain;
};
复制代码
/**
 * interface.idl
 */
module test;
include test.GatewayErrorModel;
interface GatewayIService {
    /**
    * 上报网关访问异常错误
    * @param appId  ID
    * @param host   域名
    * @param errMsg 错误信息
    */
    GatewayErrorModel testRpc(string appId,string corpId,string domain,string errCode,string errMsg);
};
复制代码

以上两个文件interface.idl和model.idl同属一个模块, 模块名由module关键字指定即test,模型和接口的依赖关系通过include描述,数据结构通过struct描述。 model和interface的idl文件,组合构成该模块对外暴露的数据接口。 在钉钉,IDL描述了各端的数据IO信息,不同代码语言如Java、C++的rpc和推送模型的自动化生成基于IDL。IDL为各端的代码编写提供了一致性保障,让所有的数据和请求都有源可溯。

简单介绍完IDL后,我们回归上面的问题:如何降低ts对业务开发的成本。

想必大部分读者已经猜到了,我们的方案便是编写工具将IDL转译成Typescript接口和模型定义,简图如下。

image.png

前端代码自动化工具之 dingtalk-idl-ts

从信息熵的角度来说,IDL既然能覆盖c++/java等语言的数据约定,它包含的信息肯定足够覆盖前端Typescript的定义。

下面用一幅图,简示下dingtalk-idl-ts的实现细节流程。

首先从IDL做tokenizer到AST,再由AST做fs.writeFile生成初步的ts文件,随之根据业务上层传入的语言模块要求(如es、cjs)生成不同的compilerOptions以供tsc命令调用,最后调用tsc命令行自动生成rpc代码及模块定义。有兴趣的同学可以私信了解每个环节的代码实现。

image.png

有了自动化生成ts的工具还不够?我们要将稳定性的要求注入生成的ts产物

为了让数据模型生成的置信度最高,在自动化生成代码的同时,dingtalk-idl-ts工 具对数据模型的property做了optional的处理。 因此任何一行业务层的代码如果对模型的property selector没有做保护,都无法通过编译。

image.png

这样的设计模式给业务代码带来了一定的冗余度,但为业务的正确运行和错误溯源做了底线的保护。

自动化代码的生成产物,大致如下:

image.png

通过dingtalk-idl-ts提供的命令行工具,业务开发只需要一个命令行,即可按需生成项目所需要的ts数据接口定义,从易出错的手动编写ts代码中解放出来。

现在该工具已在钉钉的桌面端、小程序、H5应用中落地使用,ts的进一步推广也随着基础设施的完善逐渐落地。


相关文章
|
1月前
|
JSON JavaScript 前端开发
如何使用代码注释:关于JavaScript与TypeScript
TSDoc是一种标准化TypeScript代码文档注释的规范,使不同工具能无干扰地提取内容。它包括多种标记,如@alpha、@beta等发布阶段标记;@decorator、@deprecated等功能标记;@defaultValue、@eventProperty等描述标记;@example、@experimental等示例与实验性标记;@inheritDoc、@internal等引用与内部标记;@label、@link等链接标记;@override、@sealed等修饰符标记;以及@packageDocumentation、@param、
28 5
|
2月前
|
Java Devops 持续交付
探索Java中的Lambda表达式:简化代码,提升效率DevOps实践:持续集成与部署的自动化之路
【8月更文挑战第30天】本文深入探讨了Java 8中引入的Lambda表达式如何改变了我们编写和管理代码的方式。通过简化代码结构,提高开发效率,Lambda表达式已成为现代Java开发不可或缺的一部分。文章将通过实际例子展示Lambda表达式的强大功能和优雅用法。
|
2月前
|
缓存 前端开发 数据格式
构建前端防腐策略问题之保证组件层的代码不受到接口版本变化的问题如何解决
构建前端防腐策略问题之保证组件层的代码不受到接口版本变化的问题如何解决
|
2月前
|
JavaScript 前端开发 小程序
【技巧】JS代码这么写,前端小姐姐都会爱上你
本文介绍了JavaScript编程中的实用技巧,包括解构赋值的多种妙用、数组操作技巧及常用JS功能片段。解构赋值部分涵盖短路语法防错、深度解构及默认值赋值;数组技巧包括按条件添加数据、获取最后一个元素及使用`includes`优化`if`语句;常用功能片段则涉及URL参数解析、页面滚动回顶部及获取滚动距离等。通过这些技巧,提升代码质量和效率。
22 0
【技巧】JS代码这么写,前端小姐姐都会爱上你
|
2月前
|
前端开发 API 开发者
构建前端防腐策略问题之防腐层的核心代码实现以RxJS Observable为中心的的问题如何解决
构建前端防腐策略问题之防腐层的核心代码实现以RxJS Observable为中心的的问题如何解决
|
2月前
|
开发者 图形学 C#
深度解密:Unity游戏开发中的动画艺术——Mecanim状态机如何让游戏角色栩栩如生:从基础设置到高级状态切换的全面指南,助你打造流畅自然的游戏动画体验
【8月更文挑战第31天】Unity动画系统是游戏开发的关键部分,尤其适用于复杂角色动画。本文通过具体案例讲解Mecanim动画状态机的使用方法及原理。我们创建一个游戏角色并设计行走、奔跑和攻击动画,详细介绍动画状态机设置及脚本控制。首先导入动画资源并添加Animator组件,然后创建Animator Controller并设置状态间的转换条件。通过编写C#脚本(如PlayerMovement)控制动画状态切换,实现基于玩家输入的动画过渡。此方法不仅适用于游戏角色,还可用于任何需动态动画响应的对象,增强游戏的真实感与互动性。
58 0
|
2月前
|
C# 开发者 Windows
WPF遇上Office:一场关于Word与Excel自动化操作的技术盛宴,从环境搭建到代码实战,看WPF如何玩转文档处理的那些事儿
【8月更文挑战第31天】Windows Presentation Foundation (WPF) 是 .NET Framework 的重要组件,以其强大的图形界面和灵活的数据绑定功能著称。本文通过具体示例代码,介绍如何在 WPF 应用中实现 Word 和 Excel 文档的自动化操作,包括文档的读取、编辑和保存等。首先创建 WPF 项目并设计用户界面,然后在 `MainWindow.xaml.cs` 中编写逻辑代码,利用 `Microsoft.Office.Interop` 命名空间实现 Office 文档的自动化处理。文章还提供了注意事项,帮助开发者避免常见问题。
114 0
|
2月前
|
Android开发 iOS开发 C#
Xamarin:用C#打造跨平台移动应用的终极利器——从零开始构建你的第一个iOS与Android通用App,体验前所未有的高效与便捷开发之旅
【8月更文挑战第31天】Xamarin 是一个强大的框架,允许开发者使用单一的 C# 代码库构建高性能的原生移动应用,支持 iOS、Android 和 Windows 平台。作为微软的一部分,Xamarin 充分利用了 .NET 框架的强大功能,提供了丰富的 API 和工具集,简化了跨平台移动应用开发。本文通过一个简单的示例应用介绍了如何使用 Xamarin.Forms 快速创建跨平台应用,包括设置开发环境、定义用户界面和实现按钮点击事件处理逻辑。这个示例展示了 Xamarin.Forms 的基本功能,帮助开发者提高开发效率并实现一致的用户体验。
78 0
|
2月前
|
前端开发 IDE 测试技术
自动化测试中的代码魔法:使用Python和Selenium框架
【8月更文挑战第31天】在软件开发的海洋中,自动化测试是一艘能够带领团队穿越波涛的帆船。本文将引导读者了解如何利用Python语言结合Selenium框架,编写简洁而强大的自动化测试脚本。我们将从搭建开发环境开始,逐步深入到实际案例,最后通过一个简单示例展示如何实现端到端的自动化测试流程。文章不仅提供实用的代码片段,还旨在激发读者对于软件测试深层次思考的热情。
|
2月前
|
JavaScript 前端开发 安全
【技术革新】Vue.js + TypeScript:如何让前端开发既高效又安心?
【8月更文挑战第30天】在使用Vue.js构建前端应用时,结合TypeScript能显著提升代码质量和开发效率。TypeScript作为JavaScript的超集,通过添加静态类型检查帮助早期发现错误,减少运行时问题。本文通过具体案例展示如何在Vue.js项目中集成TypeScript,并利用其类型系统提升代码质量。首先,使用Vue CLI创建支持TypeScript的新项目,然后构建一个简单的待办事项应用,通过定义接口描述数据结构并在组件中使用类型注解,确保代码符合预期并提供更好的编辑器支持。
59 0
下一篇
无影云桌面