天貓團隊開源跨平台子產品化 UI 界面開發架構 Tangram

tangram，七巧闆，是天貓團隊剛剛開源的跨平台子產品化 ui 界面方案。據悉，之是以命名為 tangram ，是希望它能像七巧闆一樣可以通過幾塊積木就搭出豐富多彩的界面。

什麼是 tangram

tangram 不僅僅是一個 native（ios & android）的界面開發架構，而是從日常工作中沉澱出的一套界面解決方案，涵蓋了 native sdk、gui操作台、後端邏輯容器、元件庫機制的一整套方案。

tangram 從手機天貓 - 首頁方案抽象而來，是面向元件的界面方案，是開發團隊不斷權衡性能、穩定性、開發效率、靈活性和動态性多方面表現的結果。除了手機天貓首頁外，還支撐了天貓 app 中的天貓直播、我的天貓、猜你喜歡等多個業務，并且在阿裡星球等多個阿裡系 app 中有所應用。

tangram 關注的重點

tangram 關注三個重點：面向業務、多端一緻性和高性能。

1、面向業務

tangram 來源于多次試錯和方向的調整，最終站在業務角度出發，權衡多項技術名額的結果。是以面向業務是出發點，是整個 tangram 體系的最基本原則。

基于這個原則，在端上 tangram 始終堅持粗粒度元件。粗粒度意味着通用性和靈活性的下降，某種程度上還會對動态性造成影響，但在第2型業務中通用性、靈活性和動态性的需求是有節制的，在粗粒度上完全可以滿足業務需求。而且，粗粒度還具有使用成本低，性能更好等優勢。在端上重點精力則投入到提升元件庫複用度，布局容器群組件的豐富性，進而推動業務發展。

除了端上的工作，另一部分重點工作在控制台和服務網關的建設上。作為一個面向業務的方案，控制台是業務方和産品的接口，控制台的主要目标是讓業務方可以直接控制基于 tangram 建設的産品——調整頁面布局，切換頁面資料，等。服務網關的建設目标是最大程度的降低業務建立 tangram 頁面的壓力和成本。

2、多端一緻性

在多年的業務開發經曆中，屢次被多端表現不一緻的問題困擾。為了實作業務訴求，不得不通過複雜的網關邏輯來相容多端邏輯不一緻情況，以實作表現一緻。是以團隊制定了兩個 tangram 端開發原則：

任意新功能的提出都是不區分平台，在功能設計中必須同時考慮多端功能，具體的實作方案和邏輯必須多端統一 review 以保證多端表現一緻。

任意一端的變更都必須在改動前把方案同步給其他端，而且變更必須多端同步釋出。

3、高性能

在面向業務的原則之下，已經給高性能打下了一個良好的基礎。而在高性能的思考上重點基于頁面渲染效率群組件回收複用兩方面。

頁面渲染——為了提升渲染效率，tangram 将在視圖渲染之前把大量的計算工作在 vm 中完成，并緩存在 vm 組成的樹形結構裡。

回收和複用——tangram 在 android 和 ios 平台上分别開發了 vlayout 和 lazyscroll 兩個基礎元件，通過一個雙索引可見區域元件發現算法，實作了跨父節點元件的高效回收和複用。

此外，開發團隊還表示，目前已經完成了新版 tangram 2.0 的讨論，開始執行2.0版本的重構工作。在 tangram 2.0 中出于适應業務形态的變化，将對開源的 tangram 1.0 中基于布局群組件的二維結構進行進一步的抽象，用于支撐更複雜的流式布局。并且對于控制台和服務網關也将進一步更新，大幅提升新業務開發效率。在性能層面，對元件開發模型和渲染模式進行一次較大的更新，在渲染和滾動效率上将得到巨大提升。