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

6月28日，首届TechoDay腾讯科技开放日，腾讯发布了一系列“轻量级”产品，将腾讯多年自研产品的底层能力释放给开发者。
正如腾讯云高级副总裁CTO王慧星，在前不久的腾讯TDesign技术生态日提到的那样：“自腾讯确立了开源协同，自研上云的技术战略，成立了十大技术领域委员会，推出了众多PaaS能力，并将这样的能力放在云上，实现对内部和外部用户的统一服务。 ”
腾讯设计云的企业产品设计系统腾讯TDesign就是这样一款产品，它还在首届TechoDay腾讯科技开放日发布了新的产品趋势。据了解，目前腾讯TDesign的大部分组件已经完成了测试版的发布， Vue2、Vue3、React、mobileVue3也发布了测试版和发布候选。同时， Augular、Flutter、taro等热门技术栈也在开发中。
避免重复造轮子
如果要追溯到腾讯自研UI组件库的原因，可能需要先了解一下前端领域的发展历史。
看最下面的前端框架领域，先经历了JQuery一统江湖的时代，再过渡到MVVM框架成为主流的时期。目前Vue、React、Angular已经成为前端开发者使用最广泛的底层框架。由此可见，前端开发框架在业界并不完全占优，导致前端技术团队在技术栈迭代时切换成本较高，跨团队共享前端资产时会遇到技术栈差异的壁垒。
另外，由于组件库和团队技术栈的耦合关系，对于很多企业的后台系统等弱设计风格的场景，我们可以根据整个栈的风格大致猜测出这个项目使用的是哪个组件库。比如前端团队选择了React开发框架，大概率会用到AntD组件库；如果使用Vue开发框架，大概率会直接使用iview-admin页面模板。这样一来，技术栈的差异不仅会限制整个组件库的选择，还会使暴露在外界的产品体验产生较大偏差。
因此，在产品体验、开发效率、设计效率等因素的驱动下，腾讯通过开源协作，与多个业务团队共同建立了腾讯TDesign这一企业级设计系统。通过提供可重用的设计系统，腾讯可以提供必要的设计和研发；设计和研发的每个过程的解决方案；D.
在代码组件库中，腾讯TDesign已经覆盖了Vue、VueNext、React等主流前端开发框架。基于行业的实际需求。目的是让公司内外使用的同学都能根据自己的实际需求选择相应的组件库产品，不再受技术选择的限制。在项目同时有桌面和移动使用需求的情况下，腾讯TDesign还可以统一两端产品的业务体验。

文章图片
另一方面，如果没有统一的UI组件系统， UI设计师的效率也会大打折扣。在“腾讯前端通用UI组件库技术生态日”活动中，腾讯用户研究与体验设计部总经理陈妍说道：“如果没有腾讯TDesign这样的UI组件库，设计师是最大的受害者，因为我们的工作需要不断的重复，没有办法把时间节省下来做更加有价值的事情。 ”
基于设计师的痛点，腾讯TDesign还提供了Figma、Sketch、Axure、Sketch设计插件等设计资源，让设计与代码无缝对接，将设计资源分配到必要的环节。
维护跨技术栈产品的挑战与解法
既然腾讯TDesign选择了支持各种技术栈的原生开发，那么必然会遇到几种问题。比如UI组件库如何保证与技术栈产品的一致性？如何与UI实现保持一致？如何保持API的一致性？官网体验如何与用户实际使用一致？
根据腾讯的TDesign团队的说法，尽管业界已经基于上述挑战实现了几种不同的方式，但每种方式都有自己的优缺点：
一种方案是基于Web组件制作一个组件，并在各种框架中使用。但Web组件方案的优势与具体实现框架关系不大，因为它是浏览器原生支持的，其最大的问题是浏览器兼容性。部分浏览器可以通过polyfill解决，但部分政企浏览器的兼容性仍然是一个不可小觑的问题。