Upgrade to Pro — share decks privately, control downloads, hide ads and more …

跨端组件实践

 跨端组件实践

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

Baidu FEX Team

April 26, 2014
Tweet

More Decks by Baidu FEX Team

Other Decks in Technology

Transcript

  1. 唯⼀一不变的是变化 1998年 8M 32M 2014年 2G 8G 硬 件 +1T/天

    +3G/年 56K 20M / 1.5M ⺴⽹网 络 ⼯工 作 对时间和空间上的追求永不停歇
  2. 互联⺴⽹网的变化 屏幕变⼩小 移动市场规模(亿元) 0 1500 3000 4500 6000 2014年 2017年

    没有持久能源 ⻓长久待机 随⾝身携带 触摸操作 内置设备丰富
  3. 移动前端⾯面临的问题 性能问题 有限的硬件接⼝口 难以集成本地元素 ⽆无法创建尖端的界⾯面和交互 缺乏成熟的框架 构建优质应⽤用的学习成本⾼高 缺乏⼤大型应⽤用商店 第三⽅方插件年久失修 有限的⽀支付⽅方式

    盈利不如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
  4. 性能测试报告 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
  5. 本地服务架构 Web App HTML5+CSS3+JS Mobile OS OS API Local Service

    Custom Plugin Battery Camera Contacts Device Dialogs FileSystem Vibration Media … HTTP
 SOCKET
  6. 壳的架构 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
  7. 跨端组件架构 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
  8. 本地组件开发环境 $ 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