天猫团队开源跨平台模块化UI界面开发框架Tangram

【大咖・来了 第7期】10月24日晚8点观看《智能导购对话机器人实践》

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 中基于布局和组件的二维结构进行进一步的抽象，用于支撑更复杂的流式布局。并且对于控制台和服务网关也将进一步升级，大幅提升新业务开发效率。在性能层面，对组件开发模型和渲染模式进行一次较大的升级，在渲染和滚动效率上将得到巨大提升。