Hybrid App技术批量制做APP应用与跨平台解决方案

前言

简单的聊一聊我开发了4年之久的Hybrid App(混合模式移动应用)平台开发，目前一直在持续开发与维护，支持无编程快速开发！

其本意也不是要吹捧前端有多么强大，只是用本身的实际项目阐述下对于前端开发一个更深层次的看法

PS：这不是单一的APP应用，这是一个能够快速批量制做app的一套跨平台解决方案

由于我常常在家同步更新，因此在git上放了一份，并不是开源，仅参考学习，请勿乱传播，谢谢配合（固然，没有API，没有文档，估计ES6看起来也够呛）呵呵

 

定位

开始咱们先了解下目前前端的三个大的方向定位：

• 传统的web方向
• webApp方向
• nodejs方向(这里不讨论)

传统的web开发就不提了，前端开发者都是从这个过程走过来的。随着移动端的迅猛发展，近几年前端这个职业也被抄的火热，移动web的兼容早期估计也是蛋碎了一批人了，我也是深受其害，还好电子产品更新换代的速度挺快的。因此不论是PC仍是移动端，web页面至始至终都是经过浏览器打开的，那么这样的开发来讲咱们仍是的能够笼统的定义为传统的web开发者

自从Iphone和Android这两个牛逼的手机操做系统发布以来，在互联网界今后就多了一个新的名词-Web App(意为基于WEB形式的应用程序)。咱们在iOS上开发APP，须要经过Objective-C那样精细复杂的语言去开发，这对广大的开发者而言是个不小的难题。值得庆幸的是，开发者们也能够经过开发Web APP来达到曲线救国的目的。也就是说，能够经过HTML、 CSS或者JavaScript来进行Web APP的开发。其实Web APP说白了就是一个针对Iphone、Android优化后的web站点，它使用的技术无非就是HTML或HTML五、CSS三、JavaScript，服务端技术JAVA、PHP、ASP，可是web APP的开发仍是有一个的根本问题，由于底层毕竟仍是html css js这些技术那么是没法操控跟系统相关的功能的，好比我想调节设备声音，我想调用本地的文件等等，那么这时候出了一个新的解决方案  - Hybrid App(混合模式移动应用)

Hybird的典型表明就是PhoneGap开发框架，后来被土豪Adobe收购了，简单的说PhoneGap在支持web app开发的同时还能经过它的手段：相似原生语言同样调用其本身的系统接口，其实现也是很恶心的经过截取消息，你们能够百度查找相关资料

关于Web App与Native App的好坏这里不作讨论，存在即便道理，Hybrid的存在总有它的价值

 

web App优点

那么相比Native开发web App开发最大的优点：快速！

布局多是最头疼的问题之一，移动设备的尺寸那真叫一个“丰富”，要兼容各类尺寸会搞的你焦头烂额的。在PC端咱们经常使用的手段就是固定布局、弹性布局。可是在移动端咱们可使用更新的技术，响应式布局媒体查询等等，可是根据我我的的经验：外部采用自适应布局模式，在不一样设备上能够自行缩放，中等布局能够采用em rem, 具体的图片能够采用px，可是在我项目中最终采用是计算缩放比，让全部的元素按照绝对尺寸进行缩放布局

说着说着就会离开话题很远了，那么web App的的缺点实际上是比较明显的，性能相对原生的的体验会差，至于差多少要看应用的具体设计了。好比我就作一个翻页的效果，这样来讲Native 与Hybrid是看不出区别的，可是若是是作一个植物打僵尸，这样对比就比较明显了，因此基于目前Hybird的发开仍是有很大的局限性的，我记得早2年淘宝的客户端就是基于web app开发的，有一段时间在安卓上的体验很是差

web App的开发快速便捷，可是性能比Native仍是差强人意，在系统接口的调用上也很薄弱，不论是web App仍是Native都不是什么新技术了，项目在选择开发的时候都会有各类考虑，究竟是短平快的快餐式发开，仍是高大上的原生编写，那么怎么才能平衡这些优劣，就要看各自项目的取舍了

那么问题来了，web App如何才能最恰到好处的利用起来？

 

无编程开发

若是咱们想经过一个产品引导一个产业我想目前是很难了，马云的时代不是每一个人都能抓住的。若是一个不行，那么十个百个千个呢?咱们作成一个系列产品造成的产业链？是否能够打通一个行业的缺口呢？这个未知，人生就是有了未知才会有精彩，正是由于这个未知才让咱们有了这个动力去追逐这个梦想。

