QCon 2022·上海站 | 学习笔记7: 动态布局技术、原理及实践

简介: QCon 2022·上海站 | 学习笔记7: 动态布局技术、原理及实践

动态布局技术、原理及实践

华为快应用 技术总监 王宝元

跨端技术演进

duan.png

移动应用开发、运营的痛点

  • 产品的思路百花齐,需求多变化...
  • 运营的活动千变万化...
  • 开发周期长、多端开发、开发技能要求高...
  • 发版要一路审批(流程IT,各应用商店),一路升级打怪...
  • 钉子户不升级...
  • BUG 修复困难,程序员背锅...

动态布局是什么?

动态布局是一种端云协同的解决方案,使得客户端的界面布局能够根据云端运营的配置变化而动态变化,而不是将布局在客户端硬编码,从而使得运营的各种运营策略、运营动作能在客户界面快速动态呈现出来。

快应用技术 + 移动应用开发、运营需求 -> 动态布局解决方案

动态布局的技术架构

arch.png


  • 动态布局逻辑架构-各个模块功能示意
  • 卡片开发、预览、发布——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 原子化服务

  1. 构建场景化的解决方案(模板),开发者可以快速的将这些模板集成到已有的 App 中,构建自有的能力。
  2. 构建的服务模板将包含汽车、商城等类型的,支持安卓和 HarmonyOS 原子化服务两种场景。 Serverless模板
目录
相关文章
|
Web App开发 Rust 应用服务中间件
在Nginx当中支持QUIC协议
Quick UDP Internet Connection(QUIC)协议是Google公司提出的基于UDP的高效可靠协议。有关协议的主要内容就不在本文过多描述了,本文主要是来讲一下,在Nginx当中如何去支持QUIC协议。 由于个人水平有限,如果哪里写的不对的地方,还请各位大佬们指正。
2172 0
在Nginx当中支持QUIC协议
|
IDE 开发工具 Python
PyCharm IDEA 安装【Chinese(Simplified)Language Pack/中文语言包】插件汉化出错
安装【Chinese(Simplified)Language Pack/中文语言包】插件时报【Plugin Installation】错误
8196 1
PyCharm IDEA 安装【Chinese(Simplified)Language Pack/中文语言包】插件汉化出错
|
12月前
|
消息中间件 存储 Java
RocketMQ(一):消息中间件缘起,一览整体架构及核心组件
【10月更文挑战第15天】本文介绍了消息中间件的基本概念和特点,重点解析了RocketMQ的整体架构和核心组件。消息中间件如RocketMQ、RabbitMQ、Kafka等,具备异步通信、持久化、削峰填谷、系统解耦等特点,适用于分布式系统。RocketMQ的架构包括NameServer、Broker、Producer、Consumer等组件,通过这些组件实现消息的生产、存储和消费。文章还提供了Spring Boot快速上手RocketMQ的示例代码,帮助读者快速入门。
|
存储 分布式计算 资源调度
Hadoop入门基础(三):如何巧妙划分Hadoop集群,全面提升数据处理性能?
Hadoop入门基础(三):如何巧妙划分Hadoop集群,全面提升数据处理性能?
|
存储 算法 关系型数据库
|
12月前
|
存储 SQL 关系型数据库
MySQL存储引擎
本文介绍了数据库优化的多个方面,包括选择合适的存储引擎、字段定义原则、避免使用外键和触发器、大文件存储策略、表拆分及字段冗余处理等。强调了从业务层面进行优化的重要性,如通过活动设计减少外部接口调用,以及在高并发场景下的流量控制与预处理措施。文章还提供了具体的SQL优化技巧和表结构优化建议,旨在提高数据库性能和可维护性。
332 1
MySQL存储引擎
|
存储 固态存储 安全
服务器硬件基础知识
服务器硬件基础知识
1044 1
|
人工智能 PyTorch TensorFlow
分布式训练:大规模AI模型的实践与挑战
【7月更文第29天】随着人工智能的发展,深度学习模型变得越来越复杂,数据集也越来越大。为了应对这种规模的增长,分布式训练成为了训练大规模AI模型的关键技术。本文将介绍分布式训练的基本概念、常用框架(如TensorFlow和PyTorch)、最佳实践以及可能遇到的性能瓶颈和解决方案。
1442 2
|
存储 监控 关系型数据库
解密MySQL中的临时表:探究临时表的神奇用途
解密MySQL中的临时表:探究临时表的神奇用途
1071 3
|
存储 JSON 小程序
【小程序云开发】不用后端也能构建完整的微信小程序
本文介绍了如何从零开始学习和掌握微信小程序云开发,包括云函数、云数据库和HTTP触发等重要概念。通过详细的步骤和示例,读者将学会如何创建和部署云函数,以及如何使用云数据库来存储和管理小程序的数据。同时,本文还介绍了如何通过HTTP触发器实现小程序与外部API的数据交互,从而为小程序开发提供更灵活、高效的后端解决方案。无论您是初学者还是有一定经验的开发者,本文都将帮助您轻松掌握微信小程序云开发,并为您的小程序开发项目提供更多可能性。
2537 0