动态布局技术、原理及实践
华为快应用 技术总监 王宝元
跨端技术演进
移动应用开发、运营的痛点
- 产品的思路百花齐，需求多变化...
- 运营的活动千变万化...
- 开发周期长、多端开发、开发技能要求高...
- 发版要一路审批(流程IT，各应用商店)，一路升级打怪...
- 钉子户不升级...
- BUG 修复困难，程序员背锅...
动态布局是什么?
动态布局是一种端云协同的解决方案，使得客户端的界面布局能够根据云端运营的配置变化而动态变化，而不是将布局在客户端硬编码，从而使得运营的各种运营策略、运营动作能在客户界面快速动态呈现出来。
快应用技术 + 移动应用开发、运营需求 -> 动态布局解决方案
动态布局的技术架构
- 动态布局逻辑架构-各个模块功能示意
- 卡片开发、预览、发布——IDE 和工具链(开发人员)
- 卡片服务:卡片发布、云端编译(开发人员)
- 布局服务:组合卡片为页面，配置卡片的数据源(运营操作)
- 端侧布局 SDK:解析云端配置，端侧页面布局
- 卡片 SDK:端侧高性能渲染
- 渐近式异步渲染，优先渲染出骨架，采用 View 池简加速 View 创建过程
- 卡片 SDK:端侧高性能渲染
- 动态布局模式下的需求交付实践
动态布局的优势
- 提高开发效率
• 端侧关注App框架开发,无 需进行页面样式和布局的 硬编码;
• 基于HTML 、JS、CSS 的卡片开发技术，人员更 容易获取，学习成本更低。 - 提高运营效率
• 通过云侧配置快速更新页 面布局, 无需发布App新 版本, 缩短特性上线周期; 运营界面可视化页面编排 和预览，提高运营效率和 体验。 - 提升用户体验
• 卡片和布局变更, 无需升 级客户端版本, 用户零感 知。不降低端侧体验，内 存、帧率和功耗不恶化 - 跨端复用
• 一次卡片开发多端复用，SDK屏蔽底层平台差异
• 支持HarmonyOS、安卓、 Web场景
动态布局的应用效果
- 应用案例 1:支持 XXX 提升研发效率、缩短 TTM、提升运营效率
- 业务收益:支撑XXX满足灵活布局的业务诉求，卡片开发效率提升 50% 以上、运营活动的 TTM 缩短到原来的 1/3
- 应用案例 2:支持展示位卡片开放编辑，增强媒体接入意愿 媒体运营人员
- 业务收益:按照媒体主题风格自定义卡片展示样式，增强媒体接入意愿
- 应用案例 3:支持结果页动态专题卡片 开发人员
- 业务收益:减少端侧工作量和开发周期，端侧、卡片解耦并行开发，减少版本升级次数，每版本可以节省1~2周的交付周期
动态布局的规划和开放
作为独立服务:对开发者开放，支持应用高效开发
- 布局服务和卡片服务:通过 AppGallery Connect 提供 SaaS 服务，减少开发者部署维护。
- SDK 和 IDE 开放集成:卡片 SDK 及布局 SDK 面向公网发布，快应用工具链公网发布，提供更丰富的提供样例工程以及友好的资料
- 数据源:开发者的核心业务数据由开发者完全掌握，可存储在自有服务器，也支持托管到华为AppGalleryConnect Serverless
与 Serverless 融合，实现场景化解决开放方案，支持安卓和 HarmonyOS 原子化服务
- 构建场景化的解决方案(模板)，开发者可以快速的将这些模板集成到已有的 App 中，构建自有的能力。
- 构建的服务模板将包含汽车、商城等类型的，支持安卓和 HarmonyOS 原子化服务两种场景。 Serverless模板