一个应用开发的成本是很是大了，耗时耗力，稍微复杂点的应用都要牵涉到几个部门的协调，按照目前的的开发周期，我想一个成型的应用从设计开发到检测到上架，少说也要1个月吧，并且仍是一个团队合做以后的开发周期，基于这种开发成本考虑就算是经过web App开发的方式也不能达到产业链的效果。那么咱们就会萌生一种新的想法，可不能够不写代码就能作应用了？基于这样的设想咱们的项目的原型就出来了，基于PhoneGap的无编程快速应用开发

这是目前公司几个系列项目，都是基于无编程的实现，以前还有几个项目不过已经流产了，就不提了

• App单页面应用系列        
• 秒秒学 - 交互式软件培训
• 读酷儿童图书馆 - 儿童阅读应用

这里3个方向的项目都是属于加壳，其实底层的东西都是同一个实现，只是在不一样的项目中被各类不一样的合理利用，以前我在慕课网上的介绍写到，我有几百个苹果App Store的应用展示，还真不是呵呵，确实是有（这个连接里面进去看看）。那么这些应用其实都是HTML5+CSS3+JS实现的，就是如今比较火热的Hybrid混合应用

 

什么是无编程？

• 这是项目的的一个核心，不须要直接编程就能实现作出各类精美，复杂的应用，并且是几乎跨是有平台的
• 目前来讲能够直接经过网页在线看，也能够生成APK、IPA应用文件在移动端安装，也能够在桌面经过exe加壳运行
• 实现的代码只有一份，能够跑基于WebView的任意平台。

 

如何实现无编程？

• 简单的来讲用户能够经过一套软件，能够把具体的抽象设计给控件化，有点相似.net的控件同样，自动生成代码。

 

如何实现跨平台？

• 跨平台很简单就是经过web App技术就能够

 

如何实现？

其实最重要的2个方向咱们已经肯定了，那么咱们怎么才能实现无编程快速应用开发？

• 咱们只须要把用户想要操做的的行为告诉前端代码就就能够了
• 这里其实就是一个编程的传递了，传统的开发都是咱们开发者引导用户行为，那么如今的的方式就是让制做者引导，而不是开发者处理了，咱们开发者要作的一个事件就是，如何让编辑者的逻辑设计可以最终实现

• 用户的抽象行为是能够用数据描述的，咱们能够把用户的行为写到数据库里面，而后前端代码经过读取数据库来获取这个行为，正好HTML5的Web Sql Database就能彻底胜任这个工做的，那么咱们如今整的设计原型就出来了：经过PPT抽象用户的设计写入到数据库，前端经过读取数据库还原用户的设计

 

咱们能够看看设计者的一个编辑界面，基本office ppt 的扩展

ppt模版中多出了2个新的模块

 

 

 

 

经过ppt把记录用户行为并生成数据库

 

 

前端经过读取数据，经过H5+CSS3+JS这些技术来还原用户的行为

 

读数据

 

根据数据处理，好比音频（自动适配最合适的方法）

 

 

 

在线预览的效果

 

---

项目复杂吗

由于我只是前端的实现，不涉及其余语言，只针对我我的的理解。

整个前端目前总代码应该是超过了10万行，业务架构方面的代码应该有3-5万行左右

 

SVN的更新记录就架构这一部分是超过了1万的更新量

 

 

 

实现的功能

• 支持几乎全部支持CSS3的平台
• 支持各类分辨率、横竖模式自适应缩放
• 支持在线预览
• 支持翻页线性切换
• 支持非线性的直接切换
• 支持页面跳转
• 支持DOM与Canvas模式的独立与共存
• 支持14中事件编程与手势交互
• 支持上百种动画组合
• 支持视频与音频
• 支持路劲动画
• 支持css3 canvas的精灵动画
• 支持多层的视觉差效果
• 支持svg无损缩放
• 支持底层接口调用
• 支持脚本代码注入
• 支持用户自定义编程
• 还有什么不记得了懒得写了。。。

 

 

你们关心的问题来了：这样的前端项目，设计与实现上会涉及多少问题了？

我简单说一句：真的复杂，由于把逻辑交给了用户了，用户给能够一个对象上增长多个任意的事件、动做、动画、音频等等组合，每一个组合之间还能够相互配合实现更多的动做动画

 

关于设计

移动端的问题太多了，这么多年核心的架构重构了不下8次，我也累积了一堆的优化经验

