Hybrid App 发展史

目录

  • 1 概述
  • 2 Cordova 平台
  • 3 Web 发展史
    • 3.1 静态网页
    • 3.2 动态网页
    • 3.3 客户端异步交互
    • 3.4 开发效率提速阶段
    • 3.5 移动平台
  • 4 Hybrid App 分类一
    • 4.1 多View混合型
    • 4.2 单View混合型
    • 4.3 Web主体型
    • 4.4 多主体共存型(灵活型)
  • 5 Hybrid App 分类二
    • 5.1 重架构混合模式
    • 5.2 轻架构混合模式
    • 5.3 Hybrid 优势
    • 5.4 Hybrid 劣势
  • 6 Hybrid 平台调查
  • 7 Hybrid App 调试方法
    • 7.1 调试方法汇总
    • 7.2 推荐工作流程 & 调试方法

1 概述

回顾历史,展望未来。认真分析 Hybrid 的诞生原因、发展经历、才能更好的预测 Hybrid 开发的未来前景。

问题 产生 技术,无法解决问题的技术是不存在的。

提到 Hybrid 开发,必然要提到 Web,首先让我们看一看Web发展史。

  • 静态网页:展示内容。

  • 动态网页:支持页面与服务器交互,构建了现在蓬勃发展的互联网的基础。

  • 客户端异步交互:解决了整个页面刷新的问题,优化了用户体验。

  • 开发效率提速阶段:各种功能丰富的第三方JS库迅速崛起,提高工作效率。

  • 移动平台:智能手机飞速发展,需要快速构建App,满足市场需求,Hybrid作为一种解决方案应运而生。

  • Hybrid分类
    Hybrid时间点从2012年开始,陆续出现了三种Hybrid模式 : 多View混合型、单View混合型、Web主体性;按照另一种分类方式分为 : 重架构混合模式、轻架构混合模式。
    其中,多View混合型、单View混合型属于重架构混合模式,Web主体性属于轻架构混合模式。
    当前,最流行的是Web主体性。

  • Hybrid优势

  • 跨平台、快速发布、高效开发。

  • Hybrid劣势

  • 达不到原生平台的流畅体验。


2 Cordova 平台

当前所有的Hybrid框架都是基于Cordova平台进行JS跟原生通讯。
因此Cordova平台支持的调试方式也是通用的。

ProjectName
┣ config.xml **Cordova项目配置文件**
┣ merges **针对ios、android等平台的html文件**
┣ hooks **Cordova CLI使用的项目自定义脚本**
┣ platforms
┃ ┣ android **android开发人员工作目录**
┃ ┗ ios **iOS开发人员工作目录**
┣ plugins **插件源码目录**
┗ www **H5开发人员工作目录**
  • React Native、Weex : 即保留了Hybrid应用的优势,力图解决 Hybrid 劣势

3 Web 发展史


3.1 静态网页

  • 问题

内容分享

  • 技术

  • Html

  • 年 : 1995

  • CSS

  • 年 : 1996

  • Javascript

  • 年 : 1996

  • 问题 : 客户端脚本语言


3.2 动态网页

  • 问题

动态网页问题

  • 技术
  • CGI(共用网关接口)
  • Perl
  • 年 : 1987
  • 问题 : 服务器端动态网页
  • PHP
  • 年 : 1995
  • 问题 : 服务器端动态网页
  • JSP
  • 年 : 1996
  • 问题 : 服务器端动态网页
  • ASP
  • 年 : 1996
  • 问题 : 服务器端动态网页

3.3 客户端异步交互

  • 问题

客户端交互->异步、局部页面交互

  • 技术
  • Ajax
  • 年 : 1998—2005

3.4 开发效率提速阶段

  • 问题

