共建前端基础设施，解放设计开发生产力-孙哲原创

的各位伙伴大家好呀，然后我是来自腾讯的孙哲，然后也是T开源项目的PC的成员，那么今天我为大家带来的分建前设施解设计发这首先是T品，首先是一个简介绍，就是呃，其实很多人经常会问问这样一个问题，就是呃，为什么业已经有非常多的或者非常成熟的一些组件库的产品了，包括国内像呃，然后element UI，然后国外也有像material等等这样一些呃，大公司背书的一些呃。

相似的一些组件库的产品，我们为什么还要再去做另起要去做这样一个T的组件库的呃产品，嗯首先我们可的候我呃C的这种组么后，我们随各种MV迭然架开始我们不满去直接操纵，然通过些呃MP之类然一个呃前端业务逻辑的开发，但这样就带来一个问题，就是我们这个是来自于呃stalow的一个。

嗯，一个数据其实我们可以比较确的看到，呃是没有一个统一的前端技术站，呃，那么腾讯腾讯内部实没有一技术团队是据呃种需选的技术去做呃进行业务开发，呃那个那么这样就是其实会存在一些问题，各个的各个团队使用的开发技术架不一样，这个不仅仅会反映在我们跨团队技术共享方面，还会带来很多额外的体验的问题，嗯。首先我其实我我在从业很多中也过很多这种企业中后的系统，我们企业中后的项目，这种项目论来说应该是通用UI组件库最理想的一个呃落地的场景，因为这种这种呃因为这种需求下是没有强的UI的需求，甚至可能也没有一个专门的呃设计师角色来去参与的，我们直接去使用各类组件库产品的这种预设的模板项目，可以快速的去搭建起一个中后台项目的雏形，呃但是这样存在一个问题，就是各个组件其实背后呃背后都有各自的一个设计的风格，那么这些组件库可能大多只支持有限的呃几个前端的技术站，呃我很多，就是我很多时候再去看到很多呃这种企业中后台的系统的时候，呃，可以根据这整个站略的风格，大致就可以猜到这个，呃，哪个项目就用到了，使用了哪种技术站，就相当于组建库的这种选型和团队技术站的这种选择是存在一定的。

耦合性的关系的。嗯，就是我我整个团队技术站的这种差异，呃其实会呃导致我组件库的选型受限，然后最终导致我做出来的一些后台的一些产品体验是不一致的，那么我们呃在通过一些微前端的一些方案去做这种产呃产品的聚合，或者是呃公司同事再去使用我们产出的不同的一些业务线的产品的时候，会发现整体的呃这个公司产品体验是非常不一致的，因为他背后的呃整个组件库的设计体系是不一样的。

呃，那么根据这种需求呢，我们呃，其实腾讯之前的各个B和团队也都有各自的组产品，分别去支持了各自团队使用的像呃等等等等技术站，那么在过去的两年多的时间内，我们通过这种腾讯内部开源协作的方式，呃主要是协同了一些呃这些主要组件库的维护团队来一起去共建了T赞的这样一个产品。嗯，然后我们也是基于业界和公司内的实际的这种技术站的需求，呃针对于不同的呃像react，然后呃包括小程序的一些技术站提供了对应的实验产品，基本上覆盖了就是业界比较主流，至少国内业界比较主流的这个技术站，呃并且在这个桌面端和移动端都有对应的呃适应的产品，整个设计体系是统一的，呃那么这样我们做的优势呢，是说能能够让公司内外部使用同学都可以根据自身的呃技术站的需要选择对应的组件库的产品，这个不受技术选型的限制。呃同时呢，当时呃如果你的项目有这种桌面端和移动端呃，小程序端这个同步去实现的需求的时候，呃再去用T产品的时候，可以直接去用到不同端的产品，这样可以做到整个我呃产品的产物在各个端上的业务体验是一致的。

嗯，那么T团队其实也投入了，呃在做这个组件库的过程中，其实遇到的最大的困难也是在去呃投入很多精力去完善不同的技术上，目的就是让呃UI组件库这样一个本的就是前端开发的一个底层依赖，摆这些技术选型的影响回归到它本来的呃这个前端基础设施的地位上来。

