长虹集团移动应用产品总监 孔帅:基于Hybrid的移动应用混合开发模式架构演变

佴代卉

2017/11/14 发布于 技术 分类

以Hyrbrid混合开发思想及其架构演进为主线,结合长虹软件与服务中心自有知识产权“端云一体”思想构造的移动应用抽屉式模块服务平台为依托,给出了一种原生及Html5混合开发趋势技术潮流的剖析思路。该平台核心思想在于简化移动应用开发技术,通过几行js代码遍可以实现与原生风格一致的UI或者完成原生相关的富媒体交互功能。TopMobi+由“轻应用SDK”和“原生SDK”两部分组成,可以帮助开发者快速实现移动应用的开发、测试、发布、管理和运营的全生命周期管理。

文字内容
1. 基混于合H开Sy发bArC模idC式的2架0移1构动7演应变用孔 帅 长虹集团
2. 本人介绍 2010-2012 腾讯地图 2012-2013 银客网 2013-2017 长虹集团 产品经理 前联合创始人 移动应用产品总监 现任长虹集团软件服务中心移动应用业务线产品总监,兼任 Android移动应用方向首席架构师。擅长Android、iOS、H5应用 17设计及常用软件架构。负责跨平台移动应用开发整体框架设计、 20移动研发团队建设及管理。 CC现负责具备自主产知识权的TopMobi+移动应用开发平台建设, SA致力于推广Hybrid研发模式,提高研发人员效率和代码重用率, 并整体提高研发质量。目前长虹内部移动应用产品线已广泛应用 该开发平台成果。 新浪微博 大K爱生活 weibo.com/kjzbr123
3. 为什么需要跨平台移动开发框架? SACC2017
4. 小A,这是份 UI原型图, 拿去实施吧 典型场景 小I,这是份 UI原型图, 拿去实施吧 程序猿 小A 辛苦编码ing…… 又改需求?! F**k! 让小I去改! SA产C品经C理 小2P017 这都什么跟什么 啊,完全不一样! 程序猿 小I 辛苦编码ing…… 又改需求?! S**t! 让小A去改! 领导 小L
5. 核心问题 沟通与理解存在差异 即便是最优秀的产品经理面对最优秀的程序员, SACC2017即便是面对同一份需求,即便是同一份像素级精确的UI高保真原型图, 对待相对变化的需求: 不同的程序员,有不同的理解! 结论:实际项目实施中,Android和iOS并行的原生开发过程中,始 终存在不同程度的冗余开发。最终导致不同平台的视觉、文案、 交互细节体验不一致,当然维护成本也随之增高。
6. 混合型APP与WebAPP 混合型APP (Native中嵌入Html5轻应用)通常是基于第三方跨平台移动应用 引擎框架进行开发, HTML5(主要是指Javascript)只是作为一种脚本语言,真 正调用的是与原生型APP软件具备一样能力的通过框架封装的底层接口,这是和 WebAPP的最大区别。因为使用了浏览器渲染技术,所以混合型APP通常具有跨 17平台的特性,并且开发成本和WebAPP接近,开发效率也高于原生型APP应用。 C20所以很多企业采用混合型APP技术开发APP应用,一方面是开发简单,另外一 SAC方面可以形成一种开发的标准。企业封装大量的原生型的原生插件如支付、分享 供Javascript调用,并且可以在今后的项目中尽可能的复用,从而大幅降低开发时 间和成本。混合型APP软件的标准化给企业移动应用开发、维护、更新都带来了 极高的便捷性。
7. 核心架构思想(1) ----序中有乱 VS 乱中有序 乱中有序 序中有乱 乱中有序 -观察,归纳,抽象 - 万变不离其宗 创造 呈现 -序本来存在,等待发现总结 SACC2017序中有乱 好莱坞明星法则(天字第一法则) Don't call me, I will call you back! 支付宝案例: -先架构,再使用 -子类不直接call接口,而是在父 -先自己来创造序 类call接口,子类只能call父类。 -通过 父类的抽象函数,虚函数。
8. 核心架构思想(2) 以架构师的角度来讲,不能只能停留在应用层,要从系统架构层思考沉淀。 Html5+WebView -Pure Webapp(纯云端APP) 7-Hybrid Webapp (混合APP) ACC201┍简单构造、不同内涵、重复组合┙ --- 三项特性。 S 调用还未定义的类怎么办? MB的 <强势接口> 又称 主动接口 先拿张纸记着,需要用的 时候再来查看。 今天 明天 后天 AndroidManifest.xml 相当于 这张纸 写父类 写子类 调用子类
9. 核心架构思想(3) API=话语权 一个接口我必须有100%的掌控权,我才愿意给你。 17必须满足三个条件: C201、我定义; SAC2、接口我来给; 例: Android最先的获利者是硬件厂商, 而不是user。 3、对象我来new。 鸣谢 高焕堂老师 产业一定会红起来,但任督二脉 未打通,用户不喜欢。 Ex. GPU, 显卡等
10. 目前有哪些成型的移动开发框架? SACC2017
11. 市面上最流行的平台框架 CrossApp是一款完全免 费、开源、跨平台的移动 app开发引擎。CrossApp 以C++作为开发语言,图 形渲染基于OpenGL ES 2.0,采用MVC框架模式。 使用CrossApp开发的应 用程序支持导出到各大主 流移动平台,真正实现"一 次编码,多处运行"的跨平 台开发技术。 SACC2017APICloud致力成为中国领 先的移动垂直领域云服务商 ,帮助传统软件公司从B/S 架构成功走向APP,帮助中 国数百万web开发者转化成 移动APP专家! 云API:减少70%服务器端 编码工作量 AppCan作为国内Hybrid混 合应用开发的倡导者和领导 者,采用“免费+开放”的 互联网思维模式运营,除与 PhoneGap一样支持跨平台 移动应用开发,还支持多窗 口机制,让开发者可以像最 传统的网页开发一样,通过 页面链接的方式灵活的开发 移动应用。 起源于 Facebook 的内部 项目,因为该公司对市场 上所有 JavaScript MVC 框架,都不满意,就决定 自己建立一种逻辑优秀的 js开发框架。它与原生控 件建立了一种一一映射关 系,提供了虚拟DOM( Virtual DOM)和组件化 的开发,其设计思想极其 独特,性能出众,代码逻 辑却非常简单,吸引了大 量追随者。 总体发展以 跨平台化、通用化、易扩展、提供模块化基础框架为趋势
12. PhoneGap及AppCan SACC2017PhoneGap是一款开源的开发框架,旨在让开发者使用HTML、Javascript、CSS 等Web APIs开发跨平台的移动应用程序。PhoneGap在多个主要的智能手机设备 上提供了如LBS、Camera、传感器、网络、存储等Native功能支持。目前只支持 单窗口开发模型。 AppCan作为国内Hybrid混合应用开发的倡导者和领导者,采用“免费+开放”的 互联网思维模式运营,除与PhoneGap一样支持跨平台移动应用开发,还支持多窗 口机制,让开发者可以像最传统的网页开发一样,通过页面链接的方式灵活的开发 移动应用。
13. APICloud SACC2017 APICloud提供6大类,包含界面布局、导航菜单、功能扩展、设备访问等数 百个模块,轻易满足开发者完成电商类、社区类、资讯类、社交类以及其他 个性化的APP制作需求,同时模块库将持续的进行更新,以适应移动行业的 高速发展 。
14. Jquery / Zepto.js 7jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的 01JavaScript框架。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码, 2做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式, CC优化HTML文档操作、事件处理、动画设计和Ajax交互,而jQuery Mobile是 jQuery发布 SA的针对手机和平板设备、经过触控优化的Web框架。它基于jQuery,在不同移动设备平台 上可提供统一的用户界面。该框架基于渐近增强技术,并利用HTML5和CSS3特性。 Zepto是类jquery语法风格的JavaScript代码库,主要用在移动设备上,只支持较新的浏 览器,好处是代码量比较小,性能也较好。是进行移动H5混合开发的首选框架。
15. React 17React最初来自Facebook内部的广告系统项目,项目实施过程中前 20端开发遇到了巨大挑战,代码变得越来越臃肿且混乱不堪,难以维护。 C于是痛定思痛,他们决定抛开很多所谓的“最佳实践”,重新思考前 AC端界面的构建方式,于是就有了React。 SReact带来了很多开创性的思路来构建前端界面,虽然选择React的 最重要原因之一是性能,而其设计思想的核心前提是认为 UI 只是把 数据通过映射关系变换成另一种形式的数据。同样的输入必会有同样 的输出。这恰好就是纯函数,其优秀的封装和抽象以及整体的逻辑梳 理对于开发者确实显得很纯粹。所以,非前端人员和前端人员对于 React的认知评价有激烈的分歧,也给其推广带来了不少困难。
16. 原生 pk Html5 Object C IOS Native App SACC2017Java 适配工作量大,UI开发低效,性能好 Android Native App 适配工作量大,UI开发低效,性能好 HTML5 Mobile Web App UI开发效率高,性能低但逐步提升 纯Native开发策略 1.UI开发复杂度大 2.重复工作量大 3.可维护性低 4.迭代速度慢 5.开发一致性差 6.软件更新麻烦 混合开发策略 1.UI开发复杂度低 2.工作量节省一半 3.可维护性高 4.迭代速度快 5.开发一致性高 6.软件更新容易
17. React pk Html5 开发方式 性能 & 体验 (1)代码结构: React Native更为合理, (1)内存:Native最少;因为React Native 组件化程度高 含有框架,所以相对较高,但是后期平稳后会 (2)UI布局:Web布局灵活度 > React 优于Native。 Native > Native 017(3)UI截面图:React Native使用的是 2原生组件, CC(4)路由/Navigation:React Native SA& Native更胜一筹 (2)CPU:React Native居中。 (3)动画:React Native动画需求基本满足。 (4)安装包体积:React Native框架打包后, 811KB。相比热更新,可以忽略和考虑资源规 划。 (5)第三方生态链:Native modules + js modules = React Native modules (5)Big ListView (6)真机体验:Native >= React Native > H5/Hybrid
18. Hybrid与传统研发模式对比 开发语言 开发成本 维护更新 设备能力 跨平台性 向后兼容 开发效率 Native APP(原生应用) Hybrid App(混合应用) 纯原生语言(ObjectC、 java、C++等) Html5或原生语言 SA复高差高差杂CC2017 低 低 简单 高 优 好 高 结论:节省70%以上的UI重复开发工作 节省40%及以上的研发人员投入
19. 7TopMobi+移动应用平台介绍 201TopMobi+移动应用开发平台是由长虹软件与服务中心移动业务线结合“端云一体”思想构造的移动应 C用抽屉式模块服务提供商。 C我们结合原生及Html5混合开发趋势技术潮流重新定义了移动应用开发。 A我们致力于简化移动应用开发技术,可以通过几行js代码遍可以实现与原生风格一致的UI或者完成原生相 S关的富媒体交互功能。 TopMobi+由“轻应用SDK”和“原生SDK”两部分组成,可以帮助开发者快速实现移动应用的开发、测试、 发布、管理和运营的全生命周期管理。 基于TopMobi+进行应用模块,开发者可以沿用之前的Object-C和Java开发习惯,但却可以极大的通过 js简化大量的底层业务开发,包括图片选取、列表展现、获取联系人、头像裁剪上传等等…TopMobi+重新定 义移动应用开发,帮开发者省心省力省事。 TopMobi+致力成为中国领先的移动应用开发平台,帮助移动应用原生及H5开发者成为Hybrid开发模式 下的移动应用专家!
20. 团队主创人员 SACC2017
21. TopMobi+技术期望特性 灵活高效的 调试纠错机制 平均研发效率 提升30% 以上 完善强大的 基础通用模块库 跨平台多设备支持 完美支撑主流手机及平板 SACC2017Top4.Mpnogbi+ 移动应用开发平台 采用Hybrid混合开发模式 有效减少冗余开发 开发成员分工明确 工作量易评估 丰富易用的UI基础控件 积木式组合开发 强大的云运营管理 平台支撑系统 封装集成第三方开发库及 开发指南库 用户数据统计及 日志上报
22. 从哪里可以了解及获取? 官方域名: topmobi.chiq-cloud.com SACC2017
23. 部分功能展示(1) SACC2017
24. 部分功能展示(2) SACC2017
25. 部分功能展示(3) SACC2017
26. 我们的研发需求是什么? SACC2017物联网层面 IPP2.0(设备连接) 智能控制 大传小/小传大 移动APP 互联网层面 用户登录/注册 网络图文展示 Camera,LBS 多屏互动 本地图片上传 芯片级音视频编解 码 Media音视频播放 JNI 保持Native策略 Hybrid 转为Html5策略
27. 我们应该如何做? 移动混合开发模式Hybrid-核心思想 适合于公司内部: 互联网、企业办公 社交化、轻应用化 轻量支付 业务功能页面开发 S9A0C%+C1200%17 Html5 develop Native develop 适合于公司内部: 物联网、高性能要求 音视频、本地编解码 高安全性要求 基础功能模块开发
28. Javascript是如何与Native交互的? SACC2017
29. 同步交互机制 核心原理: Javascript与Android Native交互是通过WebView类提供的 SACC2017addJavascriptInterface(Object object, String name)方法,将 Java类中注释为@JavascriptInterface的方法提供给js调用。 Javascript与IOS Native交互是让IOS拦截js 发出的url请求,然 后解析url以获得需要调用的IOS方法名及参数,然后通过反射机 制实现方法调用。
30. JS同步调用Android原理 在Android Activity中设置好WebView与js交互相关的设置,并执行 webView.setJavascriptInterface(new Native(webView,this), ”Native”); 7将Native类映射成js对象“Native”,然后在js中便可以通过 201window.Native.callFunction() SACC的调用形式执行Java Native类中的方法。 同步调用方法: var result = window.Native.callFunction(); 此时,Native类中callFunction()方法返回结果直接赋值给js变量result。
31. JS同步调用IOS原理 js同步调用IOS方法是通过js发出可被IOS拦截的url请求,这种url是事先约定好 的包含ios方法名称、参数及参数顺序的,IOS拦截到url后会进行解析,获得 IOS方法名称,并按顺序获得参数,然后通过反射机制调用相应方法,最后将结 果写入js中预先定义好的公共变量中,js立即获得该变量的值并清空公共变量。 SACC2017js var syncResult; var ifr = document.createElement("iframe" );ifr.src = "chmobile://com.changhong.nativ e.sync/synTest:title:message:?para js 通过iframe方式发出url请求, IOS拦截到该url IOS Url拦截器 js需要调用的方法名及参数 IOS通过反射机 制调用相应的方 法 m=" + param; document.body.appendChild(ifr); ifr.parentNode.removeChild(ifr); var currentResult = syncResult syncResult = null; IOS将执行结果写入js公共变量中, js获得当前同步调用结果,并清空 公共变量
32. 异步交互机制 核心原理: 在js异步调用native方法是通过native回调js的方法来传递结果的, 而不同的方法,其回调函数功能千差万别,难以统一,若js采用统 一的回调方法名,就会导致并发访问出错的问题,最后,开发团 队经过查阅相关技术资料、进行理论分析和编码实验,确定了如 下图所示的异步机制: C2017js调native方法前将 Ccallback存到Map中 SACallbackMap JS someFunction successCallback failCallback js调native方法时, 将Map中的回调函 数的key传入native 的方法中 Native someMethod [{key1,callback1}, {key2,callback2},...] return result&keys 根据key值找到对 应的callback commonCallback findCallback(key).call(this, result) CallbackMap.remove(key) Native调用公共callback, 传回执行结果和js传入的 key值
33. JS异步调用Android原理 js调用方式: window.Native.methodName(param1,param2,…,successKey,failKey) ; Java提供的方法应接收业务本来需要的参数外,还要接收js传过来的回调 函数的successKey和failKey,方法执行完后按以下格式调用js公共回调函 SACC2017数:commonCallback返回给js
34. JS异步调用IOS原理 js调用方式: SACC2017param是一个json数组字符串,数组第一个值,即param[0]是js要传 给IOS的js函数的回调函数键值对,数组后面的值按按业务需求约定。 url约定:chmobile://com.changhong.native.async/ + IOS方法名 + 参数规格化字符串(从param[1]开始,将键名 + “:”组成字符串 + “?param=” + 具体的param字符串)。
35. JS调用Android和IOS的兼容机制 在 Html 页 面 中 , 由 于 js 调 用 Android 接 口 采 用 JavaScriptInterface注入机制,而js调用IOS接口采用url拦截机制, 所以在 js调 用Native时 , 需要兼容移动设备操作系统 ,为此 ,在 jsSdk 中 , 定 义 全 局 变 量 : isIOS , 并 在 jsSDK 加 载 时 利 用 js 的 7navigator.userAgent和 navigator.appVersion判断当前设备操作系 1统,如果当前系统为IOS,则isIOS为true,否则为false。在调用接口 SACC20时,按如下示例方式进行:
36. 我们的移动开发平台是如何演变的? SACC2017
37. 平台演变v1.0 css Android SDK Android Native js 017Html IOS SDK ACC2CH移动开发框架包括: SUI控件库:chui.css IOS Native 正常native开发策略 缓存策略 JS方法库:chui.js 性能优化 AndroidSDK / iosSDK 消息机制 Html5层 Native层 Android App IOS App 视觉风格一致 用户体验一致 业务逻辑一致 App层
38. 平台演变v1.0 网络+存储+传感器接 口: ajax、缓存机制 Location、Media、 Camera、other native services …… JS SDK CSS SDK 高性能、可复用UI控 件: ListView、GridView、 CheckBox、 ViewPager Slider、Gallery …… Android SDK Android Native invoke callback SACC2017CHWebView Android WebView IOS WebView IOS SDK invoke callback IOS Native
39. 平台演变v1.0 移动应用开发框架 Html5 黑电 智能移动应用 统一UI控件集 跨平台、可自定义、可扩展、高仿native 白电 智能移动应用 智慧社区 移动应用 智慧医疗 移动应用 企业办公 协同 开发 SACC2017开放 H5开发者 JsSDK-通用方法集 方便的DOM选择器、事件处理、动画、ajax… JsSDK-Native功能集 方便全面的native功能封装(终端能力集合SDK封装) 轻应用更新机制 开放 Android SDK 灵活的远程更新机制(服务器端配置,无需app升级) Android端SDK底层实现及Webview壳封装 Native 移动应用 Android开发者 互联网孵化 移动应用 开放 IOS SDK IOS开发者 移动应用开发平台 IOS端SDK底层实现及Webview壳封装 开发者平台、应用申请、应用分发、应用升级、应用管理…
40. 平台演变-v2.0 SACC2017
41. 平台演变v3.0 应 用 应用A 应用B 应用C 应用D 应用E …… 层 模 块 按钮 单选框 下拉菜单 地区选择 网络请求 本地存储 安全键盘 图片浏览器 七牛云存储 信鸽推送 层 复选框 提示框… 侧滑菜单 手势密码… 视图控制 媒体操作… 加解密算法 文档阅读… 高德定位 天气… 能 力 基础布局 扩展布局 基础功能 扩展功能 开放SDK 层 17系 0统 轻应用UI子系统 2层 轻应用jsSDK子系统 第三方SDK子系统 CC桥 Html5 Javascript Plugin 接 Css3 Zepto.js, iScroll.js SA层 javascript artTemplate.js Javascript+Android/iOS Interface 引 擎 Browser Engine 层 封装CHWebView Plugin Manager Plugins 依 赖 Android Development SDK iOS Development SDK 层 第三方开放SDK
42. 平台演变v4.0 应用层 应用A 应用B 应用C 应用D …… 业务 组件层 基础 组件层 跨平台 桥接层 系统 平台层 公文管理 档案管理 内容管理 会议管理 日程管理 资产管理 合同管理 任务管理 薪酬管理 考勤管理 车辆管理 知识管理 SACC2017企业网盘 客户管理 综合行政 审批流程 在线培训 邮件代收 个人备忘 通讯录 组织机构 报表管理 权限管理 简历管理 职位发布 在线预约 定位周边 违章查询 购物车 抽奖活动 评论管理 收获地址 优惠卷 积分管理 收藏管理 商品分类 商品下单 商品详情 设备入网 工作微博 家居设备 家居房间 家居消息 家居场景 管理 管理 管理 管理 家居视频 管理 用户SDK模 设备认证 块 SDK模块 日志采集 SDK模块 手势密码模 块 指纹模块 消息推送模 块 验证码模块 即时通讯模 块 支付SDK模 块 同事圈子 商品管理 …… …… TopMobi+ 原生基础 功能 媒体 文件流 数据库 存储 网络请求 传感器 文本阅读 器 加解密 文件选择 器 图片浏览 器 安全键盘 文件上传 定位模块 二维码模 块 分享模块 语音模块 天气模块 图表SDK 区域选择 画廊控件 多选框控 件 H5动画库 …… 订阅号 微 企业号 信 服务号 ……
43. 开发实战应该具备的工具有哪些? SACC2017
44. 混合开发IDE推荐 17IntelliJ IDEA,是总部位于捷克首都布拉格的JetBrains公司(该公司还 20有WebStorm、AppCode等著名的产品)的产品,在业界被公认为最好 C的java开发工具之一,尤其在智能代码助手、代码自动提示、重构、J2EE C支持、Ant、JUnit、CVS整合、创新的GUI设计等方面的功能可以说是超 SA常的,还支持maven、grandle 等项目管理工具。它的旗舰版本还支持 HTML,CSS,javascript,PHP,MySQL,Python等,免费版只支持 Java等极少数语言。Google推出的Android studio就是基于它开发的, 但它本身是支持Android开发的,而且能够直接打开并编辑Eclipse的 Android工程。
45. 混合开发IDE推荐 SACC2017 IntelliJ IDEA IDE开发界面示意
46. Chrome浏览器debug工具 SACC2017 通过Chrome://inspect工具可以连接Android4.0以上真机,进行联调。 ■支持断点、单步等常用调试方法; ■支持主流分辨率适配效果查看(Android各系列,iPhone5s/6s/6Plus等)。
47. Chrome浏览器debug工具 SACC2017 Chrome的Debug工具联调示意截图
48. SACC2017
49. SACC2017