跨端组件实践 - Speaker Deck

Slide 1

Slide 1 text

跨端组件实践移动时代的前端 @⺩王集鹄 http://weibo.com/zswang

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

唯⼀一不变的是变化 1998年 8M 32M 2014年 2G 8G 硬件 +1T/天 +3G/年 56K 20M / 1.5M ⺴⽹网络⼯工作对时间和空间上的追求永不停歇

Slide 4

Slide 4 text

繁荣的 Web

Slide 5

Slide 5 text

互联⺴⽹网的变化屏幕变⼩小移动市场规模（亿元） 0 1500 3000 4500 6000 2014年 2017年没有持久能源⻓长久待机随⾝身携带触摸操作内置设备丰富

Slide 6

Slide 6 text

移动前端⾯面临的问题性能问题有限的硬件接⼝口难以集成本地元素⽆无法创建尖端的界⾯面和交互缺乏成熟的框架构建优质应⽤用的学习成本⾼高缺乏⼤大型应⽤用商店第三⽅方插件年久失修有限的⽀支付⽅方式盈利不如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

Slide 7

Slide 7 text

性能测试报告 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

Slide 8

Slide 8 text

PC 端就没碰到这些问题？

Slide 9

Slide 9 text

影响前端的关键技术 JavaScript Engine ActiveX / NPAPI 硬件接⼝口 / 本地能⼒力性能问题带宽

Slide 10

Slide 10 text

移动前端的现状 NPAPI

Slide 11

Slide 11 text

怎么解决主要问题 • JS Binding • JS Translate • Native App • …

Slide 12

Slide 12 text

HTML5 + CSS3 + Native 壳本地服务本地能⼒力 HTTP / SOCKET OS API

Slide 13

Slide 13 text

Hybrid + Plugin → Native + 2 or

Slide 14

Slide 14 text

本地服务架构 Web App HTML5+CSS3+JS Mobile OS OS API Local Service Custom Plugin Battery Camera Contacts Device Dialogs FileSystem Vibration Media … HTTP  SOCKET

Slide 15

Slide 15 text

壳的架构 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

Slide 16

Slide 16 text

什么是跨端组件⾃自动响应端能⼒力的组件 Web App Chrome Light2 Cordova 其他 Runtime Light Component Web Native Native Web

Slide 17

Slide 17 text

跨端组件视频/图集/阅读/地图 …………… …………… …………… Chrome 视频/图集/阅读/地图 …………… …………… …………… Hybrid 让⼀一部分组件先流畅起来！

Slide 18

Slide 18 text

跨端组件架构 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

Slide 19

Slide 19 text

…………… …………… …………… Hybrid 融合模式视频/图集/阅读/地图

Slide 20

Slide 20 text

研发跨端组件的步骤 • 需求 • 配置开发环境 • 设计 API • Web 组件开发 • 本地组件开发 • 调试

Slide 21

Slide 21 text

本地组件开发环境 $ 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

Slide 22

Slide 22 text

Cordova Plugin 开发 package.json plugin.xml

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

Web Component

Slide 25

Slide 25 text

声明 Web Component

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

Ripple 调试添加⾃自定义 Runtime 环境

Slide 30

Slide 30 text

Weinre http://people.apache.org/~pmuellr/weinre/

Slide 31

Slide 31 text

WebView 远程调试 https://developers.google.com/chrome-developer-tools/docs/remote-debugging WebView.setWebContentsDebuggingEnabled(true);

Slide 32

Slide 32 text

跨端组件的安全⽤用户主动触屏才会启⽤用重要功能并显⽰示状态

Slide 33

Slide 33 text

回顾 • 什么是跨端组件？ • 为啥不⽤用本地服务的⽅方式？ • 为啥要⽤用 Web Component？ • 哪些组件合适跨端？ • 怎么开发跨端组件？

Slide 34

Slide 34 text

参考资料 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/

Slide 35

Slide 35 text

Thanks Q&A