⼤大众点评混合开发模式下的加速尝试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标准接⼝口

客户端框架

App外壳(可选)

离线包管理

插件库(可选)

导航中⼼心数据中⼼心Web容器

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

离线包管理解决⽅方案

• 对静态资源进⾏行预存，来加速⻚页⾯面的渲染

⼩小结

• 静态包使⽤用版本管理，使⽤用增量更新

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

多⻚页⾯面管理解决⽅方案

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

使⽤用场景举例

多种⻚页⾯面的导航控制

⼀一般 Web⻚页⾯面

本地 Web⻚页⾯面 Native⻚页⾯面

urlurl url

导航控制中⼼心 控制⻚页⾯面的跳转

开启本地Web⻚页⾯面[efte]://package/path/to/page1.html?param1=xxx

开启⼀一般Web⻚页⾯面[http]://host/path/to/page1.html?param1=xxx

• 使⽤用[efte]标明需要启动本地Web容器 • 使⽤用package名称和路径定位离线包的位置 • 传参⽅方式与⼀一般的url⽆无异 • ⽆无需关⼼心离线包的版本

开启Native⻚页⾯面[scheme]://pagename?param1=xxx

• 利⽤用映射表创建Native⻚页⾯面 • 切换映射关系可实现A/B Test • 映射表需要进⾏行加密保护

pagename1 class1

pagename2 class2

pagenameN classN

… …

page-class映射表

Native Web

JS注⼊入

JS事件拦截

JSBridge

同⼀一⻚页⾯面内的通信

⼀一般 Web⻚页⾯面

本地 Web⻚页⾯面Native⻚页⾯面

不同⻚页⾯面间的通信 通过监听和发布⼲⼴广播来通信

JSBridgeBroadcast

JSBridgeBroadcast

Broadcast

⻚页⾯面在后台时可能会被卸载掉怎么办？

数据中⼼心 使⽤用数据中⼼心，集中管理⼲⼴广播

⻚页⾯面A 注册⼲⼴广播监听 ⻚页⾯面B

发出⼲⼴广播

⻚页⾯面A 收到⼲⼴广播 更新数据 并返回

⻚页⾯面⽣生命周期 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()

多⻚页⾯面管理解决⽅方案

• 利⽤用url的规则进⾏行导航，使⽤用导航控制中⼼心进⾏行控制

⼩小结

• 多⻚页⾯面之间通过⼲⼴广播进⾏行通信，使⽤用数据中⼼心进⾏行控制

• 引⼊入⻚页⾯面⽣生命周期，处理⻚页⾯面显隐和数据的现场保护

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

EFTE带来的改变

优化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代码；静态包升级更新web资源

• 将最新静态包打包与App⼀一起发布

• Efte可以是完整App的解决⽅方案，也可以是App的⼀一部

分，只处理离线包管理和⻚页⾯面导航

Native代码和H5代码的使⽤用经验分享

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

https://developer.apple.com/safari/

模拟器/真机+Safari直接调试• iOS需要在设置Safari栏⺫⽬目中打开调试开关 • Safari在[develop]菜单中会出现设备的选项

Web开发调试 - Android

https://developer.chrome.com/devtools/docs/remote-debugging#configure-webview

模拟器/真机+Chrome直接调试

• Android版本要求4.4.2及其以上

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/

他⼭山之⽯石

• 检查更新 http cgi —> sso socket

（腾讯AK Team）

• 断点续传、分块下载和重试机制

离线包更新：

CortexJS开源地址：https://github.com/cortexjs

Efte开源地址：https://github.com/efte

我们的项⺫⽬目是开源的，开源地址：