天猫团队开源跨平台模块化 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]

目录
相关文章
|
10月前
|
开发框架 前端开发 JavaScript
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发一
本文介绍了方舟开发框架(ArkUI)及其两种开发范式:基于ArkTS的声明式开发范式和类Web开发范式。ArkUI是用于构建HarmonyOS应用界面的UI框架,提供极简UI语法和基础设施。声明式开发范式使用ArkTS语言,以组件、动画和状态管理为核心,适合复杂团队协作;类Web开发范式采用HML、CSS、JavaScript三段式开发,适用于简单界面应用,贴近Web开发者习惯。文中还概述了两者的架构和基础能力,帮助开发者选择合适的范式进行高效开发。
326 15
|
10月前
|
编解码 前端开发 Java
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发三
本文介绍了基于声明式UI范式的图形绘制与动画效果实现方法,涵盖绘制图形、添加动画效果及常见组件说明三部分内容。在绘制图形部分,详细讲解了如何通过Circle组件为食物成分表添加圆形标签,以及使用Path组件结合SVG命令绘制自定义图形(如应用Logo)。动画效果部分则展示了如何利用animateTo实现闪屏动画,包括渐出、放大效果,并设置页面跳转;同时介绍了页面间共享元素转场动画的实现方式。最后,文章列举了声明式开发范式中的各类组件及其功能,帮助开发者快速上手构建复杂交互页面。
362 11
|
6月前
|
存储 开发者 容器
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
本文介绍了ArkTS语言中的Class类、泛型、接口、模块化、自定义组件及状态管理等核心概念,并结合代码示例讲解了对象属性、构造方法、继承、静态成员、访问修饰符等内容,同时涵盖了路由管理、生命周期和Stage模型等应用开发关键知识点。
483 1
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
|
9月前
|
JavaScript 前端开发 UED
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发四
本文介绍了Web组件开发与性能优化的相关内容。在Web组件开发部分,涵盖创建组件、设置样式与属性、添加事件和方法以及场景示例,如动态播放视频。性能提升方面,推荐使用数据懒加载、条件渲染替代显隐控制、Column/Row替代Flex、设置List组件宽高及调整cachedCount减少滑动白块等方法,以优化应用性能与用户体验。
310 56
|
9月前
|
编解码 UED 开发者
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发之常见布局
本文主要介绍了自适应布局与响应式布局的相关内容。自适应布局部分涵盖线性布局、层叠布局、弹性布局和网格布局,详细说明了各布局的特性及使用方法,例如线性布局中的排列、拉伸与缩放,弹性布局的方向、换行与对齐方式等。响应式布局则重点讲解了栅格系统和媒体查询,阐述如何通过栅格组件和媒体查询条件实现不同设备上的适配效果。这些技术帮助开发者灵活应对多尺寸屏幕的设计需求,提升用户体验。
454 55
|
10月前
|
存储 开发框架 API
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发二
本文详细介绍了基于声明式UI开发的健康饮食应用的设计与实现过程。内容涵盖从基础环境搭建到复杂功能实现的全流程,包括创建简单视图、构建布局(如Stack、Flex)、数据模型设计、列表与网格布局构建,以及页面跳转和数据传递等核心功能。 本文通过实际案例深入浅出地解析了声明式UI开发的关键技术和最佳实践,为开发者提供了宝贵的参考。
379 14
|
9月前
|
JavaScript 前端开发 开发者
09.HarmonyOS Next数据驱动UI开发:ForEach与动态渲染完全指南(上)
在现代前端开发中,数据驱动UI已成为主流开发范式。HarmonyOS Next的ArkTS语言和声明式UI框架完美支持这一理念,使开发者能够以更高效、更直观的方式构建复杂应用。
259 1
|
10月前
|
自然语言处理 安全 JavaScript
HarmonyOsNEXT【ArkUI超全解析】新手必看的方舟UI框架指南!
本文是HarmonyOS NEXT方舟UI框架新手指南,涵盖ArkTS开发核心知识点。从UI与组件基础概念到声明式开发优势,再到ArkTS代码实战,包括组件创建、属性设置、事件绑定等。通过实例解析自定义组件开发流程,提供避坑技巧与代码风格建议,助你快速掌握ArkUI框架精髓,轻松构建高效、美观的HarmonyOS应用界面。适合初学者及希望转型声明式开发的开发者学习参考。
|
11月前
|
人工智能 物联网 编译器
【01】优雅草星云物联网AI智控系统从0开发鸿蒙端适配完成流程-初始化鸿蒙编译器deveco studio项目结构-UI设计图切片下载-优雅草卓伊凡
【01】优雅草星云物联网AI智控系统从0开发鸿蒙端适配完成流程-初始化鸿蒙编译器deveco studio项目结构-UI设计图切片下载-优雅草卓伊凡
305 11
【01】优雅草星云物联网AI智控系统从0开发鸿蒙端适配完成流程-初始化鸿蒙编译器deveco studio项目结构-UI设计图切片下载-优雅草卓伊凡

热门文章

最新文章