Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
⼤大众点评混合开发模式下的加速尝试 
EFTE框架 
⼤大众点评移动架构师 - 周辉
个⼈人简介 
专注移动客户端开发8年有余。 
接触过的移动平台包括:WinCE、Symbian、KJAVA、BREW、 
iOS、Android、WindowsPhone等。 
2010年加⼊入⼤大众点评,领导⼤大众点评客户端的iOS技术团队。...
我们为什么要开发EFTE框架? 
•招不到移动开发⼈人员?iOS和Android都需要? 
•每次提交都要审核,审核时间要⼀一周? 
•为什么不试试现有的Hybrid框架?
⽼老牌Hybrid框架 - PhoneGap 
百度百科: 
PhoneGap是⼀一个⽤用基于HTML,CSS和JavaScript的,创建移动 
跨平台移动应⽤用程序的快速开发平台。它使开发者能够利⽤用 
iPhone,Android,Pal...
对PhoneGap鸡蛋⾥里⾯面挑挑⾻骨头? 
•PhoneGap太单⼀一?没法和Native⻚页⾯面互相导航? 
•Web展⽰示还可以更快⼀一些吗?
让我们先看看EFTE框架的实际运⾏行效果…
从前端⾓角度来看,EFTE是这样的: 
web前端框架 
开发框架 
开发⼯工具集 
JS标准接⼝口 
客户端框架 
离线包管理 
Web容器数据中⼼心 
App外壳(可选) 
导航中⼼心 
插件库(可选)
local repo 
mock server 
dev tools 
package 
management 
cortex 
registry 
Git 
包管理后台 
CI 
CDN provider 
packages 
diff&pa...
让我们重点关注创新的两块: 
离线包管理解决⽅方案 
多⻚页⾯面管理解决⽅方案 
—如何让⻚页⾯面加载得更快 
—如何让多个⻚页⾯面导航和通信
离线包管理解决⽅方案 
如何让⻚页⾯面加载得更快
Web⻚页⾯面的 
⼀一般加载过程 
打开url 
是否有缓存? 
下载Html⻚页⾯面 
下载CSS 
下载JS 
否 
下载图⽚片等 
多媒体资源 
渲染⻚页⾯面 
是 
本地提前缓存 
执⾏行JS
使⽤用包管理之后… 
打开url 
加载本地资源 
渲染⻚页⾯面 
执⾏行JS
增量更新⽰示意图 情景⼀一,本地包完整 
客户端服务端 
md5校验通过 
⽐比对历史版本 
⽣生成增量包 
增量包 
zip_0.0.1_0.0.2 
压缩 
更新版本 
下载解压 
执⾏行增量运算 
md5校验再次确认
客户端服务端 
更新版本 
md5校验不通过 
下载解压 
md5校验再次确认 
全包 
压缩 
zip_0.0.2 
增量更新⽰示意图 情景⼆二,本地包被篡改
包更新流程图 
为了安全: 
https 
多次md5校验 
⾮非对称加密 
更新时机: 
程序打开时 
程序恢复时 
切换登录时
local repo 
mock server 
dev tools 
package 
management 
cortex 
registry 
Git 
包管理后台 
CI 
CDN provider 
packages 
diff&pa...
⼩小结 
离线包管理解决⽅方案 
—如何让⻚页⾯面加载得更快 
• 对静态资源进⾏行预存,来加速⻚页⾯面的渲染 
• 静态包使⽤用版本管理,使⽤用增量更新
多⻚页⾯面管理解决⽅方案 
如何让多个⻚页⾯面导航和通信
使⽤用场景举例
多种⻚页⾯面的导航控制 
url ⼀一般 
url 本地 
url ⻚页⾯面 
⻚页⾯面Native ⻚页⾯面 
WebWeb导航控制中⼼心控制⻚页⾯面的跳转
开启⼀一般Web⻚页⾯面 
[http]://host/path/to/page1.html?param1=xxx 
开启本地Web⻚页⾯面 
[efte]://package/path/to/page1.html?param1=xxx 
• ...
开启Native⻚页⾯面 
[scheme]://pagename?param1=xxx 
• 利⽤用映射表创建Native⻚页⾯面 
• 切换映射关系可实现A/B Test 
• 映射表需要进⾏行加密保护 
page-class映射表 
pa...
JS注⼊入 
JSBridge 
同⼀一⻚页⾯面内的通信 
Native Web 
JS事件拦截
不同⻚页⾯面间的通信通过监听和发布⼲⼴广播来通信 
Broadcast 
JSBridge 
⼀一般 
Web⻚页⾯面 
Broadcast 
JSBridge 
本地 
Broadcast 
Web Native⻚页⾯面⻚页⾯面
⻚页⾯面在后台时可能会被卸载掉怎么办? 
数据中⼼心使⽤用数据中⼼心,集中管理⼲⼴广播
⻚页⾯面A 
注册⼲⼴广播监听⻚页⾯面B 
发出⼲⼴广播 
⻚页⾯面A 
收到⼲⼴广播 
更新数据 
并返回
⻚页⾯面⽣生命周期View 
launched 
html.onload() 
efte.onRestoreData() 
efte.onAppear() 
View 
running 
efte.onDisappear() 
efte.onS...
⼩小结 
多⻚页⾯面管理解决⽅方案 
—如何让多个⻚页⾯面导航和通信 
• 利⽤用url的规则进⾏行导航,使⽤用导航控制中⼼心进⾏行控制 
• 多⻚页⾯面之间通过⼲⼴广播进⾏行通信,使⽤用数据中⼼心进⾏行控制 
• 引⼊入⻚页⾯面⽣生命周期,处...
EFTE带来的改变
优化Web的使⽤用体验 
让Web与Native更好的融合
⽼老的研发格局 
…… 
项⺫⽬目组1 
客户端开发 
iOS 
客户端开发 
Android 
客户端开发 
iOS 
前端 
开发 
客户端开发 
Android 
客户端开发 
iOS 
客户端开发 
Android 
前端 
开发 
项...
使⽤用EFTE后新的研发格局 
…… 
项⺫⽬目组1 
前端 
开发 
前端 
开发 
前端 
开发 
前端 
开发 
前端 
开发 
前端 
开发 
客户端开发 
iOS 
客户端开发 
Android 
项⺫⽬目组2 
前端 
开发 
前端...
EFTE框架在持续完善和开源中…
谢谢⼤大家 
(后⾯面还有附录资料)
附录资料
Native代码和H5代码的使⽤用经验分享 
• native适合编写需要执⾏行效率和有容器限制的功能模块 
• H5代码适合编写变动较⼤大的内容⻚页⾯面 
• 程序升级更新native代码;静态包升级更新web资源 
• 将最新静态包打包与A...
Android的适配中遇到的问题 
• url的⻓长度限制(最⻓长2K) 
使⽤用分段切割,分段传输数据; 
使⽤用静态⽂文件,让native访问⽂文件地址; 
• 后台⻚页⾯面可能被杀掉 
使⽤用LocalStorage存取数据; 
使⽤用数...
Web开发调试 - iOS 
模拟器/真机+Safari直接调试 
• iOS需要在设置Safari栏⺫⽬目中打开调试开关 
• Safari在[develop]菜单中会出现设备的选项 
https://developer.apple.com/...
Web开发调试 - Android 
模拟器/真机+Chrome直接调试 
• Android版本要求4.4.2及其以上 
https://developer.chrome.com/devtools/docs/ 
remote-debuggin...
Web开发调试 - Android其他⽅方案 
Apache weinre: 
http://people.apache.org/~pmuellr/weinre-docs/latest/Home.html 
Google Webkit Debu...
他⼭山之⽯石 
(腾讯AK Team) 
离线包更新: 
• 检查更新 http cgi —> sso socket 
• 断点续传、分块下载和重试机制
我们的项⺫⽬目是开源的,开源地址: 
CortexJS开源地址: 
https://github.com/cortexjs 
Efte开源地址: 
https://github.com/efte
Upcoming SlideShare
Loading in …5
×

2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试

1,340 views

Published on

2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试

Published in: Internet
  • Be the first to comment

2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试

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

×