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