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

⼤大众点评混合开发模式下的加速尝试
EFTE框架
⼤大众点评移动架构师 - 周辉

个⼈人简介
专注移动客户端开发8年有余。
接触过的移动平台包括：WinCE、Symbian、KJAVA、BREW、
iOS、Android、WindowsPhone等。
2010年加⼊入⼤大众点评，领导⼤大众点评客户端的iOS技术团队。
现在在移动架构部⻔门，负责移动客户端的架构设计和Hybrid的研
究等⼯工作。
联系⽅方式
微信：zhouhuishine
Email: zhouhuishine@163.com

我们为什么要开发EFTE框架？
•招不到移动开发⼈人员？iOS和Android都需要？
•每次提交都要审核，审核时间要⼀一周？
•为什么不试试现有的Hybrid框架？

⽼老牌Hybrid框架 - PhoneGap
百度百科：
PhoneGap是⼀一个⽤用基于HTML，CSS和JavaScript的，创建移动
跨平台移动应⽤用程序的快速开发平台。它使开发者能够利⽤用
iPhone，Android，Palm，Symbian,WP7,Bada和Blackberry智能
⼿手机的核⼼心功能——包括地理定位，加速器，联系⼈人，声⾳音和振
动等，此外PhoneGap拥有丰富的插件，可以调⽤用。

对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&patch
zip
CDN
app
从后台⾓角度来看，EFTE是这样的：
*Cortex是⼤大众点评的代码依赖管理器
开源地址：https://github.com/cortexjs

让我们重点关注创新的两块：
离线包管理解决⽅方案
多⻚页⾯面管理解决⽅方案
—如何让⻚页⾯面加载得更快
—如何让多个⻚页⾯面导航和通信

如何让⻚页⾯面加载得更快

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&patch
zip
CDN
app
让我们再来看⼀一下后台架构
下载包
更新请求
*Cortex是⼤大众点评的代码依赖管理器
开源地址：https://github.com/cortexjs

⼩小结
—如何让⻚页⾯面加载得更快
• 对静态资源进⾏行预存，来加速⻚页⾯面的渲染
• 静态包使⽤用版本管理，使⽤用增量更新

如何让多个⻚页⾯面导航和通信

多种⻚页⾯面的导航控制
url ⼀一般
url 本地
url ⻚页⾯面
⻚页⾯面Native ⻚页⾯面
WebWeb导航控制中⼼心控制⻚页⾯面的跳转

开启⼀一般Web⻚页⾯面
[http]://host/path/to/page1.html?param1=xxx
开启本地Web⻚页⾯面
[efte]://package/path/to/page1.html?param1=xxx
• 使⽤用[efte]标明需要启动本地Web容器
• 使⽤用package名称和路径定位离线包的位置
• 传参⽅方式与⼀一般的url⽆无异
• ⽆无需关⼼心离线包的版本

开启Native⻚页⾯面
[scheme]://pagename?param1=xxx
• 利⽤用映射表创建Native⻚页⾯面
• 切换映射关系可实现A/B Test
• 映射表需要进⾏行加密保护
page-class映射表
pagename1 class1
pagename2 class2
…
…
pagenameN classN

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.onSaveData()
html.onunload()
View
shut down
WebView
was killed
⻚页⾯面显隐使⽤用：
onAppear()
onDisappear()
保护现场使⽤用：
onRestoreData()
onSaveData()
view navigation

⼩小结
—如何让多个⻚页⾯面导航和通信
• 利⽤用url的规则进⾏行导航，使⽤用导航控制中⼼心进⾏行控制
• 多⻚页⾯面之间通过⼲⼴广播进⾏行通信，使⽤用数据中⼼心进⾏行控制
• 引⼊入⻚页⾯面⽣生命周期，处理⻚页⾯面显隐和数据的现场保护

优化Web的使⽤用体验
让Web与Native更好的融合

⽼老的研发格局
……
项⺫⽬目组1
客户端开发
iOS
客户端开发
Android
客户端开发
iOS
前端
开发
客户端开发
Android
客户端开发
iOS
客户端开发
Android
前端
开发
项⺫⽬目组2
客户端开发
iOS
客户端开发
Android
客户端开发
iOS
前端
开发
客户端开发
Android
客户端开发
iOS
客户端开发
Android
前端
开发
项⺫⽬目组N
客户端开发
iOS
客户端开发
Android
客户端开发
iOS
前端
开发
客户端开发
Android
客户端开发
iOS
客户端开发
Android
前端
开发

使⽤用EFTE后新的研发格局
……
项⺫⽬目组1
前端
开发
前端
开发
前端
开发
前端
开发
前端
开发
前端
开发
客户端开发
iOS
客户端开发
Android
项⺫⽬目组2
前端
开发
前端
开发
前端
开发
前端
开发
前端
开发
前端
开发
前端
开发
前端
开发
项⺫⽬目组N
客户端开发
iOS
客户端开发
Android
客户端开发
iOS
前端
开发
客户端开发
Android
前端
开发
前端
开发
前端
开发
客户端开发需求⼤大为减少，前端开发充分利⽤用
客户端开发⼈人员的⼯工作重⼼心发⽣生转移

EFTE框架在持续完善和开源中…

谢谢⼤大家
（后⾯面还有附录资料）

Native代码和H5代码的使⽤用经验分享
• native适合编写需要执⾏行效率和有容器限制的功能模块
• H5代码适合编写变动较⼤大的内容⻚页⾯面
• 程序升级更新native代码；静态包升级更新web资源
• 将最新静态包打包与App⼀一起发布
• Efte可以是完整App的解决⽅方案，也可以是App的⼀一部
分，只处理离线包管理和⻚页⾯面导航

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

Web开发调试 - iOS
模拟器/真机+Safari直接调试
• iOS需要在设置Safari栏⺫⽬目中打开调试开关
• Safari在[develop]菜单中会出现设备的选项
https://developer.apple.com/safari/

Web开发调试 - Android
模拟器/真机+Chrome直接调试
• Android版本要求4.4.2及其以上
https://developer.chrome.com/devtools/docs/
remote-debugging#configure-webview

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/

他⼭山之⽯石
（腾讯AK Team）
离线包更新：
• 检查更新 http cgi —> sso socket
• 断点续传、分块下载和重试机制

我们的项⺫⽬目是开源的，开源地址：
CortexJS开源地址：
https://github.com/cortexjs
Efte开源地址：
https://github.com/efte

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

Recommended

Recommended

More Related Content

What's hot

What's hot (6)

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

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

More from Michael Zhang

More from Michael Zhang (20)