嗯。然后呃其实刚才讲了讲的内容主要是从前端的开发技术，技术站方面角度去讲，呃T我们为为什么要去做这样一个，其实在公司内部去做组呃这种发，然后到研发的流程来看，呃其实嗯在呃在整个开发实现的环节上，就是组组的开呃。嗯，然后我们我们的做法是说，其实是在公司内去找协同了几个比较大的设计师的团队一起去达成了这种建的共识，然后确立了一致的呃设计价值观，呃其实可以看到这份这套设计价值观的核心就是普世，呃它应该是这呃就设计体系，我们认为设计体系应该更多的从规范性、通用性方面去做考虑，尽量去做通用的规则和原则，而不去深入到的细节当中，这样便于我们整个的通用设计体系能够在不同的业务场景下面去呃做落做落地和演进。

呃，那么当然这个设计的价值观其实不仅仅是体现在呃这个。呃设计设计环节其实也是渗透在T组开发的个环节当中，呃我们对于整个通用U组件库的这种组量也好或者能好，其实是保持一个比较制的一个呃一个一个一个态度的。比如说我们每次去呃考虑是否要新增新增某一类组的时候，都需要整个PPC队做，嗯们是否为个组增种功能么？应个A时用性简，然后尽量过A组展能力满足自需是的增能力。当然这里也有一个问题，就是其实大家再去做呃这种组件开发，就日常的业务开发过程中，通用组件其实是很难完全去覆盖呃所有的这种业务组业呃组件的使用使用的场景的，呃业务团队也确实确实需要一些封装以后的组组件的功能，它的功能可能是更丰富的，但是。

可低这种通用性的呃要求，呃这种需求应该怎么去满呢？然后我们这边也是做了一个呃，我们希望是说呃我们现在其实做法是说T团队来去维护一个通用的组件库，然后各个业务呃呃各个领域的这种业务团队再去封装自己的自的业务组件啊，页面模板等等这种资源我们在有一呃我们可能后面会在一个物料市场的呃这种场景下面统一去做这种呃对外的展，对外的展示，通过这种不同的标签来去区分不同的资源类型，呃来去呃做在在这种物料市场里面去出更优秀的呃社区的产品。

嗯，然后为了支持这种组建的二次的定制，然后我们也开放了组建全局样式定制的能力啊，包括一些官网上一些可视化，呃，可视化的配置的能力，然后能够方便一些业务的组件，能够做22次的开发。然后通过这种呃，通用组件和业务组件的区分呢，然后我们可以去解决组件通用性和业性方面的一些，嗯，怎么就是一些构性的一些，就是由这种通用组件满足用的需求的目标，是达成这个统一体验的目标，然后行业组件呢，能够满足特定行业领域的需求，它更用，但是它的通用性的呃，适当的降低，呃通过这种通用组，通用组件和行业组件的搭配呢，我们能够尽量减少业务团队呃重复的去做这种组件的开发和封装，嗯。

嗯，然后包括公司内部其实也有很多这种呃已有的这种呃组建库团队，然后我们是通过公司开源协同的方式，协调这些已经存在的各个团队一起来共建这个T能力，嗯，然后我们各个组呃各个原先各个组建仓库的这种主要的维护者，可能都在我们的PMPC和核心贡献者团队里面一起去决策T的呃发展方向和日常运作。然后在已有组件库中可能存在一些通用性的组件，我们可能会一起贡献到TZ，那么原有的组件库服务的业务领域，嗯，那么可能会做一个follow TZ通用呃设计体系的一个动作，然后在自己自身原有组件库的基础上，呃构继续去构建一些行业组件的行业的一些组件库，然后满足呃，然后跟我们的T通用组件一起来去搭配，满足业务的这种使用的需求。

