Tangram – 开源、跨平台的模块化UI 框架

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 在 AndroidiOS 平台上分别开发了 VLayout 和 LazyScroll 两个基础组件,通过一个双索引可见区域组件发现算法,实现了跨父节点组件的高效回收和复用。

  此外,开发团队还表示,目前已经完成了新版 Tangram 2.0 的讨论,开始执行 2.0 版本的重构工作。在 Tangram 2.0 中出于适应业务形态的变化,将对开源的 Tangram 1.0 中基于布局和组件的二维结构进行进一步的抽象,用于支撑更复杂的流式布局。并且对于控制台和服务网关也将进一步升级,大幅提升新业务开发效率。在性能层面,对组件开发模型和渲染模式进行一次较大的升级,在渲染和滚动效率上将得到巨大提升。

未经允许不得转载:前端里 » Tangram – 开源、跨平台的模块化UI 框架