前端hybrid开发介绍实例，hybrid开发

　某OTA-前端开发技术体系

　原生开发的优/缺点

　优点：

　用户体验极佳，渲染速度快于H5，动画效果绚丽等等

　直接可调用原生功能（通讯录、摄像头等等）

　可离线使用

　调试透明

　缺点：

　开发成本高

　兼容设备有限

　商店内容限制

　用户更新不能控制

　混合开发的优/缺点

　优点：

　从人员和时间成本上，学习成本低，开发效率高于原生开发

　兼容多个平台，ios/android/M站/微信/小程序

　控制用户更新，无需等待发包

　无商店内容限制

　可离线使用

　缺点：

　用户体验不如纯原生应用，没有绚丽的效果，渲染/响应速度慢，动画支持不好等等

　整体打包文件比较大

　调试稍繁琐

　需要定义私有协议调用原生功能（通讯录、摄像头等等）

　基于以上几点，我们制定了，

　首页+搜索列表是原生界面，活动专题页+产品详情+预订流程页+支付均为H5混合页面的技术体系

　源码托管及工作流

　基于github flow，适合每周二/四上线，上线完成Master合并到future分支。

　指引阅读：http://www.ruanyifeng.com/blog/2015/12/git-workflow.html

　本地服务跑起来

　node / nginx / iis 起一个资源站点服务，再起一个站点服务用于托管页面（如果资源没有单独域名就更方便了）

　数据模拟+数据绑定

　如果后台有数据了，直接调用即可。

　如果没有可以用http://www.easy-mock.com

　前端时间多前端绑定，后端人多后端绑定。去年用的ng1，现在在重构到vue2，切换无压力~

　测试环境

　git 提交代码到 gitlab服务器，gitlab发出hook钩子给 服务器jenkins，Jenkins接收信息，触发 前端构建

　hosts绑定 服务器IP，打开浏览器即可

　开发调试

　M站： hosts绑定本机，chrome模拟机，sourceMap调试

　app：charles/fiddler，手机指向电脑IP代理，开发走debug包，调试模式，打开safari 或者 chrome://inspect ，sourceMap调试