2014 hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试
DESCRIPTION
2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试TRANSCRIPT
![Page 1: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/1.jpg)
⼤大众点评混合开发模式下的加速尝试EFTE框架
⼤大众点评移动架构师 - 周辉
![Page 2: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/2.jpg)
个⼈人简介 专注移动客户端开发8年有余。 接触过的移动平台包括:WinCE、Symbian、KJAVA、BREW、iOS、Android、WindowsPhone等。 2010年加⼊入⼤大众点评,领导⼤大众点评客户端的iOS技术团队。 现在在移动架构部⻔门,负责移动客户端的架构设计和Hybrid的研究等⼯工作。
联系⽅方式 微信:zhouhuishine Email: [email protected]
![Page 3: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/3.jpg)
我们为什么要开发EFTE框架?
•招不到移动开发⼈人员?iOS和Android都需要?
•每次提交都要审核,审核时间要⼀一周?
•为什么不试试现有的Hybrid框架?
![Page 4: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/4.jpg)
⽼老牌Hybrid框架 - PhoneGap
百度百科: PhoneGap是⼀一个⽤用基于HTML,CSS和JavaScript的,创建移动跨平台移动应⽤用程序的快速开发平台。它使开发者能够利⽤用iPhone,Android,Palm,Symbian,WP7,Bada和Blackberry智能⼿手机的核⼼心功能——包括地理定位,加速器,联系⼈人,声⾳音和振动等,此外PhoneGap拥有丰富的插件,可以调⽤用。
![Page 5: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/5.jpg)
对PhoneGap鸡蛋⾥里⾯面挑挑⾻骨头?
•PhoneGap太单⼀一?没法和Native⻚页⾯面互相导航?
•Web展⽰示还可以更快⼀一些吗?
![Page 6: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/6.jpg)
让我们先看看EFTE框架的实际运⾏行效果…
![Page 7: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/7.jpg)
从前端⾓角度来看,EFTE是这样的:
web前端框架
开发框架
开发⼯工具集
JS标准接⼝口
客户端框架
App外壳(可选)
离线包管理
插件库(可选)
导航中⼼心数据中⼼心Web容器
![Page 8: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/8.jpg)
local repo
mock server
dev tools
package management
cortex registry
Git
包管理后台
CI
CDN provider
packages
diff&patch
zip
CDN
app
从后台⾓角度来看,EFTE是这样的:
*Cortex是⼤大众点评的代码依赖管理器 开源地址:https://github.com/cortexjs
![Page 9: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/9.jpg)
让我们重点关注创新的两块:
离线包管理解决⽅方案
多⻚页⾯面管理解决⽅方案
—如何让⻚页⾯面加载得更快
—如何让多个⻚页⾯面导航和通信
![Page 10: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/10.jpg)
离线包管理解决⽅方案
如何让⻚页⾯面加载得更快
![Page 11: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/11.jpg)
Web⻚页⾯面的 ⼀一般加载过程
是否有缓存?
打开url
下载Html⻚页⾯面
下载CSS
下载JS
下载图⽚片等 多媒体资源
渲染⻚页⾯面
否
是本地提前缓存
执⾏行JS
![Page 12: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/12.jpg)
使⽤用包管理之后…打开url
渲染⻚页⾯面
加载本地资源
执⾏行JS
![Page 13: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/13.jpg)
客户端 服务端
md5校验通过
⽐比对历史版本
⽣生成增量包
增量包 zip_0.0.1_0.0.2
压缩
更新版本
下载解压
执⾏行增量运算
md5校验再次确认
增量更新⽰示意图 情景⼀一,本地包完整
![Page 14: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/14.jpg)
客户端 服务端
md5校验不通过
更新版本
下载解压
md5校验再次确认
全包 zip_0.0.2
压缩
增量更新⽰示意图 情景⼆二,本地包被篡改
![Page 15: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/15.jpg)
包更新流程图
为了安全:
https 多次md5校验 ⾮非对称加密
更新时机:
程序打开时 程序恢复时 切换登录时
![Page 16: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/16.jpg)
local repo
mock server
dev tools
package management
cortex registry
Git
包管理后台
CI
CDN provider
packages
diff&patch
zip
CDN
app
让我们再来看⼀一下后台架构
更新请求
下载包
*Cortex是⼤大众点评的代码依赖管理器 开源地址:https://github.com/cortexjs
![Page 17: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/17.jpg)
离线包管理解决⽅方案
• 对静态资源进⾏行预存,来加速⻚页⾯面的渲染
⼩小结
• 静态包使⽤用版本管理,使⽤用增量更新
—如何让⻚页⾯面加载得更快
![Page 18: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/18.jpg)
多⻚页⾯面管理解决⽅方案
如何让多个⻚页⾯面导航和通信
![Page 19: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/19.jpg)
使⽤用场景举例
![Page 20: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/20.jpg)
多种⻚页⾯面的导航控制
⼀一般 Web⻚页⾯面
本地 Web⻚页⾯面 Native⻚页⾯面
urlurl url
导航控制中⼼心 控制⻚页⾯面的跳转
![Page 21: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/21.jpg)
开启本地Web⻚页⾯面[efte]://package/path/to/page1.html?param1=xxx
开启⼀一般Web⻚页⾯面[http]://host/path/to/page1.html?param1=xxx
• 使⽤用[efte]标明需要启动本地Web容器 • 使⽤用package名称和路径定位离线包的位置 • 传参⽅方式与⼀一般的url⽆无异 • ⽆无需关⼼心离线包的版本
![Page 22: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/22.jpg)
开启Native⻚页⾯面[scheme]://pagename?param1=xxx
• 利⽤用映射表创建Native⻚页⾯面 • 切换映射关系可实现A/B Test • 映射表需要进⾏行加密保护
pagename1 class1
pagename2 class2
pagenameN classN
… …
page-class映射表
![Page 23: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/23.jpg)
Native Web
JS注⼊入
JS事件拦截
JSBridge
同⼀一⻚页⾯面内的通信
![Page 24: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/24.jpg)
⼀一般 Web⻚页⾯面
本地 Web⻚页⾯面Native⻚页⾯面
不同⻚页⾯面间的通信 通过监听和发布⼲⼴广播来通信
JSBridgeBroadcast
JSBridgeBroadcast
Broadcast
![Page 25: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/25.jpg)
⻚页⾯面在后台时可能会被卸载掉怎么办?
数据中⼼心 使⽤用数据中⼼心,集中管理⼲⼴广播
![Page 26: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/26.jpg)
⻚页⾯面A 注册⼲⼴广播监听 ⻚页⾯面B
发出⼲⼴广播
⻚页⾯面A 收到⼲⼴广播 更新数据 并返回
![Page 27: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/27.jpg)
⻚页⾯面⽣生命周期 View launched
View shut down
View running
html.onload()
html.onunload()
efte.onAppear()
efte.onDisappear()
efte.onRestoreData()
efte.onSaveData()
WebView was killed view navigation
⻚页⾯面显隐使⽤用: onAppear() onDisappear()
保护现场使⽤用: onRestoreData() onSaveData()
![Page 28: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/28.jpg)
多⻚页⾯面管理解决⽅方案
• 利⽤用url的规则进⾏行导航,使⽤用导航控制中⼼心进⾏行控制
⼩小结
• 多⻚页⾯面之间通过⼲⼴广播进⾏行通信,使⽤用数据中⼼心进⾏行控制
• 引⼊入⻚页⾯面⽣生命周期,处理⻚页⾯面显隐和数据的现场保护
—如何让多个⻚页⾯面导航和通信
![Page 29: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/29.jpg)
EFTE带来的改变
![Page 30: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/30.jpg)
优化Web的使⽤用体验让Web与Native更好的融合
![Page 31: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/31.jpg)
⽼老的研发格局
……项⺫⽬目组1
客户端开发iOS
客户端开发Android
前端 开发
客户端开发iOS
客户端开发Android
客户端开发iOS
客户端开发Android
前端 开发
项⺫⽬目组2
客户端开发iOS
客户端开发Android
前端 开发
客户端开发iOS
客户端开发Android
客户端开发iOS
客户端开发Android
前端 开发
项⺫⽬目组N
客户端开发iOS
客户端开发Android
前端 开发
客户端开发iOS
客户端开发Android
客户端开发iOS
客户端开发Android
前端 开发
![Page 32: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/32.jpg)
使⽤用EFTE后新的研发格局
……项⺫⽬目组1
前端 开发
前端 开发
前端 开发
前端 开发
前端 开发
前端 开发
客户端开发iOS
客户端开发Android
项⺫⽬目组2
前端 开发
前端 开发
前端 开发
前端 开发
前端 开发
前端 开发
前端 开发
前端 开发
项⺫⽬目组N
客户端开发iOS
客户端开发Android
前端 开发
客户端开发iOS
客户端开发Android
前端 开发
前端 开发
前端 开发
客户端开发需求⼤大为减少,前端开发充分利⽤用 客户端开发⼈人员的⼯工作重⼼心发⽣生转移
![Page 33: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/33.jpg)
EFTE框架在持续完善和开源中…
![Page 34: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/34.jpg)
谢谢⼤大家
(后⾯面还有附录资料)
![Page 35: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/35.jpg)
附录资料
![Page 36: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/36.jpg)
• native适合编写需要执⾏行效率和有容器限制的功能模块
• H5代码适合编写变动较⼤大的内容⻚页⾯面
• 程序升级更新native代码;静态包升级更新web资源
• 将最新静态包打包与App⼀一起发布
• Efte可以是完整App的解决⽅方案,也可以是App的⼀一部
分,只处理离线包管理和⻚页⾯面导航
Native代码和H5代码的使⽤用经验分享
![Page 37: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/37.jpg)
Android的适配中遇到的问题
• url的⻓长度限制(最⻓长2K)使⽤用分段切割,分段传输数据; 使⽤用静态⽂文件,让native访问⽂文件地址;
• 后台⻚页⾯面可能被杀掉使⽤用LocalStorage存取数据; 使⽤用数据中⼼心管理未送达的⼲⼴广播消息
• 某些系统版本的Web⻚页⾯面可能间歇性⽆无法点击
.androidpaintfix { -webkit-transform: translate3d(0,0,0); transform: translate3d(0, 0, 0); }
参⻅见 http://stackoverflow.com/questions/20409632/android-4-3-and-phonegap-cant-tap-link
⻚页⾯面加载完毕后注⼊入以下代码:
![Page 38: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/38.jpg)
Web开发调试 - iOS
https://developer.apple.com/safari/
模拟器/真机+Safari直接调试• iOS需要在设置Safari栏⺫⽬目中打开调试开关 • Safari在[develop]菜单中会出现设备的选项
![Page 39: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/39.jpg)
Web开发调试 - Android
https://developer.chrome.com/devtools/docs/remote-debugging#configure-webview
模拟器/真机+Chrome直接调试
• Android版本要求4.4.2及其以上
![Page 40: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/40.jpg)
Web开发调试 - Android其他⽅方案
Apache weinre: http://people.apache.org/~pmuellr/weinre-docs/latest/Home.html
Google Webkit Debug Proxy: https://github.com/google/ios-webkit-debug-proxy
JSConsole http://jsconsole.com/
![Page 41: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/41.jpg)
他⼭山之⽯石
• 检查更新 http cgi —> sso socket
(腾讯AK Team)
• 断点续传、分块下载和重试机制
离线包更新:
![Page 42: 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试](https://reader034.vdocuments.net/reader034/viewer/2022050702/55959f151a28ab5d2d8b467c/html5/thumbnails/42.jpg)
CortexJS开源地址:https://github.com/cortexjs
Efte开源地址:https://github.com/efte
我们的项⺫⽬目是开源的,开源地址: