手机天猫面向业务的界面解决方案 Tangram
2020-03-01 257浏览
- 1.Tangram @伯灵／天猫
- 2.我们花了了5年年时间跟平台打游击 忽略略了了前端技术本身的进化 JS/HTML转Native技术 天⽣生有跨平台和快速发布的属性 性能和稳定性却仅仅是接近原⽣生Native 我想，5年年前如果我们专注： WebKit的性能优化 WebView的能⼒力力扩展 Mobile Web开发技术进化 那么，今天的局⾯面应该会完全不不⼀一样
- 3.Tangram .pingguohe.net Team
- 4.Tangram的误会 • Tangram有开发模式，但不不是开发框架 • Tangram具有动态性，但不不是动态化⽅方案 • Tangram被开发者使⽤用，但⽤用户不不是开发者
- 5.“ ⾯面 向 业 务 的 界 ⾯面 解 决 ⽅方 案 ”
- 6.⾯面向业务 • 不不求完整，只求够⽤用 • 追求灵活性有节制，性能和效率可以放肆
- 7.解决⽅方案 • 开发者是我们的合作伙伴 • 全链路路建设，不不留留短板
- 8.iOS或Android的实现细节 如何⾼高效接⼊入Tangram 以上内容你都可以在 Tangram.pingguohe.net 找到 以上内容今天 不不 讲
- 9.体系 & ⽣生态（30%） Tangram的全链路路思考 Tangram SDK（20%） 开源了了，⽆无论如何说两句句 TAC（40%） 我们如何让跨栈成为⽇日常开发常态 Tangram 2.0（10%） 未来3-5个⽉月Tangram会变成什什么样
- 10.体系 & ⽣生态
- 11.我们对⽣生态的理理解 • 所有⻆角⾊色是合作关系，互相促进 • 所有⼈人都贡献，没有⼈人单纯的消费 • 没有管理理员，体系和规则成就⽣生态
- 12.可循环的 完整体系 易易扩展的 微核架构
- 13.围绕⻆角⾊色构建的体系
- 14.框架开发 ⽤用户 对框架的可⽤用性、稳定性负责。是整个产品的技术基⽯石，决定了了产品质量量的底线⾼高度 最终产品的使⽤用者。是整个产品的⽬目标，整个产品都围绕创造⽤用户价值⽽而设计 业务开发 产品的直接实现。把产品设计实现的⼀一线开发，需要快速奔跑，决定了了产品的上限⾼高度 业务产品 产品设计者。决定了了整个产品以何种⾯面貌示⼈人，某种程度上是制定⽅方向的⼈人 业务运营 业务掌舵者。站在⼀一线把控产品⽅方向和管理理⽤用户的⼈人。 ⻆角⾊色
- 15.⽤用户 业务开发 框架开发 业务运营 业务产品
- 16.⽤用户 业务开发 框架开发 业务运营 业务产品
- 17.⽤用户 业务开发 框架开发 业务运营 业务产品
- 18.⽤用户 业务开发 框架开发 业务运营 业务产品
- 19.组件 / 容器器 Tangram View Tangram Lib Listener & Action Tangram Bus Data Source Tangram Helper Biz Controller Oreo&Weex / Flare / 等 Tangram Core Plugins 业务服务 算法服务 Gateway Template 投放服务 ··· Container Style Tangram AC Tangram OP Business Services 前端 + 后端 + 开发 + 运维
- 20.SDK Tangram App Container Operation Console Tangram体系
- 21.SDK 解决渲染问题，关注性能，效果，动态性，灵活性，稳定性 App Container 后端逻辑容器器，降低后端逻辑开发成本，⽀支持⾼高效，稳定的业务处理理 Operation Console 界⾯面控制台，通过⼯工具的⽅方式，在⽇日常运营中释放开发资源 Tangram体系
- 22.绝对公平的微核架构
- 23.事件 运⾏行行时 组件 / 容器器 Tangram Lib Tangram Bus Tangram Helper Tangram Helper Tangram View Tangram Core Oreo&Weex / Flare / 等 Plugins Action 业务控制器器 SDK
- 24.源码仓库/微程序 申请微程序 编译/发布指令 运⾏行行时环境 微程序初始化 安装指令 申请流程 发布流程 本地环境 仓库（Git Group） 静态分析 定时器器 单元测试 质量量控制 管理理后台 主动监测 服务状态（QPS/RT） 服务异常检测 服务监控 服务… 公共API 微程序路路由 Installer 整体状态（QPS） Before & After Jar Loader Jar Storage 整体异常 服务出⼝口 容器器 包管理理 功能服务 服务… 运⾏行行时 业务服务 TAC 整体监控 在线质量量控制
- 25.动画库 Weex Oreo 浮层 ... SDK 算法 Tangram 阿⾥里里⾳音乐 App Container 阿⾥里里体育 Operation Console 投放 ⻚页⾯面管理理 数据看版 样式 图像服务 缓存 ... 组件开发 ...
- 26.Tangram SDK
- 27.天猫APP⾸首⻚页
- 28.组件 + 模板
- 29.Tangram View持有布局 组件复⽤用算法 业务持有Tangram View Tangram View 通知 调度 被响应 常规布局（~20） X组件（Weex/HTML） 异形布局（浮点/吸顶） 业务组件（60+） Container 被响应 Tangram Event Bus 通知 Biz ⽣生命周期调度 Tangram Core Listener & Action 原始数据 Data Source Biz Controller 调度 布局持有组件 关联 ⽹网络交互 构造&数据绑定 构造&数据绑定 Flare动画库 构造&数据绑定 组件Helper池 布局Helpe池 Yosemite 外挂Helper池 Others… HELPER Server Oreo Plugins SDK架构
- 30.模板动态化 & 组件动态化
- 31.性能保障
- 32.能⼒力力 Tangram UICollectionView ⾼高效回收 √ √ 跨层复⽤用 √ × 以视图id为索引的复⽤用逻辑 √ × 灵活选择复⽤用逻辑 √ × ⾃自定义回收/复⽤用机制
- 33.复⽤用类型 复⽤用策略略 同类型复⽤用 以组件类型作为复⽤用id 同种类型组件做复⽤用 指定复⽤用id 同种类型组件内再细分复⽤用池 增强复⽤用时视图性能 不不复⽤用 创建之后，仅做⼀一次赋值 来回滑动不不变化，适应⾼高性能需要 多级复⽤用逻辑
- 34.回收/复⽤用算法
- 35.1 2 3 4 5 6 7 8 9 整体⻚页⾯面
- 36.0 1 2 3 4 5 6 200 400 7 460 600 8 9 可视区域组件发现
- 37.0 0 1 1 2 4 2 3 5 200 [1, 2, 3, 4, 5, 6, 7] 4 3 5 200 x 6 400 [4, 5, 6, 7, 8, 9] 6 400 7 460 = 7 460 [4, 5, 6, 7] 600 8 600 8 9 9 视图底部坐标在 可视区域顶部以下 视图顶部坐标在 可视区域底部以上 找到两个集合求交集
- 38.2 4 3 5 6 7 8 9 创建 索引 Top Bottom 1 9 2 8 3 7 4 6 5 5 6 4 7 3 8 2 9 1 双索引模型 [1, 2, 3, 4, 5, 6, 7] x [4, 5, 6, 7, 8, 9] 两次 ⼆二分 查找 = 1 [4, 5, 6, 7]
- 39.1 1 1 2 3 2 3 2 3 4 5 4 5 4 5 6 6 6 7 7 8 8 9 ⾸首屏 1 2 3 和 4 5是不不同类型 7 8 9 回收 1, 2, 3被标记为可复⽤用 原始组件优先复⽤用原则 9 复⽤用 优先选择2, 3复⽤用渲染
- 40.TAC模式下的 跨栈开发
- 41.跨 栈
- 42.概念 • 不不是 —— ⼀一个⼈人有承担多个⻆角⾊色的能⼒力力 • ⽽而是 —— ⼀一个⼈人以多个⻆角⾊色完成⼯工作的模式
- 43.优势 • • 开发效率 —— ⼀一个⼈人承担多种⻆角⾊色，把沟通和交流成本降 到最低，提升效率 产品效果 —— 在整个开发过程中，体现的是⼀一个⼈人的意 志，把这个⼈人对技术的理理解贯彻的更更加彻底
- 44.埋点 ⻚页⾯面 约定 业务 逻辑 组件 Mock 动效 基础 服务 数据 拼装 稳定 模块 组合 样式 配置 联调 性能 … … 传统模式 系统 对接 性能 稳定性
- 45.埋点 ⻚页⾯面 约定 业务 逻辑 组件 Mock 动效 基础 服务 数据 拼装 稳定 模块 组合 样式 配置 联调 性能 … … TAC模式 系统 对接 性能 稳定性
- 46.打破壁垒 • 定义低成本开发与发布流程，打破后端开发的流程壁垒 • 低成本搭建与维护开发环境，打破后端开发的环境壁垒 • 建设⾼高稳定性保障的容器器，绕开后端开发的经验壁垒
- 47.源码仓库/微程序 申请微程序 编译/发布指令 微程序初始化 安装指令 申请流程 发布流程 运⾏行行时环境 本地环境 仓库（Git Group） 静态分析 定时器器 单元测试 质量量控制 主动监测 安装（指令） 服务状态（QPS/RT） 管理理后台 发布（上传包） 服务异常检测 编译 Uploader 开发阶段调⽤用 服务监控 服务Mapping OSS Storage 安装 （下载包） 版本管理理 Installer 监控 Jar Storage 整体异常 包管理理 包服务 整体状态（QPS） 整体监控 微程序路路由 在线质量量控制 Jar Loader 服务… 业务服务 调⽤用层 服务池 运⾏行行时 ⼯工具服务 接⼊入层 运⾏行行时调⽤用 ⼯工具池 公共API Before & After 服务出⼝口 容器器（⽇日常/预发/⽣生产） Tangram App Container Tangram接⼝口 调⽤用 Yosemite
- 48.Begin 申请服务 构造开发环境 编译 NO 编译通过 安装指定环境 YES 下载包 开发 执⾏行行单元测试 加载包 单元测试 发布 更更新路路由配置 End TAC流程
- 49.前端开发 后端开发 √ √ 🖥 业务逻辑 🖥 系统稳定性 √ 🖥 服务对接 √ 📱 前端 √ 📱 客户端性能 √ 📱 体验丰富度 √ ⻆角⾊色与重⼼心 √
- 50.Example
- 51.业务变更更 —— 变更更打底内容
- 52.… if ( item.content.isEmpty() ) then item.content = item.similarItems; …
- 53.… if ( item.content.isEmpty() ) then if ( item.is618() ) then item.content = 618; else item.content = item.similarItems; …
- 54.Tangram 2.0
- 55.Tangram App Container 开源 Tangram Operation 开源 New Tangram Item Technology Tangram Page Container
- 56.http://tangram.pingguohe.net