加快开发效率

  • 技术
  • jQuery
  • 年 : 2006
  • 问题 : JS库、浏览器的兼容性、简化dom操作,加快开发效率
  • YUI
  • 2006
  • 问题 :
  • Ruby on Rails
  • 年 : 2007
  • 问题 : 开发模式->MVC
  • NodeJS
  • 年 : 2009
  • 问题 : 待定
  • Prototypejs
  • 年 : 2009
  • 问题 : 待定
  • UnderScore
  • 年 : 2009
  • 问题 : 待定
  • AngularJS
  • 年 : 2009
  • 问题 : 谷歌 JS 前端框架
  • CoffeeScript
  • 年 : 2009-2010
  • 问题 : 作为JavaScript的转译语言
  • Backbone
  • 年 : 2010
  • 问题 : JS 前端框架
  • Web2.0 Html5
  • 年 : 2010
  • 问题 : 待定
  • EmberJS
  • 年 : 2011
  • 问题 : 待定
  • Bootstrap
  • 年 : 2011
  • 问题 : 待定
  • TypeScript
  • 年 : 2012
  • 问题 : 待定
  • React
  • 年 : 2013
  • 问题 : 构建随着时间数据不断变化的大规模应用程序
  • Vue
  • 年 : 2013
  • 问题 : 待定

3.5 移动平台

  • 问题

移动平台

  • 技术

  • Web App

  • 年 : 待定

  • 问题 : Html5移动App开发框架

  • 技术

  • JQuery Mobile

  • 轻量级框架

  • 缺点

  • 没有 MVC 多人协作 开发的概念

  • 项目比较大后 代码不易维护

  • 适用范围

  • 中小项目 1-2 个人开发很适用

  • SenchaTouch

  • 重量级的框架(需要 extjs 基础 代码复杂需要较强的程序基础)

  • 优点

  • 兼容性好,基于 MVC 世界上第一个 html5 移动开发框架

  • 可视化开发工具 sencha architect

  • Angularjs

  • 轻量级框架

  • 优点

  • 支持 MVC

  • 支持 数据双向绑定

  • 通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用

  • Hybrid App

  • 年 : 2008-2011

  • 问题 : 解决 html 无法访问设备的问题

  • React Native

  • 年 : 2015

  • 问题 : 既拥有Native的用户体验、又保留React的开发效率

  • Weex

  • 年 : 2016


4 Hybrid App 分类一


4.1 多View混合型

  • 描述

2012年常见的Hybrid App是Native View与WebView交替的场景出现。这种应用混合逻辑相对简单。
即在需要的时候,将WebView当成一个独立的View(Activity)运行起来,在WebView内完成相关的展示操作。开发难度和Native App基本相当。

  • 特点

即Native View和Web View独立展示,交替出现。
这种移动应用主体通常是Native App,Web技术只是起到补充作用。

  • 开发难度

开发难度与native app相当


4.2 单View混合型

  • 描述

这种Hybrid App的开发成本较高,开发难度较大,但是体验较好。
如百度搜索为代表的单View混合型移动应用,既可以实现充分的灵活性,又能实现较好的用户体验。

  • 特点

即在同一个View内,同时包括Native View和Web View。互相之间是覆盖(层叠)的关系。(会牺牲内存,达到显示快的效果)

  • 开发难度

开发成本较高,难度较大,但是体验较好。


4.3 Web主体型

  • 描述

这种类型开发的移动应用体验相对而言存在缺陷,但整体开发难度大幅降低,并且基本可以实现跨平台。Web主体型的移动应用用户体验的好坏,主要取决于底层中间件的交互与跨平台的能力。
从分析可见,Hybrid App中的Web主体型只要能够解决用户体验差的问题,就可以变成最佳Hybrid App解决方案类型。

  • 特点

即移动应用的主体是Web View,主要以网页语言编写,穿插Native功能的Hybrid App开发类型。

  • 开发难度

