融入原生能力到-WebApp

Blend:融⼊入原⽣生能⼒力到WebAppWebApp.Blend.设计思路.WebApp.为什么选择WebApp作为应⽤用开发⽅方案？Blend设计思路WebApp.Blend.什么是Blend？她能解决什么问题？设计思路WebApp.Blend设计思路.如何减⼩小开发迁移成本？WebApp“天下武功唯快不破”Blend设计思路WebAppBlend设计思路迭代速度/开发成本/性能/APIWebAppWebApp可以随时更新，⽽而NativeApp平均迭代周期为14天。NO!Blend设计思路迭代速度/开发成本/性能/APIWebAppWebApp开发成本远低于NativeApp。30天精通Web编程Blend设计思路迭代速度/开发成本/性能/APIWebAppWebApp性能低下，⽆无法实现流畅的转场动画。Blend设计思路迭代速度/开发成本/性能/APIWebAppWebApp缺乏端能⼒力，不能适⽤用于复杂应⽤用场景。Blend设计思路WebAppWeb的灵活性+Native的能⼒力HybridAppBlend设计思路WebAppPhonegap•平台⽀支持全⾯面•API数量不⾜足•性能低下Blend设计思路WebAppTitanium•学习成本⾼高•系统复杂•使⽤用⼈人数少Blend“⼀一个不⼀一样的轮⼦子”易⽤用性•渐进增强•Meta配置•前端框架能⼒力•端能⼒力•云能⼒力•UI能⼒力性能•转场动画•离线缓存•Native组件设计思路WebApp设计⽬目标Blend易⽤用性•渐进增强•Meta配置•前端框架性能•转场动画•离线缓存•Native组件能⼒力•端能⼒力•云能⼒力•UI能⼒力设计思路WebApp设计⽬目标Blend能⼒力•端能⼒力•云能⼒力•UI能⼒力性能•转场动画•离线缓存•Native组件易⽤用性•渐进增强•Meta配置•前端框架设计思路WebApp设计⽬目标Blend设计思路WebAppBlend设计思路WebAppBlendnewWebView设计思路WebAppBlend设计思路WebAppBlend设计思路WebAppBlend设计思路WebAppBlend设计思路WebAppBlend设计思路WebAppBlend设计思路WebAppBlend设计思路WebAppBlend设计思路WebAppBlend设计思路WebAppBlend设计思路WebAppBlend设计思路WebAppBlendnewWebViewnewWebView设计思路WebAppBlend设计思路WebAppBlend设计思路WebAppBlend设计思路WebAppBlend设计思路WebAppBlend设计思路WebAppBlend设计思路WebAppBlend设计思路WebAppBlend设计思路WebAppBlend设计思路WebAppBlend设计思路WebAppBlend设计思路WebAppBlend设计思路“⽤用户就是上帝”BlendWebApp设计思路“优雅降级”vs“渐进增强”BlendWebApp设计思路rank.htmlindex.htmlcat.htmlheader.htmlBlendWebApp设计思路rank.htmlindex.htmlcat.htmlheader.html 1 ul  2     lia href=# onclick='active(index)'⾸首⻚页/a/li  3     lia href=# onclick='active(rank.html)'排⾏行/a/li  4     lia href=# onclick='active(cat.html)'分类/a/li  5 /ul  6 script  7     var group = new Blend.ui.LayerGroup({  8         layers:[{  9             id:index, 10             url:index.html 11         },{ 12             id:rank, 13             url:rank.html 14         },{ 15             id:index, 16             url:cat.html 17         }] 18     }); 19     function active(id){ 20         group.active(id); 21     } 22 /scriptBlendWebApp设计思路改变开发⽅方式，挑战⽤用户习惯。BlendWebApp设计思路rank.htmlindex.htmlcat.html⾃自动甄别组件创建导航页⾯面BlendWebApp设计思路简单就是美BlendWebApp设计思路 1 !DOCTYPE html  2 html lang=zh-­‐CN  3 head  4     meta charset=UTF-­‐8  5     title测试⻚页⾯面/title  6     meta name=blend-­‐layer-­‐trigger content=.layer-­‐link  7 /head  8 body  9     a class=layer-­‐link href=百度/a 10 /body 11 /htmlBlendWebApp设计思路 1 !DOCTYPE html  2 html lang=zh-­‐CN  3 head  4     meta charset=UTF-­‐8  5     title测试⻚页⾯面/title  6     meta name=blend-­‐layer-­‐trigger content=.layer-­‐link  7 /head  8 body  9     a class=layer-­‐link href=百度/a 10 /body 11 /htmlBlendWebApp设计思路壹站式服务BlendWebApp设计思路BlendWebApp设计思路{navbar data=$navBarData}BlendWebApp设计思路 1 div data-­‐blend-­‐widget=navbar class=blend-­‐navbar blend-­‐navbar-­‐default  2     ul class=blend-­‐navbar-­‐nav  3         li  4             a href=tel:[phone]                 span class=blend-­‐icon-­‐phone/span  6                 span class=blend-­‐navbar-­‐label呼叫/span  7             /a  8         /li  9         li data-­‐blend-­‐navbar=share 10             a href=### 11                 span class=blend-­‐icon-­‐share-­‐square-­‐o/span 12                 span class=blend-­‐navbar-­‐label分享/span 13             /a 14         /li 15         ... 16         li 17             a href= 18                 span class=blend-­‐icon-­‐location-­‐arrow/span 19                 span class=blend-­‐navbar-­‐labelBug 反馈/span 20             /a 21         /li 22     /ul 23 /divBlendWebApp设计思路架构设计BlendWebApp设计思路IOSRuntimeJsToNativeBridgeAndroidRuntimeIOSAndroidBlendAPILayerLayerGroupdeviceMbaasHTMLcomponentMetaAPIBrowserNativeAPIJsAPIHTMLAPIBlendWebApp设计思路IOSRuntimeJsToNativeBridgeAndroidRuntimeIOSAndroidBlendAPILayerLayerGroupdeviceMbaasHTMLcomponentMetaAPIBrowserNativeAPIJsAPIHTMLAPIWeb组件Native加速BlendWebApp设计思路IOSRuntimeJsToNativeBridgeAndroidRuntimeIOSAndroidBlendAPILayerLayerGroupdeviceMbaasHTMLcomponentMetaAPIBrowserNativeAPIJsAPIHTMLAPI转场动画离线缓存BlendWebApp设计思路IOSRuntimeJsToNativeBridgeAndroidRuntimeIOSAndroidBlendAPILayerLayerGroupdeviceMbaasHTMLcomponentMetaAPIBrowserNativeAPIJsAPIHTMLAPI原⽣生浏览器渐进增强BlendWebApp设计思路IOSRuntimeJsToNativeBridgeAndroidRuntimeIOSAndroidBlendAPILayerLayerGroupdeviceMbaasHTMLcomponentMetaAPIBrowserNativeAPIJsAPIHTMLAPIBlendWebApp设计思路IOSRuntimeJsToNativeBridgeAndroidRuntimeIOSAndroidBlendAPILayerLayerGroupdeviceMbaasHTMLcomponentMetaAPIBrowserNativeAPIJsAPIHTMLAPI端能⼒力•应⽤用调起(Activity)•⽹网络(Connection)•⽂文件(FileSystem)•位置(Geolocation)•本地媒体(Media)•⼆二维码(QRCode)云能⼒力•帐号(Account)•轻⽀支付(Pay)•分享(Socialshare)•推送(PushUI能⼒力•转场动画(Layer)•⼿手势跟随(LayerGroup)•Native组件(FootbarBlendAPIBlendWebApp设计思路IOSRuntimeJsToNativeBridgeAndroidRuntimeIOSAndroidBlendAPILayerLayerGroupdeviceMbaasHTMLcomponentMetaAPIBrowserNativeAPIJsAPIHTMLAPI端•应⽤用调起•⽹网络•⽂文件(FileSystem)•位置(Geolocation)•本地媒体(Media)•⼆二维码(QRCode云能⼒力•帐号(Account)•轻⽀支付(Pay)•分享(Socialshare)•推送(Push)UI能⼒力