嗯，那么基于其实基于这个同样的一个一个思考，就是我们在技术端呃技术站上做了很多的一些呃对应的产物的适呃适配，然后我们的呃设计师或者产品经理其实也面临多种多样的这种设计生产力工序的选型的难题，那么针对这种情况，我们也提供了更多的设计生成工具的支持，能够尽量的引到更多设计师去，呃在开发的前一个环节就引入这种T组件库，能够保证我们呃整个公司的一个呃产品是一个体验是统一的。嗯，那么一下，其实我一架支持可能不同的公司的面临的情况会不太一样，像我我了解到的很多业的呃这种公司也会去做一些统一技术，技术站方面的，呃这种动作就是可能整个公司我都是统一用或者是用的技术站，呃但是对于呃像腾讯或者其他的一些公司其实比较难去做这种，那么我在我们再去做这种推这种设计和呃设计体系的呃体系的时候，就可能要去考虑这种多架的支持的问题，然后再一个我们整个设计体系应该是从普啊通用方面来去做考通过展的方去能够的在一些业业场景下面去落地。

嗯，然后最后一项的话就是可能我们要去跟呃公司内的已有的或者说其他的一些组件库类组件库产品团队一起去做一些呃开源的协作，大家一起去共建这个能力。呃，那么接下来的其实一个问题就是我们怎么去维护这个技术站的呃组件库的产品，其实这个是比较难的，我们也考在之前也考虑了，也调研了很多这种组件业界已有的一些实现，比如像呃，Wes，呃，它的优势呢，可能是嗯架无关的，然后。

浏览器原也原生支持的，嗯但呃但可能的一个问题是说，它可能是未来的一个趋势，但它还不是当下的一个选择，呃就包括主要体现在可能在开发体验上，可能还没有这种或react相关的一些生态丰富，包括器兼容性，可能在某一些呃啊或者相关的一些里边是不太好去做，不太好去解决的，嗯，那么包括还有一些其他的呃实现的方案，包括像这种呃代码转换的方案，可能我直接写一份呃代码，我可能直接把它转成view或者是小程序啊，或者是Fla这种方式来去做到维护一份代码，然后多技术占支持。嗯，这个其实也是，呃，但它的缺点其实也比较明显，就是我们通过开源方式参与到T贡献。

嗯，代码的同学其实大部分时间都是直接在用view或者react去开发自己的业务的，那么推广一种新的代码会呃比较明显的提高贡献者的一个学习的门槛，因为相当于呃做了一个新的一个框架，它既不是view也不是react，然后嗯贡献者的减少和社区的不够活跃，这可能会意味着我们的整个的开源项目寿命可能不会呃特别久。那么额外的一个问题是说，呃就是这种转换后的代码的可读性和稳定性其实是不太能够保障的，就是呃组件库作为一个前端比较底层的依赖，呃它在稳定性或者说呃就是这个可可维护性上面应该的要求是会更高一些，这个代码转换的方案可能会更适合落地在一些呃，就是呃业务业务的呃整个APP的一个开发上面，它很难，它不太适合去做到直接做到这个组件，组件库这样一个底层的依赖上。那么最终我的选择是呃在统一这个各个测试框架或者是一些技术选型的基础上，包括一些目录结构的呃统一上，然后各个技术站的仓库，其实呃都各自选择了view react小程序去直接做这种啊原生的开发我没有去做这种呃，这种代码转换的呃代码转换的方式来去做维护呃但这个问题就在于我们怎么去保证各个技术致三个方面主要互致括组A格玛里边的一些呃变量也好，是其实是跟我们组件里边的呃，就是样式的一些呃一一些变量，其实是存在这种一一对应的关系的。

那么最终我们可以在这个做到的产物，就是说我们可以通过一个可视化的编辑，能够影响到全局的，调整全局的一个呃样式，这个是嗯，我们在开发和设计，设计一起去，呃就是打通的一件事情。

括个的方式，把这样1C接自仓库里面去实，那么可能遇到这种UI，其实们只呃一的在这个仓去做，然后到各个仓就好了，各个仓里是不包括这个UI部分的，这码样做仓U。嗯，然后这个里边有一个我们整个组件库的整个组件开发上线的一个流程，其实在这里面就是有有非常多的呃，开发和设计一起同的一些环节，然后我们可以通过这种前期的这个的一些设计，能够让大家的设计和开发不同的角色组评审的一个环节。

