刘铁锋：Web App主流实现框架介绍及分析

Copyright©2012MoboTapInc.Allrightsreserved.SmartPhone.CleverBrowsing.WebWebWebWebAppAppAppApp主流框架介绍主流框架介绍主流框架介绍主流框架介绍及分析及分析及分析及分析@百纳刘铁锋2012.08.18Copyright©2012MoboTapInc.Allrightsreserved.议程议程议程议程•HTML5与WebApp•WebApp发展现状•WebApp主要框架介绍•WebApp的未来Copyright©2012MoboTapInc.Allrightsreserved.HTML5HTML5HTML5HTML5的发展的发展的发展的发展HTML5:从web到平台HTML5成熟的挑战Web技术发展HTML1991199620052009CSS1JavaScript+AJAXHTML5最早网页B/S软件架构AJAX增强Web开发HTML5游戏HTML5开发者发展HTML5成长起步200920122015?发展爆发-小屏-低分辨率-低CPU-低性能浏览器硬件-可接受屏-可接受分辨率-可接受CPU-一般性能浏览器-大屏-高分辨率-高CPU-高性能浏览器-2G网络-昂贵Network-3G网络-受限数据资费-3G+网络-无限数据资费Browser-缺少HTML5支持-较差性能-部分HTML5支持-较好性能-完整HTML5支持-非常好性能Copyright©2012MoboTapInc.Allrightsreserved.Copyright©2012MoboTapInc.Allrightsreserved.NativeCodeHTML5UIPresentation√CSS3?UIRendering√HTML?Interaction√Drag&DropMultimedia√Canvas/VideoMultipleThread√AJAX/WebWorker?Network√WebSocketLocalStorage√WebStorage/WebSQLDatabaseHardwareAccess√WebGLCopyright©2012MoboTapInc.Allrightsreserved.WebAppWebAppWebAppWebApp发展发展发展发展Copyright©2012MoboTapInc.Allrightsreserved.•FBCopyright©2012MoboTapInc.Allrightsreserved.HTML5HTML5HTML5HTML5改变了什么？改变了什么？改变了什么？改变了什么？BeforeHTML5UI(Form)UI(CSS)UI(Layout)UI(Form)UI(CSS)UI(Layout)HTML5Network(Webworker,WebSocket)Multimedia(Video/Audio)Graphics&3D(Canvas/WebGL)DataLogic(WebStorage/Database)Interaction(Drag&Drop/DeviceAPI)WHSIWHGTools(Dreamweaver,VisualStudio)EcosystemDevelopmentPlatform????Copyright©2012MoboTapInc.Allrightsreserved.WebAppWebAppWebAppWebApp需要什么？需要什么？需要什么？需要什么？NativeAppFullDeviceAccessibilityOfflineAccessHighPerformanceGraphicsRenderingWebAppSmoothAnimationFundamentalLibraryDevelopmentFrameworkIDEEnhanceBrowserDeviceAPIWebStorageCanvasCSS?????????Copyright©2012MoboTapInc.Allrightsreserved.WebAppWebAppWebAppWebApp发展遇到的问题发展遇到的问题发展遇到的问题发展遇到的问题•核心问题–内核性能–硬件加速–HTML5标准•表现–无限滚动的控件？–页面切换/左划右划的流畅度？–访问硬件的能力？Copyright©2012MoboTapInc.Allrightsreserved.WebAppWebAppWebAppWebApp目前的解决方案目前的解决方案目前的解决方案目前的解决方案•基础库–JQueryMobile–Zepto–JQ.Mobi•UI框架–Sencha–JQueryUI•程序框架–AppCelerator(Hybird)Copyright©2012MoboTapInc.Allrightsreserved.基础库基础库基础库基础库Jquery:32kZepto:~8.4kJquery:allbrowserZepto:onlyformodernbrowserCopyright©2012MoboTapInc.Allrightsreserved.基础库基础库基础库基础库Copyright©2012MoboTapInc.Allrightsreserved.基础库的挑战基础库的挑战基础库的挑战基础库的挑战•浏览器兼容性问题–Webkit/IE的不同•性能问题(库大小，速度)Copyright©2012MoboTapInc.Allrightsreserved.UIUIUIUI框架框架框架框架Copyright©2012MoboTapInc.Allrightsreserved.SenchaSenchaSenchaSencha实现分析实现分析实现分析实现分析Copyright©2012MoboTapInc.Allrightsreserved.Copyright©2012MoboTapInc.Allrightsreserved.Copyright©2012MoboTapInc.Allrightsreserved.Copyright©2012MoboTapInc.Allrightsreserved.Copyright©2012MoboTapInc.Allrightsreserved.Copyright©2012MoboTapInc.Allrightsreserved.实现分析实现分析实现分析实现分析•利用Java的实现思路来实现Web的控件–Layout-Component-Style•Div嵌套复杂•事件响应复杂•控件修改的灵活性差•架构所限Copyright©2012MoboTapInc.Allrightsreserved.JQueryJQueryJQueryJQueryUIUIUIUICopyright©2012MoboTapInc.Allrightsreserved.Copyright©2012MoboTapInc.Allrightsreserved.Copyright©2012MoboTapInc.Allrightsreserved.Copyright©2012MoboTapInc.Allrightsreserved.分析分析分析分析•纯Web的UI构建方式•灵活的CSS样式调整Copyright©2012MoboTapInc.Allrightsreserved.AppCeleratorAppCeleratorAppCeleratorAppCeleratorCopyright©2012MoboTapInc.Allrightsreserved.Copyright©2012MoboTapInc.Allrightsreserved.Copyright©2012MoboTapInc.Allrightsreserved.分析分析分析分析•全套自己的UI框架•直接生成NativeApp•调试的灵活性Copyright©2012MoboTapInc.Allrightsreserved.WebAppWebAppWebAppWebApp的未来的未来的未来的未来•对浏览器的要求–内核性能–硬件加速–HTML5标准Copyright©2012MoboTapInc.Allrightsreserved.WebAppWebAppWebAppWebApp对浏览器的要求？对浏览器的要求？对浏览器的要求？对浏览器的要求？NativeAppFullDeviceAccessibilityOfflineAccessHighPerformanceGraphicsRenderingWebAppSmoothAnimationFundamentalLibraryDevelopmentFrameworkIDEEnhanceBrowserDeviceAPIWebStorageCanvasCSS?????????BrowserHTML5Support&DeviceAccessImproveAPIImproveCanvas&WebGPLFromGPUImprove?????????RuntimeJavaScriptEngineImproveCopyright©2012MoboTapInc.Allrightsreserved.海豚做了什么？海豚做了什么？海豚做了什么？海豚做了什么？Copyright©2012MoboTapInc.Allrightsreserved.海豚做了什么？海豚做了什么？海豚做了什么？海豚做了什么？Copyright©2012MoboTapInc.Allrightsreserved.海豚做了什么海豚做了什么海豚做了什么海豚做了什么CoremobW3CCommunityGroupMeetingCopyright©2012MoboTapInc.Allrightsreserved.海豚做了什么海豚做了什么海豚做了什么海豚做了什么16801190Copyright©2012MoboTapInc.Allrightsreserved.海豚做了什么海豚做了什么海豚做了什么海豚做了什么Copyright©2012MoboTapInc.Allrightsreserved.Smartphone.Cleverbrowsing