# 移动端混合开发成效

如何提高开发人员的整体效率,是现阶段公司重要目标之一,如何缩短开发成本和产品上线时间,如何兼顾用户体验和性能之间做到取舍,移动端将结合当下公司目标和自身团队建设需要,借鉴互联网流行的混合技术,一方面,Native 让开发者可以充分利用现代移动设备所提供的全部不同的特性和功能。另一方面,使用 Web 语言编写的所有代码都可以在不同的移动平台之间共享,使得开发和日常维护过程变得集中式、更简短、更经济高效。集两者之所长,在发挥Native 独有的优势时,在不确定的需求场景使用 H5 来动态呈现数据;在BOSS预约项目上的实践,已经体现共享代码、修复问题带来的便捷;

# 业务场景对比

Native Html5
Android/IOS对应编程语言 一套Web编程语言
版本升级灵活性差 快速修复、部署能力
原生组件渲染,性能快、体验好 依赖原生Web容器进行HTML渲染、资源载入,等待时间长、用户体验差
访问设备特性(语音、摄像头、GPS、蓝牙等) 访问需要依赖协议接口

# 一、应用范围

对比 NaviteH5 优缺点,结合现有的技术,首次在BOSS预约项目使用混合技术进行开发,除独有的原生优势外,在协议对接的关键技术部分也得到了充分验证和经验积累,为正在开发的标准项目采用混合方案,提供有力的技术支撑;

  • 一套Web编程语言:

    • BOSS预约、并联指挥

      Native: 四套的UI效果(手机端、平板端),投入4人(安卓/苹果各2人)

      Html5PhonePad 两套UI效果,投入2人(根据功能分配人员)

      BOSS预约前期学习摸索、基础框架建设花费一定的时间成本, 在资源成本并未得到体现,主要提效的内容有:

      1. 技术经验储备,为后续新项目提供基础技术支撑;
      2. 并联指挥节省开发周期1/3(基础框架组件复用、四端代码共享);
    • 标准平台

      业务场景开发内容:首页介绍(含视频)、支付记录明细、支付统计(含图表)三个页面;

      Native:投入Andorid/IOS 各1人,3天工作量,总耗时6天

      Html5 :投入1人,3天工作量,总耗时3天

      整体 节省3天 工作量,随着技术经验提升及产品规划H5页面增加,成本效率可以进一步显现;

  • 快速修复、部署能力:

    Native:发现问题,问题修复,提交应用商城审核;在等待期如果涉及到接口时后端还需要做技术兼容;

    Html5 :发现问题,问题修复,部署更新,无需等待;

    BOSS预约在,关注的用户展示高亮问题,定时获取预约状态等常规BUG修复和调整定时器策略方面都体现Web动态性部署的好处;

    节省的效率体现在 无需等待时间(1~3天),减少不必要的服务端接口兼容风险;

# 二、技术储备、开发提效

在BOSS预约项目实际中,在 NativeH5 数据接口协议通讯得到了验证,在BOSS预约使用的技术,已经在标准平台也开始运用,在基础框架协议方面,不需要从零开始,有效提升项目初期基础建设工期,提效工期不低于12天工作量

  • 统一 JavaScript 接口,在 NativeH5 数据互通提供统一的API 输出,当前已定义的协议有(页面路由、标题、返回、关闭、虚拟返回、拍照/图库选择、输入框输入输出、基础数据同步等)业务事件扩展,制定基础服务协议;

  • 统一 NativeH5 访问权限,使用 Token 同步保证访问Web页面时,无需二次登录授权,避免二者使用不同的访问权限机制,影响用户操作体验;

  • 为了提高用户体验,加快页面响应速度;对页面资源数据进行缓存和组件资源本地化,保证用户在访问时无需加载部分组件;

  • 适配移动端的UI方案得到验证,兼容大部分Android/IOS机型;

# 三、保障开发质量

在BOSS项目工程,借鉴前端框架的技术知识经验,结合移动端的业务场景进行综合优化,保障在每一块业务模块清晰,数据结构统一,在开发过程进行跟踪督导,确保每块功能能高效率、高质量完成;

  • 制定统一框架、明确结构、代码规范;

    主要目的:降低项目维护成本,促进团队更好协作;

  • 工具类收集、组件抽象封装,提升基础效率;

    提供基础组件服务,避免二次开发、重复制造轮子,浪费开发时间;

  • 不定期的Review督导机制;

# 四、资源利用和影响

  • 从零到一的突破;从未接触到实战开发,在激发成员学习能力和积极性的同时,对新技能的储备实践,移动端团队在公司未来可以承担更多样化的任务(标准平台使用的框架和协议来自BOSS项目);

    对比前:能力展示中,公告内容、隐私协议等需要前端人员配合,在涉及的部分技术方面的跨端沟通、UI联调等方面相对耗时;

    对比后:标准产品中,首页展示、业务模块均原生人员负责,在联调、对接JavaScript协议方面,沟通开发效率更高;

    预估提效:至少3天 工作量;

  • 岗位复用性,培养更多成员掌握更多的新技能,源源不断的知识储备和人才输出,在内承担岗位AB角色,对外提升岗位吸引力;

    移动端和前端部分人员可以进行特地范围的成员互补;充分利用现有资源;

  • 技术选型多样化,从NativeH5Flutter、混合多套技术组合,在应对公司不同时期发展方向、战略要求、市场验证等,可以提供更多适应方案;

  • 面对问题的心态,从面对新技能到学习开发过程、从粗浅理解到深入分析,在出现问题到解决问题,在拓宽知识、经验积累、技术融合等提升技能能力的同时,更多的是如何面对问题,锻炼百折不挠的精神,把这种精神传递出去;

# 五、在应用中呈现的问题

  • 在BOSS项目中,未充分考虑所有的交互方式,全部采用了H5的方案,在利用Web的各项优点的同时,也导致用户在响应方面、操作体验上满意度不高;

    针对每一项功能,应该结合实际,部分场景先从原生再到H5进行转换,保证核心业务不受影响的情况,部分数据又能使用H5带来的高效便利;

  • 交互方式没有制定出标准,导致现有设计都模范原生交互方式,在资源错误时可能会引发潜在问题;

最后更新时间: 11/24/2021, 1:59:05 AM