移动H5 框架选型,Ionic,ApiCloud,WeX5还是其
1.背景
要作一个智能硬件云平台,有App/微信/网页端/后端处理.客户主要是各个智能硬件产家,界面五花八门,但是底层的通讯都是差不多.
因此选择一个快速开发界面的,但是通讯用原生的Hybird App方案.
智能硬件App有如下特别.
- 每个产家都不希望同别家撞脸.(就是界面雷同)
- 除了控制功能,其余功能基本雷同(无非是搜索设备,场景,用户设置等)
- 控制界面一般都比较复杂,(如取色盘,设备仿真显示),有一些会用复杂手势来控制,只能用原生来实现
- 对数据逻辑不会象电商类,游戏那样复杂之类,一般数据很规整.
而且我们团队开发水平是:
- 对于原生特别精通,如XCode,Android studio 的开发环境很熟悉.
- 对后端技术一般,为了与移动Html5框架,统一开发语言,选型为NodeJS相关框架
3.javascript能做一般编程,但是各种复杂用法就头大了 - html,css比较熟悉.
出于以上几点,我快速进行选型
出发点有几点,
- 我们积累大量原生代码(主要通讯底层和控制控件),不能全部丢掉.必须重用.
- 能用熟悉的XCode/Android studio来编译开发,(这样也能用Jakeins 自动构建)
- 能快速实现和切换通用界面.
- 界面层通过简单耦合的机制直接调用我们的原生代码库,而不要重度封装.
最好能多端(微信,app,网页)统一,重用一套界面.- 界面能增量更新
但是仔细分析,第5点是伪需求,因智能硬件App本身是重度原生应用,用微信只能实现很小一部分控制功能,界面上是不可能统一,因为强制统一这一点不太现实.而且微信小程序也发布了,完全可以用它重构一个轻应用.
2.Ionic 选型分析
网上流行的组合 AngularJS+ionic+cordova .
仔细分析下来.Ionic在于智能硬件控制方面缺点多多.
2.1 . Android下卡顿非常明显
腾讯的微众银行就是用Ionic开发,应该算Ionic最高水平了吧,即使我用华为Mate2 Android 4.4的机型仍然是如此. 加载时间很长,举二个明显的例子.
引导画面加载达到惊人 13秒...,每次均是如此.同样环境支付宝是一闪而过.
第一次操作指南的白线指示,正常情况应该一进入主界面就要立刻显示,但是微众银行在我操作主界面近半分钟才冒出来,此时我已经做了N多操作了.
2.2 .学习曲线对于我们太陡峭
AngularJS+ionic 都是完全新的东西,cordova要学习一半.
2.3 界面样例少
样例是
https://github.com/tonnie17/Bookmarker
2.4 开发环境
Ionic打包主要是Ionic命令行
调试工具也是五花八门,用浏览器,用命令行都有,反正与Android stuido/XCode无关
2.5 对于原生代码的支持
就是任何对原生代码的调用均需把原生代码封装成cordova插件.一方面这个封装太麻烦,
二看资料无法直接在应用里调试cordova插件,也无法单独调试cordova 插件.这个对于经常调试与原生硬件通讯代码是无法接受的.
这里看,只是用Android studio 编译运行,没有提到单步调试
android studio 开发 cordova plugin（组件）的 helloWorld
因此放弃Ionic
3. WeX5 选型分析
3.1 对于原生代码的支持
WeX5对于原生代码也是cordova插件,因此Ionic的缺点同样有
3.2 开发环境.
编译,调试,设计用WeX5自行扩展的Eclipse的实现.
打包必须传入一个打包服务器来编译.(这样,如果出现编译问题解决起来很麻烦,特别是iOS证书问题)
3.3 多端支持
这是WeX5的卖点之一,之前也分析了,对于本类硬件应用用处不大.
3.4 样例较多
因此放弃WeX5
4. ApiCloud
4.1 Android/iOS 支持
4.2 样例非常之多
4.3 开发环境
编译,设计有ApiCloud Studio
打包必须在ApiCloud云端打包
4.4 对于原生代码的支持
也必须开发插件来实现,这样也是无法调试.
5. ApiCloud SuperWebView方案
这个是对我惊喜.这个方案几乎完全满足的要求.
它是相当一个原生程序封装了ApiCloud引擎,因为开发仍然是使用我们Android studio,XCode.这样对于我们重度使用 第三方框架变成很简单,调试也很简单.
所有有ApiCloud html和css样例经过测试,可以直接移过来用.
除了第一次动态编译SDK后,都是离线在本地用原生开发环境开发.
Html5和原生事件和数据交流,还是有一点简单,只是方法调用和json数据传输,对于数据量不大应用,还不是很大问题,
界面与数据频繁更新情况,一般会直接上原生控件
6.增量更新
各家都没有什么好方案,只能自己扩展
http://mt.sohu.com/20160807/n462980916.shtml
<<用增量更新算法为 web 应用节省流量>>
http://www.ibm.com/developerworks/cn/web/1401_luyf_reducejs/
<<基于html5plus平台 实现app增量更新功能>>
http://www.itnose.net/detail/6217946.html
