从原生迈向混合,小而美团队如何搞定APP高效定制

原生,迈向,混合,团队,如何,搞定,app,高效,定制 · 浏览次数 : 60

小编点评

**华为云数字化差旅:如何用混合开发玩转高效定制** 华为云DTSE技术布道师徐意分享了华为云数字化差旅移动端APP从原生框架到混合开发的演进过程,以及如何通过React Native及Hybrid混合开发框架去提升开发效率,解决企业客户多样的定制化诉求。 **华为云数字化差旅的架构变迁之路** 华为云数字化差旅是一个源于华为18年差旅管理实践的移动端差旅管理平台,通过搭建一体化的数字化差旅管理平台,为客户提供从差旅申请、审批、预订、行中保障、报销及差旅分析的一站式出行服务,助力其实现精益管理、提质增效、安全合规,不断提升员工出行体验。 **混合开发的魅力** 混合开发是将原生框架与React Native框架结合的开发模式,可以充分发挥 React Native框架的性能优势,同时保留原生框架的稳定性和可靠性。 **提升开发效率** 华为云提供了React Native框架的热更新能力,可以快速更新应用的代码,从而提升开发效率。 **解决定制化问题** 华为云提供多种框架选择,可以根据项目的需求选择合适的框架,解决企业客户多样的定制化诉求。 **如何为中小企业提供高效定制方案** 华为云提供以下服务: - 建设并持续完善RN组件库,快速构建企业UI页面 - 通过字体库图标、插画系统,实现图片素材的可定制化 - 设计个性化主题配置能力,实现配套主题切换 - 持续RN版本升级,提升性能、引入新功能 - 提供真机调测包 - 多环境切换能力,提升开发测试效率 **3大阶段规划** 华为云提供三个阶段的规划,了解差旅App未来演进方向为持续支撑业务发展、提升用户体验、沿袭“全场景、全流程、全数据”的建设思路。

正文

摘要:洞悉华为云数字化差旅App的架构变迁之路,体验混合开发魅力。

​​本文分享自华为云社区《DTSE Tech Talk 第21期丨从原生迈向混合,小而美团队如何搞定APP高效定制?》,作者:华为云社区精选 。

令开发者们心动的App端开发神器究竟长什么样?小而美的团队如何精准拿捏客户多元化定制需求,实现高效开发?在企业通用服务类App中,如何瞄准团队定位,快速engage客户?

近日,华为云DTSE技术布道师徐意带来了《揭秘华为云数字化差旅:如何用混合开发玩转高效定制》的主题分享。徐意与开发者们交流了华为云数字化差旅移动端APP从原生框架到混合开发的演进过程,以及如何通过React Native及Hybrid混合开发框架去提升开发效率,解决企业客户多样的定制化诉求,让开发者对混合框架的选择及可能解决的场景有一定的了解和认识。此外,针对中小企业混合开发实践,徐意也从团队定位、研发投入及生态构建等视角给予了专业的建议。

华为云数字化差旅,源于华为18年差旅管理实践,定位于企业差旅管理市场。依托“全场景、全流程、全数据”的建设思路,通过搭建一体化的数字化差旅管理平台,为客户提供从差旅申请、审批、预订、行中保障、报销及差旅分析的一站式出行服务,助力其实现精益管理、提质增效、安全合规,不断提升员工出行体验,使能企业数字化转型成功。截止目前,华为云数字化差旅服务范围已经涉及170+国家和地区,向全球480w+企业客户提供高品质服务,最终把数字化差旅带入每个企业、每个员工。

从原生到混合:紧贴业务需求,选择高效合适的混合框架

APP原生框架以性能高、体验好、功能丰富、稳定性高等特点而著称。但是由于其也存在开发成本高、移植性差、发布节奏慢等劣势,在现今越来越敏捷的交付节奏下,逐渐难以满足开发者及企业的诉求。

华为云数字化差旅在市场拓展过程中,随着企业客户的不断增加,多层面的差异性逐渐显现,差旅业务开发面临着诸多挑战:对接模式的差异、企业白牌定制、企业业务及个性化模块定制、企业差旅管理政策差异、企业紧急政策要求、多团队版本配合、特殊场景需求保障等等。在高频的项目交付中,“体验要好、交付要快、功能稳定、成本要低”成为客户的一致诉求。如何在持续满足客户需求的同时推进技术升级,也是当前差旅团队亟待思考的点。

