在 6 月 28 日的首屆 Techo Day 騰訊技術開放日上，騰訊發布了壹系列“輕量級”產品，將騰訊多年自研產品的底層能力釋放給了開發者。
正如騰訊雲高級副總裁 & CTO 王慧星，在前不久的騰訊 TDesign 技術生態日提到的那樣：“自騰訊確立了開源協同，自研上雲的技術戰略，成立了十大技術領域委員會，推出了眾多 PaaS 能力，並將這樣的能力放在雲上，實現對內部和外部用戶的統壹服務。”
而騰訊設計雲旗下的企業級產品設計體系騰訊 TDesign 正是這樣壹款產品，其也在首屆 Techo Day 騰訊技術開放日活動中，發布了新的產品動態。據了解，目前騰訊 TDesign 的大部分組件已經完成了內測版本的發布， Vue 2、Vue 3、React 和移動端 Vue 3 也已經發布了公測版本和候選版本。與此同時，Augular、Flutter 、taro 等熱門技術棧也在開發的行列當中。
如果要回溯騰訊自研 UI 組件庫的緣由，這或許要先了解下前端領域的發展史。
縱覽底層的前端框架領域，先是經歷了 JQuery 壹統江湖的時代，而後過渡到了 MVVM 框架成為主流的時期。目前，Vue、React 以及 Angular 則成為了前端開發人員使用最多、最廣的底層框架。可以看出，業界並沒有完全占據主導地位的前端開發框架，這也就導致前端技術團隊在叠代技術棧時，往往存在較大的切換成本，跨團隊***享前端資產時也會遇到技術棧差異的壁壘。
此外，由於組件庫和團隊技術棧存在壹定耦合性的關系，對於很多企業中後臺系統這樣的弱設計風格場景，我們可以根據整個棧的風格，大致推測出這個項目使用了哪種組件庫。例如，前端團隊選擇了 React 開發框架，大概率會用 AntD 組件庫；使用 Vue 開發框架，則大概率會直接用 iview-admin 頁面模板。這樣壹來，技術棧的差異不僅會導致整個組件庫的選型受到壹定限制，還會讓對外曝露的產品體驗存在較大的偏差。
因此，在產品體驗、開發效率與設計效率等因素的驅動下，騰訊通過開源協同的方式，與多個業務團隊***建了企業級設計體系騰訊 TDesign ，通過提供復用性的設計體系，為設計研發各個流程環節提供需要的設計和研發等解決方案。
在代碼組件庫中，騰訊 TDesign 基於業界實際的使用需求，已經覆蓋了 Vue、Vue Next、React 等主流的前端開發框架，目的在於讓公司內外部使用的同學都可以根據自身實際需求，選擇對應的組件庫產品，不再受技術選型的限制。當項目同時有桌面端和移動端使用需求的時候，騰訊 TDesign 還可以統壹產品在兩端上的業務體驗。
從另壹個角度來看，如果沒有統壹的 UI 組件體系，UI 設計師的工作效率同樣是大打折扣的。在“騰訊前端通用 UI 組件庫技術生態日”活動中， 騰訊用戶研究與體驗設計部總經理陳妍說道：“如果沒有騰訊 TDesign 這樣的 UI 組件庫，設計師是最大的受害者，因為我們的工作需要不斷的重復，沒有辦法把時間節省下來做更加有價值的事情。”
基於設計師的痛點，騰訊 TDesign 目前也提供了 Figma、Sketch、Axure 等設計資源以及 Sketch 設計插件，讓設計和代碼能夠無縫銜接，使設計資源分配到必要的環節。
既然騰訊 TDesign 選擇了支持各種技術棧的原生開發，就不可避免地會遇到幾類問題。例如，UI 組件庫怎麽保證與技術棧產物壹致性？交互和 UI 實現怎麽保持壹致？組件 API 怎麽保持壹致？官網體驗與用戶的實際使用如何保持壹致？
據騰訊 TDesign 團隊透露，雖然業界基於上述挑戰已經有幾種不同實現的方式，但其各有優劣：
壹種方案是基於 Web Components 做壹個組件，將其使用在各個框架當中，但 Web Components 方案的優勢與具體實現框架沒有太大關系，因為是由瀏覽器原生支持，其最大的問題還是瀏覽器的兼容性，部分瀏覽器可以通過 polyfill 解決，但是有些政企瀏覽器的兼容性依然是不可小覷的問題。
另壹種方案是直接將壹份 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 做 review 時，有任何更改會同步到各個技術棧實現的倉庫。
用戶實際使用與官網體驗保持壹致
為了讓用戶的實際使用感受與官網體驗保持壹致，騰訊 TDesign 做了壹層官網***同的架構，目前所有的組件文檔包括文字部分，以及我們要展示的組件 Demo。各個端實現時，會各自引入壹個 Web Components 實現官網的公***部分，通過統壹的 Markdown 解析工具，最終解析出來的棧點就會完全壹樣。
各個技術棧產物的 UI 和交互保持壹致
除了要保證組件 API 壹致，還要保證各個技術棧的產物裏 UI 和交互都要完全壹樣，這裏 TDesign 做了兩件事情：第壹，以 TDesign Token 貫穿設計開發流程，從最初設計師提供的設計稿，到組件庫裏代碼的實現變量，壹直到最終組件庫裏面 NPM 包產物，每個變量都有壹壹對應的關系；第二，抽取壹個獨立的倉庫，將每個組件都獨立維護在 TDesign-common 倉庫，通過 Submodule 的方式引入到實現倉庫裏。當 UI 需要調整的時候，直接在獨立的庫裏修改，再同步到各個技術棧實現的倉庫，最終保證整個 UI 和交互在各個技術棧上面實現完全壹樣。
部分組件代碼復用
除了 UI 相關實現代碼做到了各技術棧復用，騰訊 TDesign 也參考了業界類似組件庫產品的實踐， 探索 了壹些代碼邏輯復用的方案：壹些與技術棧無關的組件抽象類，也抽取到了 TDesign-common 倉庫中；合理分層組件實現，通過 Hooks 和 Composition API 來跨技術棧復用部分代碼實現。
據了解，當前騰訊 TDesign 在內外部已經有了比較廣泛的應用基礎，騰訊內部在積極推動各個業務統壹到 TDesign，也支持了多個領域和行業外部項目落地，並從中孵化出了多個行業組件庫。這些組件庫也將在未來逐步開源，持續支持各行業領域的系統建設。
而當我們開始回溯騰訊 TDesign 自開源以來的歷程，可以發現其取得的成績已經可圈可點：在開源社區的建設方面，騰訊 TDesign 仍然秉持著為社區貢獻價值的初心，不斷向有活力、高質量的開源社區進階。據統計，上半年 TDesign ***有 280+ 貢獻者，其中外部 17 ，核 貢獻者 47 ，GitHub star 4k+。
展望未來，騰訊 TDesign 還將繼續圍繞著兩個既定目標邁進：
第壹，讓更多人使用騰訊 TDesign。後續組件庫各技術棧將發布 Stable 版本，並針對移動端開展專項優化，以確保提升組件質量和用戶使用體驗。為了最大化提升設計師的工作效率，還將提供 模板、移動端 Figma UIKit Variant（設計可配置能 ）等設計資源，並建設物料市場，承載更多的 業組件和模板資源。除此之外，TDesign 還計劃支持國際化以及無障礙適老化的適配；
第二，建設更有活 、更 質量的開源社區。為了幫助更多從業者了解企業級設計體系 騰訊 TDesign，社區後續計劃沈澱、總結設計體系和組件庫專業 章 / 課程。另外，為了吸引更多外部開發者加 貢獻，透明化內外部協作進度，開源社區將優化開發者的招募和激勵機制。
談及未來的發展規劃，騰訊 TDesign 團隊在接受 InfoQ 采訪時表示，未來除了會支持現有的前端技術棧，還將協同社區的力量推出 Web components、Flutter 等更多技術棧產品，服務於公司內外使用者。同時，也期待更進壹步復用跨框架實現的代碼，在降低維護成本的同時，不顯著額外提升參與貢獻的門檻。
作為騰訊設計雲的關鍵產品，騰訊 TDesign 的誕生便是為了讓 UI 組件庫擺脫技術選型的影響，讓其回歸到前端基礎設施的地位上來。事實證明，在壹步步的叠代與優化之下，騰訊 TDesign 已經逐步地將開源協同能力滲透給了更多企業。
與此同時， 騰訊用戶研究與體驗設計部總經理陳妍還在接受 InfoQ 采訪時透露：未來，騰訊設計雲將繼續在設計資產、設計協作效率發力，針對圖標庫、設計資產開源平臺以及智能設計工具進行叠代升級。目前，騰訊設計雲已經初步完成平臺建設階段，後續騰訊設計雲將逐步向內容建設方面進階。
我們也堅信，今後騰訊設計雲在實現高效設計、輕松協同目標的過程中，也將邁出更加堅實的壹步。