整体开发难度低,基本可以实现跨平台

  • 平台
  • appMobi : 除基础的底层能力更多是通过插件(Plugins)扩展的机制实现Hybrid
  • PhoneGap : 除基础的底层能力更多是通过插件(Plugins)扩展的机制实现Hybrid
  • WeX5 : WeX5则在揉合PhoneGap和Bootstrap等主流技术的基础上,对性能进一步做了深度优化,不但完全具备Native App对本地资源的调用能力,性能体验也不输原生;WeX5所开发出来的app具备完全的跨端运行能力,可以无需任何修改直接运行在各种前端环境上。
  • AppCan : 除了插件机制,还提供了大量的单View混合型的接口来完善和弥补Web主体型Hybrid App体验差的问题,接近Native App的体验。

4.4 多主体共存型(灵活型)

  • 描述

这是一种新型的开发模式,即支持Web主体型的应用,又支持以Native主体的应用,也支持两者混合的开发模式。

  • 平台
  • kerkee : 它具有跨平台、用户体验好、性能高、扩展性好、灵活性强、易维护、规范化、具有Debug环境、彻底解决跨域问题等特点。用户体验与Native App媲美。功能方面,开发者可随意扩展接口。

5 Hybrid App 分类二


5.1 重架构混合模式

  • 原因

“重混”架构这种依赖Native UI的混合框架,本着“Web不够,就Native来凑”的核心思路,的确提升了交互体验,但同时也带来了无法回避的显著缺点:Web和Native技术的交叉混杂让开发者的编程和调试都很不方便;尤其是无法直接运行在微信这类超级App平台之上,更是“重混”App的致命硬伤。


5.2 轻架构混合模式

  • 原因

Hybrid APP就必须坚持几个原则:UI部分必须用纯Web技术,完全采用H5技术;在底层的设备接口上,确实是JS无法完成的原生部分,需要Native技术来弥补的,也必须坚持Native技术不去侵入UI。这样一个框架就是“轻混”Hybrid APP框架。“轻混”框架才是真正的HTML5 APP框架,在技术上更轻量,成本更低、也更容易推广,能真正做到只需一次开发就能跨Android、iOS和微信等各种端发布。“轻混”才是Hybrid APP技术发展的必然方向。


5.3 Hybrid 优势

  • 跨平台
    Web内容可以做到开发一次,所有平台生效,诸多产品需要这种能力。

  • 快速发布
    iOS平台,Apple Store平均审核周期1~2周不等,甚至更长,产品的发布周期从2周到1月,这对需要快速发布的产品而言难以接受。

Android平台,应用商店众多,发布过程烦琐。虽然可以应用内升级,但是带来的问题是新App需要通过应用商店,此外APK体积庞大,2G/3G环境下体验差。

  • 高效开发
    Web开发经过20年的发展,已经将结构(HTML)、表现(CSS)、行为(JavaScript)3部分很好地分离开,在分工协作、开发效率上会具明显优势。

  • 丰富的Device API
    Web(HTML5)强调通用性,受限于标准和浏览器实现,许多有用的系统功能未能得到支持(或部分支持)。而Native最大的优势在于设备API的调用能力,只要桥接Native和Web,Web也就能够拥有这种能力。


5.4 Hybrid 劣势

  • CPU/GPU密集类应用目前看更适合Native,例如极品飞车这样的游戏。这种劣势是在不断弱化的,正如 “CSS Transform 3D”引入GPU大大缓解了Web动画不流畅的问题。

  • 静态资源从服务器端加载导致的UI展示延迟问题。这个问题可以通过Native拦截WebView通信加载已打包的公共库来缓解。


6 Hybrid 平台调查