从框架诉求、开发能力模型、维护成本3个维度出发,华为云数字化差旅开发团队综合评估了市面上主流成熟的混合开发框架,通过分析Hybrid、React Native、Flutter、Uni-app等框架的优缺点,结合实际业务诉求,先引入React Native框架去尝试解决业务交付难题。

React Native能力探索及演进

差旅团队在项目中首先尝试通过相对简单直接的单RN包的方式引入React Native框架能力,之后尝试使用配套的热更新能力,实现整RN包热更新。通过前期的尝试,在一个新业务开发中,团队逐步体验到Android与iOS代码合一、效率提升、问题修复效率高等框架优势:

效率方面:实现两端一套代码的诉求,业务开发、调试效率显著提升;
性能方面:整体交互性能稍有下降,但综合体验符合预期;
难度方面:业务开发技能JavaScript,上手更快;
热更新方面:具备热更新能力,提升灵活性。

在引入React Native框架后,团队之前面临的种种客户交付跳转看似也有了可行的解决方案。但团队逐步在做去割接其他业务时,也浮现出一些新的框架问题:

    • 单RN包模式下,随着业务逐渐增多,bundle变大,初始化时间较长,内存消耗大;
    • 整包热更新模式导致热更新文件大,下载等待时间长,生效慢;
    • 随着客户增多,不同的客户包、不同版本需要不同的补丁包,导致手工管理困难。
      基于这些问题,团队开始思考和寻找对应的解决方案,随后采取如下措施:
    • 使用Facebook metro构建工具进行进行分包能力开发,实现基本包与业务包分解,各业务包代码与功能独立,相互隔离,业务按需加载,按需释放。
    • APP端热更新同步分包机制,按业务包实现独补丁包隔离。同时研究热更新生效策略并尝试启动等待生效,再启动生效,实时生效等多种策略。
    • 基于华为云强大的平台能力,构建服务端补丁包管理体系:
      • 使用google diff-match-patch text算法自动化实现代码差异对比,流水线构建增量补丁包,显著降低补丁包大小。
      • 自建热更新管理系统,实现多产品、多版本、多渠道补丁分发管理以及灰度发布能力。
      • 使用华为云OBS安全存储,CDN分发等服务提升补丁包下载速率及稳定性,同时根据针对补丁包进行安全校验防篡改以及补丁包密码加密等能力。

除了以上框架问题之外,团队通过持续构建RN能力生态,不断提升客户个性化诉求的场景覆盖及交付效率:

  • 建设并持续完善RN组件库,快速构建企业UI页面;
  • 通过字体库图标、插画系统,实现图片素材的可定制化;
  • 设计个性化主题配置能力,实现配套主题切换;
  • 持续RN版本升级,提升性能、引入新功能;
  • 提供真机调测包;多环境切换能力,提升开发测试效率;
  • 尝试构建自动化测试能力。

从4类应用场景探索WebView能力建设

差旅APP内应用场景的复杂多样性使得框架层面在一些场景上需要使用到webview模块的使用,即通过APP内置浏览器打开web页面给用户提供一些服务能力,团队总结为如下4类场景:

  • 企业专属模块
  • 多端共用模块
  • 新增/高变化性模块
  • 运营活动类模块

基于以上各类应用场景,差旅APP首先通过Android及iOS原生功能的开发及配置满足如支付等三方应用跳转场景及电话、邮件、相册、文件、定位、多媒体等能力场景,同时又进一步构建一套较完备的JSBridge方法库,将web页面所需的原生能力封装成API,包括界面交互类(如返回、刷新、导航栏等)、登录类(登录信息获取、实时登录等)、系统信息类(系统、版本、安全区域、设备id、暗黑、字体等)及其他功能类(分享、定位、跳转、业务功能等)。

在提供各类方法能力的同时,团队注意到web端的能力诉求涉及一定的敏感信息类,故在提供这类能力的同时,设计并构建了一套webview安全加固策略:域名白名单管控;JSBridge 方法管控;业务Token权限管控。

3大阶段规划,了解差旅App未来演进方向

为持续支撑业务发展、提升用户体验、沿袭“全场景、全流程、全数据”的建设思路,华为云数字化差旅团队基于自身技能及业务特点,会始终保持研究投入。对于差旅App未来发展,给出了三个阶段的规划:

  • 短期内,主要着眼于RN版本可信、热更新能力的提升;
  • 中期内,计划构建起RN+H5的融合方案,打造原子化、场景化的服务能力;
  • 长期发展来看,会依托低代码等先进技术,打造多框架共建及配置化能力成为预研方向。