嗯，那么在这个环节里边。嗯，我们实体现了一个思就是的计，我们这次A审邀互U成件的，呃，就是API设置的用性啊灵性是否均去做一些评，那么经过这样一个评审会，我们评估有有了结果以后，我们会会把它录入到一个API维护的管理平台上面。嗯，那么这个管理平台会，呃，通过就是根据我们前期讨论的一些结果，直接去生成一些，呃，通过脚本直接去生成，我们A直接根据已经生成的组件的定义的相关文件去开发，这样可以，其实可以保证我们各个技术站的仓库的开发者都可以，呃都是直接去实现同一同样的一份API，而不会出现一些API实现不太一致的情况。

嗯，那么最后其实是一个我们要去保证呃就是我们用户的实验者，用户其实再去用T组件的时候，呃第一个的首先响呃最主要道其实通过官网上面一些呃DEMO或者是来去直接去体验呃组件库的一些特性的，那么我们其实各个仓库都各自维护了一个呃一个站点，那么这些站点怎么去实现这种呃这种UI上或者说呃UI上或者说呃DEMO体验上的统一的，然后我们是相当于是用web component去去实现了一个呃官网的公共部分，然后包括一些嗯左边这个地方其实是我们日常会做的一些呃，就是用的一些文档，然后里面包含了包含了一些组件的DEMO，然后我们会通过这个web，然后会通过一个markdown的一个re，统一的render，然后去把它生成到不同端下面的，呃，这个组件的一些DEMO的页面，这样能够保证虽然是大家比如说都是会看view或者不。

或者react不同的这个T，但是它整个体验是呃，非常一致。呃，刚才说了，我们其实并没有选择一个呃做中间层代码的一个方案来去做呃代码的复用，但是我们其实也在尽量去考虑呃，呃能够用尽量多的这个代码，嗯在这过程中，我们其实对这个整个组件库做了一个呃分层的一些治理，就是在呃在这个层这边，我们可能会去呃，呃去抽，抽取一些组件交互的一些逻，这些逻辑其实是跟呃，就是呃跟组的U也好，或者说。

一些代码的复用，因为呃我们现在看到的一些一个势是说OS未来呃这种呃复用呃也好，就是业务的逻用也好，一个更呃好，更呃更更更好的一个方式，呃我们也看到就是和至少这两个技术站现在是有一些互相借鉴，或或者一些一些技术发展上的一些趋同的一些呃一些一个一个发展的趋势，所以说我们现在在整个框架底层去封装了一些基于呃这种compos API的一些复用，这个主要是要兼顾到呃技术的复杂度和可复用的一些要求，嗯。

呃，然后这边总结一下的话，我们怎么去维护一个跨技术站的产品，其实主要是呃，一个是去打通设计和开发的一个流程，大家不要在认知上有一些差一组件同去考虑，呃，尽量去做一些跨技术站的代码复用，然后我们的UI也可以直接去复用。嗯，那么我们最终现在的一个呃这个这个这个呃一个进展呢，是说我们现在其实已经覆盖了像view，然后移动端也有更多的像微信小程序程序啊，然后包括一些端的一些传统技术站的一些支持，那么后续我们也会也会支持更多的一些呃技术站产品，包括像然后呃可能还会有其他呃其他这种大前端领域的，就是一些组，一些组组件开发的，一些业务开发的一些主要的前端技术站，嗯也这个也其实也非常欢迎大家一起来去呃参与共建，因为其实呃并没有哪个团队呃是呃同时在去用所有的一些技术站，技术站的我们非常呃希望大家能够呃根据自己的这种。

可能自己的一些技术的实践来去参与到我们的建的活动中来，然后包括我们现在其实呃，从2020年可能我们这个整个项目正式启动，然后包括一直到2021年底我们正式对外开源，呃其实也走过了比较长的一段，然后我们接下来还会去做很多组件库，功能特性的呃，一些完善，嗯，然后也非常希望大家能够一起参与到工建活动中来，然后我们的目标其实是想继续后续能够成为公司或者业界前端或者设计领域呃，基础设施的一个重要的一环，能够做一个比较完善的生态。

然后我这次的分享主要就是这些，谢谢大家观看。