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

本文来自开源中国社区 [http://www.oschina.net]

目录
相关文章
|
11天前
|
C# 开发者 Windows
基于Material Design风格开源、易用、强大的WPF UI控件库
基于Material Design风格开源、易用、强大的WPF UI控件库
|
16天前
|
前端开发 编解码 数据格式
浅谈响应式编程在企业级前端应用 UI 开发中的实践
浅谈响应式编程在企业级前端应用 UI 开发中的实践
17 0
浅谈响应式编程在企业级前端应用 UI 开发中的实践
|
1月前
|
XML 前端开发 JavaScript
深入介绍 UI5 框架里 Smart Field 控件的工作原理
深入介绍 UI5 框架里 Smart Field 控件的工作原理
18 0
|
3月前
|
API C# 开发者
一款开源免费美观的WinForm UI控件库
一款开源免费美观的WinForm UI控件库
276 9
|
2月前
|
Linux C# Android开发
.NET Avalonia开源、免费的桌面UI库 - SukiUI
.NET Avalonia开源、免费的桌面UI库 - SukiUI
|
12天前
|
XML 开发工具 Android开发
构建高效的安卓应用:使用Jetpack Compose优化UI开发
【4月更文挑战第7天】 随着Android开发不断进化,开发者面临着提高应用性能与简化UI构建流程的双重挑战。本文将探讨如何使用Jetpack Compose这一现代UI工具包来优化安卓应用的开发流程,并提升用户界面的流畅性与一致性。通过介绍Jetpack Compose的核心概念、与传统方法的区别以及实际集成步骤,我们旨在提供一种高效且可靠的解决方案,以帮助开发者构建响应迅速且用户体验优良的安卓应用。
|
1月前
|
Linux API Android开发
Airtest UI自动化框架 v1.1.4
Airtest UI自动化框架 v1.1.4
25 3
|
2月前
|
前端开发 JavaScript
响应式UI框架
响应式UI框架
48 0
响应式UI框架
QGS
|
3月前
|
前端开发 数据可视化 Java
手拉手JavaFX UI控件与springboot3+FX桌面开发(下)
手拉手JavaFX UI控件与springboot3+FX桌面开发
QGS
58 0
QGS
|
3月前
|
前端开发
手拉手JavaFX UI控件与springboot3+FX桌面开发(中)
手拉手JavaFX UI控件与springboot3+FX桌面开发
QGS
86 0

热门文章

最新文章