跨端组件实践

NativeApp无疑具备了所有的端能力，但上线依赖各种分发渠道和市场审核，使用不同的语言环境开发，研发成本相对较高。
WebApp具有迭代方便的优势，包括开发迭代快、上线迭代快，但端能力受限于浏览器的实现程度。HybridApp能扩展端能力，并保留了WebApp的开发迭代快优势，但产品上线也需要分发。LightApp和HybirdApp很像，区别在于LightApp解决了分发渠道的问题，同时能够扩展端能力。在参与实际项目中，我们发现一种需求：期望研发的应用能在以WebApp、HybridApp、LightApp形式运行，在具备端扩展能力的环境中用户可以获得更好的体验。受Web响应式设计的启发，我们把能够自动响应端能力的组件，抽象为一个跨端组件。本次分享包括：跨端组件概念介绍；跨端组件架构相关的设计、开发和调试；产品案例讲解；围绕移动应用开发的趋势和大家做一些探讨。

Transcript

1. 跨端组件实践 移动时代的前端 @⺩王集鹄 http://weibo.com/zswang
3. 唯⼀一不变的是变化 1998年 8M 32M 2014年 2G 8G 硬 件 +1T/天 +3G/年 56K 20M / 1.5M ⺴⽹网 络 ⼯工 作 对时间和空间上的追求永不停歇
4. 繁荣的 Web
5. 互联⺴⽹网的变化 屏幕变⼩小 移动市场规模（亿元） 0 1500 3000 4500 6000 2014年 2017年 没有持久能源 ⻓长久待机 随⾝身携带 触摸操作 内置设备丰富
6. 移动前端⾯面临的问题 性能问题 有限的硬件接⼝口 难以集成本地元素 ⽆无法创建尖端的界⾯面和交互 缺乏成熟的框架 构建优质应⽤用的学习成本⾼高 缺乏⼤大型应⽤用商店 第三⽅方插件年久失修 有限的⽀支付⽅方式 盈利不如Native 其他 0 0.125 0.25 0.375 0.5 5.20% 6.00% 9.60% 12.00% 13.50% 13.50% 20.50% 28.30% 29.20% 37.30% 45.70% what stops developers from using html5 难以放到桌⾯面 难以订阅推送 2
7. 性能测试报告 0 fps 15 fps 30 fps 45 fps 60 fps 韩国 I9300/4.2.2 国产 2A/4.2 代⼯工 5/4.4 35 17 21 58 48 45 Native Web
8. PC 端就没碰到这些问题？
9. 影响前端的关键技术 JavaScript Engine ActiveX / NPAPI 硬件接⼝口 / 本地能⼒力 性能问题 带宽
10. 移动前端的现状 NPAPI
11. 怎么解决主要问题 • JS Binding • JS Translate • Native App • …
12. HTML5 + CSS3 + Native 壳 本地服务 本地能⼒力 HTTP / SOCKET OS API
13. Hybrid + Plugin → Native + 2 or
14. 本地服务架构 Web App HTML5+CSS3+JS Mobile OS OS API Local Service Custom Plugin Battery Camera Contacts Device Dialogs FileSystem Vibration Media … HTTP
 SOCKET
15. 壳的架构 Web App HTML5+CSS3+JS Native Web View WebView/UIWebView Mobile OS HTML5
 API Cordova
 JS API OS API OS API Hybrid Plugins Custom Plugin Battery Camera Contacts Device Dialogs FileSystem Vibration Media … Cordova
 Native API
16. 什么是跨端组件 ⾃自动响应端能⼒力的组件 Web App Chrome Light2 Cordova 其他 Runtime Light Component Web Native Native Web
17. 跨端组件 视频/图集/阅读/地图 …………… …………… …………… Chrome 视频/图集/阅读/地图 …………… …………… …………… Hybrid 让⼀一部分组件先流畅起来！
18. 跨端组件架构 Web App HTML5+CSS3+JS Native Web View WebView/UIWebView Mobile OS HTML5
 API CROSS
 JS API OS API OS API CROSS Component CROSS API VideoPlayer TextReader Gallery Custom Component
19. …………… …………… …………… Hybrid 融合模式 视频/图集/阅读/地图
20. 研发跨端组件的步骤 • 需求 • 配置开发环境 • 设计 API • Web 组件开发 • 本地组件开发 • 调试
21. 本地组件开发环境 $ sudo npm install -g cordova $ cordova platform add ios $ cordova platform add android $ cordova plugin add device $ cordova create hello com.example.hello HelloWorld http://cordova.apache.org/docs/en/edge
22. Cordova Plugin 开发 package.json plugin.xml
24. Web Component
25. 声明 Web Component
29. Ripple 调试 添加⾃自定义 Runtime 环境
30. Weinre http://people.apache.org/~pmuellr/weinre/
31. WebView 远程调试 https://developers.google.com/chrome-developer-tools/docs/remote-debugging WebView.setWebContentsDebuggingEnabled(true);
32. 跨端组件的安全 ⽤用户主动触屏才会启⽤用重要功能并显⽰示状态
33. 回顾 • 什么是跨端组件？ • 为啥不⽤用本地服务的⽅方式？ • 为啥要⽤用 Web Component？ • 哪些组件合适跨端？ • 怎么开发跨端组件？
34. 参考资料 Web Component http://www.html5rocks.com/en/tutorials/webcomponents/imports/ http://www.polymer-project.org/docs/polymer/polymer.html http://html5-demos.appspot.com/static/cds2013/index.html ! Light Component Demo https://github.com/zswang/light-map ! FEX http://fex.baidu.com/
35. Thanks Q&A