- 技术 是用于 满足需求业务 的 解决方案,现有的需求业务可分为三类:基础业务、常规业务 & 临时性任务。具体细节如下:
1.2 问题
相应的解决方案的特点如下:
- 对于基础业务,采用
Native
的方案,不作过多解释 - 对于临时性业务,随着
WebView
性能的提升 和 移动端设备硬件的发展,现阶段HTML
加载速度 & 渲染速度慢的缺点将会逐渐被完善,对于临时性业务的需求能够满足
但对于常规业务,至今还没盖棺定论的方案,所以才会存在两种方案:WebView+HTML
& Dynative
方案。但这两种方案是存在问题的:
WebView+HTML
方案:随着WebView
性能的提升 和 移动端设备硬件的发展,HTML加载速度 & 渲染速度慢的缺点将会逐渐被完善,所以常规业务需要的性能还是难以满足。Dynative
(如RN
、Weex
):虽然性能能满足,但由于该技术还不成熟,稳定性差,且开发难度大,所以对于常规业务还是非常谨慎的使用。
1.3 解决方案
Tangram
正是解决 常规业务 的方案:在性能、稳定性 & 开发周期 取得较好平衡的一种折中方案。
2. 定义
- 是一种用于快速实现组合布局的框架模型
- 所谓概念模型,即只停留在定性分析的解决方案 & 思路,还未真正具体实现
Tangram
的具体实现是一种Native
(iOS
&Android
)的快速实现 组合布局 的界面开发框架,下面会详细说明
- 中文即七巧板,即该框架 提供一系列基本单元布局,通过快速拼装就能搭建出一个具备多种布局的页面
就像使用七巧板 通过现有板块 快速拼凑出 多样的形状一样。
3. 应用场景
- 常规业务 中 复杂的布局格式混排,如:浮动布局、栏格布局、通栏布局、一拖N布局、瀑布流布局,还可以组合使用这些布局
- 具体场景是:如电商平台首页、活动频道等等
Tangram
模型目前已在手机天猫 & 淘宝 Android 版内广泛使用
4. Tangram优点
4.1 高性能
在性能方面,希望 贴近Native开发,重点:页面渲染效率 & 组件回收复用
- 页面渲染:为了提升渲染效率,Tangram将在视图渲染之前把大量的计算工作在VM中完成,并缓存在VM组成的树形结构里。
- 回收和复用——Tangram在Android和iOS平台上分别开发了
VLayout
和LazyScroll
两个基础组件,通过一个双索引可见区域组件发现算法,实现了跨父节点组件的高效回收和复用。
4.2 面向业务
a. 组件业务化
根据 业务类型 将组件 封装成 能承担一定业务能力的复用单元。
如一种瀑布流布局
b. 动态化
提供 控制台 让业务方可直接控制基于Tangram的产品,如调整页面布局,切换页面数据等。
- 即 页面的排版布局 可 通过后端数据的下发来动态调整
- 服务网关的建设目标是最大程度的降低业务创建Tangram页面的压力和成本。
但这种动态化 是 面向粗粒度组件:通过 布局+组件的形式搭建整个页面,而不是一般从 **基本的UI元素(如按钮blabla)**搭建页面。
- 其实也很好理解,业务人员需要用到的是 能承担一定业务能力的“业务布局”,而不是单一UI元素(按钮、文本blabla)
- 好处:使用成本低,上线周期短
4.3 扩展性好
采用插件化扩展
内部本来就注册在框架里 & 外部也可注入扩展模块
4.4 多端一致性
对于业务开发,存在多端表现不一致的问题。为了解决该问题,以前需要通过复杂的网关逻辑来兼容多端逻辑不一致情况。
为了防止该问题,对于Tangram,预先制定了两个开发原则:
- 任意新功能的提出都是不区分平台,在功能设计中必须同时考虑多端功能,具体的实现方案和逻辑必须多端统一Review以保证多端表现一致。
- 任意一端的变更都必须在改动前把方案同步给其他端,而且变更必须多端同步发布。
5. 架构 & 原理讲解
Tangram
的架构主要由三部分组成:
Tangram SDK
Tangram AC
Tangram OP
- 每部分的具体细节如下:
本文主要讲解的是用于客户端页面渲染的Tangram SDK
。
5.1 知识储备
在讲解架构前,我们需要先了解Tangram
的一些模型知识。
a. 页面概念模型
-
一个页面实体由3部分组成:页面(Page)、卡片(Card) & 组件(Item)
-
具体如下图:
-
之间的关系:组件 构成 卡片、卡片 构成 页面。
-
对于
Tangram
,他的页面概念模型可用 树状模型(3层结构) 表示:
下面主要讲解 三层结构中 的 卡片 & 组件。
b. 卡片
- 作用:负责布局逻辑
- 即对组件进行 组合 & 布局
- 只声明布局方式,不提供布局细节
- 组成 卡片由有四部分组成:header、footer、body、style
关于四个部分的细节,我将在Tangram具体使用时进行介绍
c. 组件
- 定义:最小单位的UI元素
日常使用的普通的
View
,如按钮、图片等等
写在最后
最后我想说:对于程序员来说,要学习的知识内容、技术有太多太多,要想不被环境淘汰就只有不断提升自己,从来都是我们去适应环境,而不是环境来适应我们!
这里附上上述的技术体系图相关的几十套腾讯、头条、阿里、美团等公司2021年的面试题,把技术点整理成了视频和PDF(实际上比预期多花了不少精力),包含知识脉络 + 诸多细节,由于篇幅有限,这里以图片的形式给大家展示一部分。
相信它会给大家带来很多收获:
当程序员容易,当一个优秀的程序员是需要不断学习的,从初级程序员到高级程序员,从初级架构师到资深架构师,或者走向管理,从技术经理到技术总监,每个阶段都需要掌握不同的能力。早早确定自己的职业方向,才能在工作和能力提升中甩开同龄人。
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
**
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!