跨端组件实践

 跨端组件实践

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

09ea2a62798550460527ab1cec5e8123?s=128

Baidu FEX Team

April 26, 2014
Tweet

Transcript

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

  2. None
  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

  23. None
  24. Web Component

  25. 声明 Web Component

  26. None
  27. None
  28. None
  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