Efte is a hybrid app solution open sourced by Dianping.com

1. Efte是个啥玩意⼉儿？

2. • Efte 是两栖动物，蝾螈的古称
（词源）, 发⾳音为 /eft/
• 我们⽤用蝾螈来⽐比喻点评的
Hybrid App Framework
Efte - Hybrid App Framework

3. 每个平台开发代价⾼高昂
我们要write once, run everywhere!
为啥要开发Efte框架

4. 移动端⼈人才短缺！
为啥要开发Efte框架

5. Native App审核周期太⻓长！
为啥要开发Efte框架

6. 多团队在同⼀一个代码库上发布，噩梦！
为啥要开发Efte框架

7. PhoneGap
Efte
为啥不⽤用PhoneGap？
• 把native app的特性加到web app
• 把web app的特性加到native app

8. Efte在点评的使⽤用情况
主App团购和活动阿波罗App 点评管家

9. 让我们来看看Efte
的实际运⾏行效果
Native本地静态⽂文件

10. web前端框架
开发框架
开发⼯工具集
JS标准接⼝口
native端框架
App外壳(可选)
离线包管理
插件库(可选)
导航中⼼心
数据中⼼心Web容器
Efte的客户端部分

11. local repo
mock server
dev tools
package
management
cortex
registry
Git
包管理后台
CI
CDN provider
packages
diff&patch
zip
CDN
app
Efte的服务端部分

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

13. 多⻚页⾯面管理解决⽅方案
如何让多个⻚页⾯面导航和通信

14. Native Web
JS注⼊入
拦截⾃自定义Url
JSBridge
Javascript和Native的通信

15. JSBridge - Javascript向Native通信
通信过程
使⽤用⾃自定义Url scheme作为通信途径
• [scheme]://params
• Native代码通过拦截Url、解析参数来完成通信
• Javascript新开⼀一个iframe，加载⼀一段⾃自定义url

16. 举个栗⼦子：Javascript向Native发起定位请求
var callbackId = callbacksCount++;
callbacks[callbackId] = callbackFunction;
var ifr = document.createElement('iframe');
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.contentWindow.location.href =
‘js://_?method=location&args={}&callbackId=' +
callbackId;
setTimeout(function() {
ifr.parentNode.removeChild(ifr);
}, 0);
1. Javascript通过iframe发出消息
注意这⾥里的callbackId

17. - (BOOL)webView:(UIWebView *)web shouldStartLoadWithRequest:
(NSURLRequest *)request navigationType:
(UIWebViewNavigationType)navigationType
{
if ([request.URL.absoluteString hasPrefix:[self jsScheme]]) {
[self handleMessage:[request.URL queryParams]];
return NO;
}
if ([request.URL.absoluteString hasPrefix:[self urlScheme]]) {
NSDictionary *query = request.URL.queryParams;
NSString *unit = request.URL.host;
NSString *path = request.URL.path;
[self efteOpenUnit:unit path:path withQuery:query];
}
return YES;
}
举个栗⼦子：Javascript向Native发起定位请求
2. Native拦截Url，并分发请求（以iOS为例）

18. 直接向⻚页⾯面注⼊入Javascript
JSBridge - Native向Javascript通信
iOS
• stringByEvaluatingJavaScriptFromString
Android
• loadUrl

19. 举个栗⼦子：Native向Javascript返回定位信息
NSString *callbackId = @"1";
NSString *retString = @"{"status": 1, "lng": 121.427165,
"lat": 31.222093, "accuracy": 5}”;
NSString *js = [NSString stringWithFormat:@"window.Efte &&
window.Efte.callback && window.Efte.callback(%@,%@);",
callbackId, retString];
[self.webView
performSelector:@selector(stringByEvaluatingJavaScriptFromStrin
g:) withObject:js afterDelay:0];
Native注⼊入Javascript（以iOS为例） 还记得前⾯面js传过来的callbackId吗
调⽤用系统⽅方法注⼊入Javascript

20. 现在来看多个⻚页⾯面之间如何通信

21. 使⽤用场景举例

22. ⻚页⾯面1 ⻚页⾯面2
消息中⼼心
不同⻚页⾯面间的通信通过监听和发布⼲⼴广播来实现
JSBridge
Broadcast
JSBridge
Broadcast
Broadcast
监听⼲⼴广播 发布⼲⼴广播

23. ⻚页⾯面1
注册⼲⼴广播监听 ⻚页⾯面2
发出⼲⼴广播
⻚页⾯面1
收到⼲⼴广播
更新数据
并返回

24. 离线包管理解决⽅方案
如何让⻚页⾯面加载得更快

25. Web⻚页⾯面的
⼀一般加载过程
是否有缓存？
打开url
下载Html⻚页⾯面
下载CSS
下载JS
下载图⽚片等
多媒体资源
渲染⻚页⾯面
否
是
本地提前缓存
执⾏行JS

26. 使⽤用包管理之后…
打开url
渲染⻚页⾯面
加载本地资源
执⾏行JS

27. Efte的本地包结构- 以apollo为例
unit-m-home unit-m-customer
unit-m-myunit-m-order
unit-m-contract …
初始安装app的时候就会把静态包部署在⼿手机上
程序会定期检查并更新本地静态包
每个静态包都独⽴立存在

28. 为了安全：
https
多次md5校验
⾮非对称加密
更新时机：
程序打开时
程序恢复时
切换登录时
包更新流程图

29. local repo
mock server
dev tools
package
management
cortex
registry
Git
包管理后台
CI
CDN provider
packages
diff&patch
zip
CDN
app
让我们再来回顾⼀一下Efte的服务端部分
更新请求
下载包

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

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

32. 独⽴立开发，独⽴立上线
Efte的优势
只需前端技能即可开发移动应⽤用程序
write once, run everywhere
静态包⽆无需审核，可以⾃自动更新、灰度发布

33. Efte的挑战
android的⽣生命周期对页⾯面的影响
javascript和native的通信有⼤大⼩小限制（交互⽅方式所致）
android碎⽚片化导致web view的兼容性问题

34. Q&A