前端基础设施怎么搞？看腾讯TDesign跨技术栈组件库的最佳实践( 二 ) 6月28日

另一种方案是直接将React代码转换成Vue ，这样带来的好处是可以真正维护一个代码，支持多种技术栈。但是，统一整个前端技术栈，其实是一个很大的问题，目前业界也没有统一的方案。另外，代码转换支持多技术栈的方案其实在应用开发层更常见。对于腾讯TDesign的底层依赖来说，转换后代码的稳定性仍然难以得到保证。
不仅如此，这种转换方案的中间层代码相当于一个新的框架，既不是Vue ，也不是React 。对于贡献者来说，门槛比较高，会进一步导致缺乏活跃的开源社区。这也是腾讯TDesign团队需要考虑的问题。
最终，腾讯TDesign团队决定用Vue开发Vue技术栈，用React开发React技术栈。除了Angular和小程序受技术栈限制外，其他技术栈都使用Jsx来维护组件实现，主要解决以下问题：
组件API保持一致
腾讯TDesign团队梳理了开源项目前端组件上线流程。在组件开发前期，设置了API/交互草案的统一评审环节，邀请实现人员、UI/交互设计人员以及PMC成员和各技术栈的学生对组件API的可用性、灵活性和必要性进行评审。经过充分讨论，大家的意见会形成整个组件的API描述，进入腾讯TDesign的组件API管理平台。

文章图片
最终API管理平台会生成每个技术栈的API文档，某个组件的props.ts和typeb.ts文件等。组件开发人员在开发时，不需要对着文档进行开发，可以直接根据生成的定义文件进行开发。当API开发人员提到PR进行评审时，任何变更都将被同步到技术栈中实现的仓库。
用户实际使用与官网体验保持一致
为了让用户的实际体验和官网的体验保持一致，腾讯TDesign在官网做了一层通用架构。目前所有的组件文档都包括了文本部分和我们要展示的组件演示。每端实现的时候都会引入一个Web组件来实现官网的公共部分，通过统一的Markdown解析工具，最终解析出来的栈点会完全一样。
各个技术栈产物的UI和交互保持一致
除了保证组件API的一致性，还需要保证所有技术栈产品中的UI和交互完全一致。在这里， TDesign做了两件事：第一， TDesignToken贯穿了设计开发的全过程，从原设计者提供的设计草稿，到构件库中代码的实现变量，再到最终构件库中的NPM包产品，每个变量都有一一对应的关系；其次，选择一个独立的仓库，在TDesign-common仓库中独立维护各个组件，通过子模块引入实现仓库。当UI需要调整时，直接在独立的数据库中修改，然后同步到各个技术栈实现的仓库中，最终保证整个UI和交互在各个技术栈上实现的完全一样。
部分组件代码复用
除了UI相关实现代码的技术栈复用，腾讯TDesign还参考了业内类似组件库产品的做法，探索了一些代码逻辑复用的方案：一些与技术栈无关的抽象组件类也被提取到TDesign-commonwarehouse中；分层组件的合理实现，使用钩子和组合API跨技术栈重用一些代码实现。

文章图片
未来怎么走？
据了解，目前腾讯TDesign在内部和外部都有比较广泛的应用基础。腾讯正在积极推动各项业务统一到TDesign ，也支持多个领域和行业的外部项目落地，并从中孵化出多个行业构件库。这些组件库将在未来逐步开源，继续支持各行业的系统建设。
当我们开始回顾腾讯TDesign开源以来的历史，可以发现它的成绩是可圈可点的：在开源社区的建设方面，腾讯TDesign依然抱着为社区贡献价值的初心，不断向一个充满活力的高质量开源社区前进。据统计，上半年， TDesign的投稿人有280人，其中17？核？贡献者47？GitHubstar4k.