在最后的分享环节,针对中小企业在面临繁重、多元定制的交付需求等问题,讲师也从团队定位、APP框架选型、研发投入、生态构建、网络安全意识提升等方面给出了可行性的建议,希望开发者们能够依托混合开发玩转高效定制,快速响应客户需求,实现自身技术的迭代升级。

 

点击关注,第一时间了解华为云新鲜技术~

与从原生迈向混合,小而美团队如何搞定APP高效定制相似的内容:

从原生迈向混合,小而美团队如何搞定APP高效定制

摘要:洞悉华为云数字化差旅App的架构变迁之路,体验混合开发魅力。 ​​本文分享自华为云社区《DTSE Tech Talk 第21期丨从原生迈向混合,小而美团队如何搞定APP高效定制?》,作者:华为云社区精选 。 令开发者们心动的App端开发神器究竟长什么样?小而美的团队如何精准拿捏客户多元化定制需

如何操作(增、删、改、查)常见的 HTML 元素呢?(包含原生 js 和 JQuery 语法对照)

本文包含针对常见 HTML 元素的增删改查等操作,从原生 js 和 JQuery 两个纬度进行对比列举。

一文读懂华为云云原生产品及开源实践

摘要:本文主要从华为云原生产品及开源产品两个层面进行展开,详述华为云在云原生领域的最佳实践。 本文分享自华为云社区《【云驻共创】华为云云原生产品及开源实践》,作者:kaliarch。 一 云原生发展阶段和趋势 回首过去,云计算的快速发展,为众多行业的数字化转型提供了推力,也提升了企业数字化转型的技术

从积木式到装配式云原生安全

随着云原生架构的快速发展,核心能力逐渐稳定,安全问题日趋紧急。在云原生安全领域不但有新技术带来的新风险,传统IT基础设施下的安全威胁也依然存在。要想做好云原生安全,就要从这两个方面分别进行分析和解决。

[转帖]大话云原生之灰度发布篇 - 从步行到坐缆车的自动化服务升级

https://xie.infoq.cn/article/9b22d0ca95e7d48748bb0a5fd 看过很多关于云原生的文章,要么云山雾罩,要么曲高和寡。 所以笔者就有了写《大话云原生》系列文章的想法,期望用最通俗、简单的语言、方便记忆的场景来说明:云原生生态系统内的组成及应用关系。 一、

云原生微服务治理技术朝无代理架构的演进之路

摘要:本文基于对微服务治理技术从SOA, 微服务框架,到云原生架构的历史发展总结,提出了一种新的基于Javaagent技术的新一代无代理架构的服务治理技术,并介绍了其相关的代表性开源项目Sermant。 本文分享自华为云社区《云原生微服务治理技术朝无代理架构的演进之路》,作者: 杨奕|华为云技术规划

[转帖]从性能问题定位,扯到性能模型,再到 TCP - 都微服务云原生了,还学 TCP 干嘛系列 Part 1

https://blog.mygraphql.com/zh/posts/low-tec/network/tcp-flow-control-part1/ 引 本来想直接写理论、和实践分析的,但为了不 “赶客出門” 和不 TL;DR,还是以故事形式展开吧。语言要生动活泼。 故事的开始 话说,一次性能测试

云原生容器高可用运维能力应用

摘要:华为云容器SRE在海量集群和容器运维实践中,从智能运维能力、确定性场景恢复等多方面总结出一套确定性运维实践,以应对云原生业务快速增长。 本文分享自华为云社区《云原生容器高可用运维能力应用》,作者:陈勇/刘志超/袁文峰。 云原生场景下,对架构高可用、应用高可用、基础云平台高可用提出了更高的要求,

Asp-Net-Core开发笔记:使用原生的接口限流功能

前言 之前介绍过使用 AspNetCoreRateLimit 组件来实现接口限流 从 .Net7 开始,AspNetCore 开始内置限流组件,当时我们的项目还在 .Net6 所以只能用第三方的 现在都升级到 .Net8 了,当然是得来试试这个原生组件 体验后:配置使用都比较简单,不过功能也没有 A

RocketMQ 之 IoT 消息解析:物联网需要什么样的消息技术?

前言: 从初代开源消息队列崛起,到 PC 互联网、移动互联网爆发式发展,再到如今 IoT、云计算、云原生引领了新的技术趋势,消息中间件的发展已经走过了 30 多个年头。 目前,消息中间件在国内许多行业的关键应用中扮演着至关重要的角色。随着数字化转型的深入,客户在使用消息技术的过程中往往同时涉及交叉场