咱们但是单页面模拟多页面切换的，因此WebView只有一个，那么传统的都是经过网页跳转切换，咱们只能经过左右滑动切换页面，那么意味着咱们要模拟出多个页面来，其实目前也有swipe这样的插件，可是针对咱们这样的模式swipe只能说是弱爆了。

• 若是有一个应用有500页，若是依次生成全部的页面，会很卡，可能还会闪退
• 移动端经过Web Sql Database获取数据，若是是经过sql查询1条数据查询要100毫秒的样子，那么咱们一个页面有的数据量有时候大到了几百上千，这样的应用可想而已
• 把每个模拟的页面看做一个容器，那么容器里面实际上是有不少不少不一样的对象的，能够有视频，能够有音频，能够有精灵，可有有各类交互，那么这些对象要如何触发，如何控制，如何销毁？
• 在咱们每一次翻页的时候，其实都要涉及不少的问题，一个新的页面载入，一个当前页面的暂停，一个久页面的销毁，由于我是模拟，这须要控制不一样页面的生命周期，每个活动对象的状态控制
• 单页面应用，内存管理是一个最大的问题，由于不退出就不会销毁，因此越复杂的应用越要有一个好的架构

其实问题还有不少，这里就不一一列出了，咱们经过phonegap打包的应用就有几百个App Store单页面应用系列，咱们还有本身的应用平台appone、读酷儿童图书馆，秒秒学 - 交互式软件培训 是基于这种模式开发的一种新的教学体验

 

关于优化

针对这种大型的应用最重要的一个点，就是性能，咱们优化的原则就是二八定律，从最消耗的地方着手

分别有:

• 节点是生成与绘制
• 大数据的读取

那么我总结的优化与结构组织的方式有：

• 经过一次平铺全部的内容页是行不通的了，由于咱们一个应用，而不是一个页面，我要已应用来认知，一个应用内部都是对象。
• 因此咱们采用了动态算法，每次根据进来的位置动态生成2-3页，在滑动的时候全动态处理，那么我项目最大的一个优化点就是，采用动态算法模拟多线程模拟建立 + 细分任务颗粒度达到了最佳的优化目的，这个多线程不是传统上的定时器那么简单的
• 大数据的处理，其实最开始采用了空间换时间的方法，经过一次把数据库的数据取出来放到内存中的缓存表中，这样小数据量还行，大数据量的话应用几乎直接闪退，缓存是须要内存的，并且就算是哈希表，若是上千条在移动端也会被拉下来，具体参考我以前写过一篇文章 移动混合应用HTML5数据查询优化
• 整个设计其实都是采用了分层结构，不一样层处理管理本身的行为，这样涉及复杂交互的时候，只须要调用各自封装好的接口就能够了
• 每个对象都是有生命的，因此就存在一个对象的管理，咱们以页面为单位，里面有几十上百的对象，那么都须要控制管理，包括对象与对象之间的通信与调用，这里咱们会引入不少设计模式来处理
• 事件有二套，一套是基于用户编辑的自定义绑定，另外一套是框架底层提供，设想下，若是一个对象不绑定事件，在它上面有手势移动就意味着不能翻页了，因此不一样的事件会有不一样的优先级的处理方案，这里也是参考了jQuery的事件机制
• 在切换页面的时候，就是一个很是复杂的逻辑了，由于是动态的就会涉及建立与销毁。因此就须要有一个控制器来管理整个事件的流程，一个页面建立，一个暂停，一个运行，一个销毁，每个页面容器内部的对象都会有不一样的动做处理
• 除此以外，咱们还有一大堆插件，动画均可以选择最佳的实现，包括iframe、widget、svg、canvas、webgL这些都会有对应的适配器去自动选择

固然还有不少不少设计上的优化这里就不一一列举了，项目最复杂的地方，我以为就是把逻辑彻底交给了编辑者了，那么我就须要在各类不一样的状况下根据数据分析出设计的的意图，并实现

 

结尾

可能有大部分人会看天书同样，不知所然，毕竟这个确实都是跟实际的项目经验有关系的，若是遇到了，能够参考

这个项目我架构这边的需求就不下200个，其实前端的架构水仍是很深的

Integration of the latest technology point node/es6/gulp/webpack/rollup/eslint/karma and so on

• development: Based on ES6
• test: Based on the webpack+express+rollup+gulp build, there is a hot replacement function
• release: Based on gulp+rollup single file package
• test: Based on karma+mocha+chai