平台 时间 Native端 JS端 特点 归属 优点 iOS版本 android版本
PhoneGap 2008-2011/7 Cordova jQuery Mobile 国外
Ionic 2013 Cordova AngularJS 国外 >=iOS7 >=Android4.1
WeX5 2014 Cordova Knockoutjs(MVVM)、requirejs、bootstrap、jquery等 国内
APICloud 2016前 Cordova JS前端文档 APICloud推行“云端一体”的理念,重新定义了移动应用开发。
APICloud为开发者从“云”和“端”两个方向提供API,简化移动应用开发技术,让移动应用的开发周期从一个月缩短到7天。
APICloud由“云API”和“端API”两部分组成,可以帮助开发者快速实现移动应用的开发、测试、发布、管理和运营的全生命周期管理
国内 SuperWebview比基础的webview或phonegap拥有更丰富的功能,支持用HTML5开发具有原生UI和UE体验的界面、同时支持调用二维码等系统功能,并且能很好的把蓝牙、WiFi和智能硬件相连接。
ExMobi 2014 Cordova 国内(烽火星空)
AppCan 2010 Cordova 国内(正益无线)
Titanium 2009-2012 Cordova 国外(Appcelerator)
NativeScript 2006 Cordova 国外(telerik)
Kinvey 2011 Cordova 国外
Kerkee 2015 待定(等待发展) 国内
React-canvas 2015 基于Canvas的UI框,预取代Html标签绘制界面。技术对比文章 国外
Pastry ---- Cordova backbone(MVVM)、requirejs、bootstrap、jquery等 --
平台 时间 Native端 JS端 特点
React Native 2015 国外
Weex 2016 国内 -

7 Hybrid App 调试方法


7.1 调试方法汇总

开发阶段 调试方法 应用场景 设备依赖 设备支持 无线支持 JS调试 编译打包 加密网络请求 优点 缺点
UI开发阶段 mockdata 开发H5端UI界面,UI界面显示模拟数据,非网络请求真实数据。 - web - - ×
整个开发阶段 console.log() 将H5日志输出到浏览器、原生端输出窗口、iOS真机日志文件。 - web
iOS真机/模拟器
android真机/模拟器
- - - 依赖开发人员打印日志的完整性
原生联调阶段 Ripple仿真 业务开发严重依赖 Cordova API 的测试 ripple-emulator npm包 教程 web - × × - 不依赖真机,模拟出真机的API接口 可以使用基于 Safari、Chrome 的调试方法代替
原生联调阶段 Weinre 调试JS业务逻辑,监听实时变量 Weinre npm包 教程 web
iOS真机/模拟器
android真机/模拟器

1 weinre这类调试工具仍属于插件性质,诸如“网络”、“本地资源”等高级调试功能无法支持
2 需要额外添加代码
- PhoneGap Developer App 与 PhoneGap Desktop App 配合使用
或者使用 phonegap serve 命令
PhoneGap Developer App 手机软件 按照教程 iOS真机/模拟器
android真机/模拟器
× × × 1 无须配置任何iOS、android、nodejs环境
2 支持 console 输出到 PhoneGap Desktop App 终端
1 严重依赖phoneGap的cordova API
2 热加载效率低
3 不能使用自定义的cordova插件
- PhoneGap Desktop App 用于给 Cordova 项目开启 serve 命令
与 PhoneGap Developer App 配合使用
PhoneGapDesktop客户端软件包 安装教程 - - - - - 见 PhoneGap Developer App 优点 1 只是作为 phonegap serve的客户端
2 热加载效率低
原生联调阶段 基于 Safari 的调试 适用 Weinre 应用场景 safari 教程 iOS真机/模拟器 真机不支持 依赖 Mac、XCode 环境
原生联调阶段 基于 Chrome 的调试 适用 Weinre 应用场景 chrome 教程 android真机/模拟器 真机不支持 依赖 Android Studio 环境
原生联调阶段 GapDebug 适用 Weinre 应用场景 GapDebug软件包下载 iOS真机
android真机
模拟器待定
× 不依赖app的开发环境 依赖 console.log() 查看日志

更多介绍参考 Debugging Cordova apps


7.2 推荐工作流程 & 调试方法

  • 推荐工作流程

  • 完成UI界面开发 -> 完成原生联调

  • 推荐调试方法

  • mockdata & console.log() -> GapDebug -> 基于Safari、Chrome方法 -> Weinre

推荐阅读更多精彩内容