Tangram
是阿里出品、用于快速实现组合布局的框架模型,在手机天猫 Android
& iOS
版 内广泛使用Tangram
模型 进行全面介绍,希望你们会喜欢。作者:Carson_Ho
链接:https://www.jianshu.com/p/b339c2d2d500
在讲解 Tangram
模型 前,我们先来搞懂一个问题:为什么要使用 Tangram
模型
相应的解决方案的特点如下:
Native
的方案,不作过多解释WebView
性能的提升 和 移动端设备硬件的发展,现阶段 HTML
加载速度 & 渲染速度慢的缺点将会逐渐被完善,对于临时性业务的需求能够满足但对于常规业务,至今还没盖棺定论的方案,所以才会存在两种方案:WebView+HTML
& Dynative
方案。但这两种方案是存在问题的:
WebView+HTML
方案:随着WebView
性能的提升 和 移动端设备硬件的发展,HTML加载速度 & 渲染速度慢的缺点将会逐渐被完善,所以常规业务需要的性能还是难以满足。Dynative
(如RN
、Weex
):虽然性能能满足,但由于该技术还不成熟,稳定性差,且开发难度大,所以对于常规业务还是非常谨慎的使用。Tangram
正是解决 常规业务 的方案:在性能、稳定性 & 开发周期 取得较好平衡的一种折中方案。
- 所谓概念模型,即只停留在定性分析的解决方案 & 思路,还未真正具体实现
Tangram
的具体实现是一种Native
(iOS
&Android
)的快速实现 组合布局 的界面开发框架,下面会详细说明
就像使用七巧板 通过现有板块 快速拼凑出 多样的形状一样。
Tangram
模型目前已在手机天猫 & 淘宝 Android 版内广泛使用
在性能方面,希望 贴近Native开发,重点:页面渲染效率 & 组件回收复用
VLayout
和 LazyScroll
两个基础组件,通过一个双索引可见区域组件发现算法,实现了跨父节点组件的高效回收和复用。根据 业务类型 将组件 封装成 能承担一定业务能力的复用单元。
如一种瀑布流布局
提供 控制台 让业务方可直接控制基于Tangram的产品,如调整页面布局,切换页面数据等。
- 即 页面的排版布局 可 通过后端数据的下发来动态调整
- 服务网关的建设目标是最大程度的降低业务创建Tangram页面的压力和成本。
但这种动态化 是 面向粗粒度组件:通过 布局+组件的形式搭建整个页面,而不是一般从 **基本的UI元素(如按钮blabla)**搭建页面。
- 其实也很好理解,业务人员需要用到的是 能承担一定业务能力的“业务布局”,而不是单一UI元素(按钮、文本blabla)
- 好处:使用成本低,上线周期短
采用插件化扩展
内部本来就注册在框架里 & 外部也可注入扩展模块
对于业务开发,存在多端表现不一致的问题。为了解决该问题,以前需要通过复杂的网关逻辑来兼容多端逻辑不一致情况。
为了防止该问题,对于Tangram,预先制定了两个开发原则:
Tangram
的架构主要由三部分组成:
Tangram SDK
Tangram AC
Tangram OP
每部分的具体细节如下:
本文主要讲解的是用于客户端页面渲染的Tangram SDK
。
在讲解架构前,我们需要先了解Tangram
的一些模型知识。
一个页面实体由3部分组成:页面(Page)、卡片(Card) & 组件(Item)
具体如下图:
之间的关系:组件 构成 卡片、卡片 构成 页面。
对于Tangram
,他的页面概念模型可用 树状模型(3层结构) 表示:
下面主要讲解 三层结构中 的 卡片 & 组件。
- 即对组件进行 组合 & 布局
- 只声明布局方式,不提供布局细节
关于四个部分的细节,我将在Tangram具体使用时进行介绍
日常使用的普通的
View
,如按钮、图片等等
作用:负责UI元素展示 & 业务逻辑
组成元素:视图模型(ViewModel
) & 样式(Style
)
视图模型:所有组件对有一个统一视图模型(ViewModel
),主要是定义了生命周期事件:
init()
bind()
unbind()
关于 组件的基本样式 主要包括:组件背景、外边距、内边距、组件的宽高比等等。具体细节会在具体使用时介绍。
Tangram
的结构主要由5部分组成,如下图:
当页面数据传入时:
- 解析过程会根据之前注册过的卡片、组件类型来解析
- 未定义的数据将会被抛弃
- 布局框架 根据卡片提供的布局信息进行布局
- 布局框架 根据组件提供的组件信息获取组件实例,布局到布局容器里
Tangram
的核心功能Tangram
采用 插件化形式 进行扩展:Tangram
概念模型基本架构 & 原理Android
:采用基于RecyclerView
+自定义LayoutManager
的实现方案具体请看文章:Android开源库V - Layout:淘宝、天猫都在用的UI框架,赶紧用起来吧!
iOS
:采用 基于自定义的 LazyScrollView
的实现方案【Android 详细知识点思维脑图(技能树)】
其实Android开发的知识点就那么多,面试问来问去还是那么点东西。所以面试没有其他的诀窍,只看你对这些知识点准备的充分程度。so,出去面试时先看看自己复习到了哪个阶段就好。
虽然 Android 没有前几年火热了,已经过去了会四大组件就能找到高薪职位的时代了。这只能说明 Android 中级以下的岗位饱和了,现在高级工程师还是比较缺少的,很多高级职位给的薪资真的特别高(钱多也不一定能找到合适的),所以努力让自己成为高级工程师才是最重要的。
这里附上上述的面试题相关的几十套字节跳动,京东,小米,腾讯、头条、阿里、美团等公司19年的面试题。把技术点整理成了视频和PDF(实际上比预期多花了不少精力),包含知识脉络 + 诸多细节。
由于篇幅有限,这里以图片的形式给大家展示一小部分。
详细整理在GitHub,欢迎star下载;
Android架构视频+BAT面试专题PDF+学习笔记
网上学习 Android的资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。希望这份系统化的技术体系对大家有一个方向参考。