哪条路可以引领我们走向成功的彼岸？【2013年10月9日海外动力头条】在移动应用开发领域，摆在我们面前的只有3条路：混合、原生和HTML5。Native（原生）：丰富的用户体验平台定向成熟的移动应用开发方式Hybrid（混合）：使用体验与应用相似，充分利用设备自身功能多平台支持HTML5：更快的开发周期跨平台运行Real-timeupdateHybrid对于质量要求不高的普通业务应用，混合应用在大多数情况下可以提供必要的功能和合理的性能。混合移动应用程序通常使用HTML5、CSS3、JavaScript和PhoneGap编写，并在iOS、Android、WindowsPhone和黑莓设备上运行。图：使用Knockout和ASP.NETMVC的混合移动应用程序。原生应用是游戏应用等对性能和图形处理要求高，但不太在意文件大小的软件的理想选择。——不过其实可以使用PhoneGap来实现游戏开发。HTML5最后，任何追求极致轻量级的网站（或网络应用程序）都应该使用HTML5创建，并使用Bootstrap或Foundation等技术作为响应层。响应式网页设计为设备提供了一套极其精简的访问门户，技术人员可以根据需要每天对其进行调整。您是否具备管理原生平台的必要技能？影响选择的另一个重要因素是，原生应用开发需要对各种平台上的语言（如C#、Objective-C、Java）有很好的理解；相比之下，混合应用程序可以使用CSS3、HTML5和JavaScript等类似手段来实现开发。因此，混合应用带来的学习曲线比较平坦，所以开发过程比较快，成本也比较低。独立平台还是专用平台（即高性能平台）？除了学习曲线之外，原生应用还带来了平台特异性，因此我们必须为每个平台开发一个应用——相比之下，混合应用可以运行在大多数主流平台上，例如iOS、Android、WindowsPhone和黑莓等。不过，有时用户需要更高的性能，这时具有独特用户界面的特殊平台就派上用场了。在这种情况下，您可能会发现原生应用比混合应用更有优势。相反，如果性能不太重要，KendoUIMobile、SenchaTouch和jQueryMobile等移动库将足够的功能组合在一起，使完成的应用程序在不同平台和同一平台的版本之间保持一致的外观和感觉。什么时候需要关注移动应用的用户体验？对于具有多个版本的通用应用程序，特定于平台的用户体验变得非常重要。对于这类应用程序，最终用户显然不希望在Android设备上看到iOS风格的用户界面，或者在WindowsPhone上体验与Android相同的体验。而针对单一企业或业务部门的商业应用，客户可以选择不同平台的统一用户体验，从而降低开发和培训成本。如果特定平台的用户体验非常重要，那么大家最好选择以KendoUIMobile为代表的混合移动端框架。图1-使用KendoUIMobile开发的多平台混合应用程序。混合框架支持哪些平台？原生方案优于混合方案的另一个原因是“平台支持能力”。大家不妨想想这样一个例子，SenchaTouch不能支持Windows7Phone。为了编写适用于Windows7平台的移动应用程序，您可能不得不选择本机开发模型。您可以通过下图了解SenchaTouch支持的移动设备平台：图1-SenchaTouch支持的移动平台比较有限。PhoneGap对混合应用的功能支持类似于混合框架有限的平台支持能力，PhoneGap在某些情况下也表现不佳。不过PhoneGap3.0提供的功能支持已经可以满足我们的大部分需求——只要对性能要求不是太高。例如PhoneGap不支持iPhone和Blackberry的指南针功能，也不支持Blackberry、WebOS、Symbian和Bada版本的媒体功能。PhoneGap3.0在各种平台上的功能支持结果。提交PhoneGap应用前的注意事项在向AppleiTunes、GooglePlay或WindowsPhoneMarketplace等应用商店提交PhoneGap应用之前，您首先需要仔细检查是否包含了PhoneGap提供的所有功能——您的应用是否实际使用了这些功能.请务必将以下PhoneGap功能添加到您的应用程序中，包括：数据服务、运动和方向传感器、麦克风、音乐和视频库、所有者验证、相机、联系人和指南针。同样，不要关心这些功能是否真的对应用程序产生影响或在最终用户的设备上顺利运行-只需添加它们即可。有了上面列出的标准，您现在应该能够轻松地决定是否应该采用混合、本机或HTML5方法来开发移动应用程序。由于大多数使用环境倾向于提供技术门槛较低的多平台应用结果，我们不妨考虑将混合移动应用作为首选方案。#p#Hybrid移动应用混合应用之所以称为“混合”，是因为它利用HTML5和CSS3创建移动UI，同时通过JavaScript代码与移动SDK通信。HybridApp相当于一个单页应用HybridApp基本上就是一个单页应用（简称SPA），所谓SPA就是指那些只存在于单个HTML页面中的Web应用。当用户操纵应用程序的导航机制时，应用程序的“视图”将添加到DOM（或从中删除）。单页面应用程序架构最适合以下用例：1)不需要利用连续页面刷新来实现类似于本机应用程序的流畅体验的应用程序。2）UI整体在客户端创建，创建过程不需要依赖服务端的介入。这种机制对于需要离线运行的应用程序来说是一种理想的架构。PhoneGap是如何工作的？PhoneGap为移动应用程序开发人员提供了一组名为phonegap-3.0.0.js的JavaScriptAPI。这个JavaScriptAPI会调用PhoneGap特殊的平台引擎/桥接机制，进而调用原生平台SDK实现对设备的操作，比如访问联系人列表或者拨打电话。在WindowsPhone端，PhoneGap引擎/桥接机制相当于集成在WP7GapClassLib.dll文件中的SilverLight。PhoneGap引擎以每个平台的本地语言（如C#、Objective-C和Java）构建，为JavaScript开发人员提供显示界面。PhoneGapJavaScriptAPI和引擎之间的大多数通信都需要非Chrome浏览器URL。gap://SomePlugin.someMethod?arg1Name=someArg1&arg2Name=someArg2PhoneGap应用架构PhoneGap还提供了一个在非Chrome浏览器（例如，不提供用户界面的浏览器）中与HTML5、JavaScript和CSS3捆绑在一起的构建系统.PhoneGap创建系统与js、css、html绑定，当然这一切只能在非Chrome浏览器中实现。加速度计加速度计捕获设备在x、y和z轴上的运动。借助PhoneGap，您可以访问内置于iPhone、Android、WindowsPhone和黑莓等设备中的加速度计。例如，您可以通过配置App/SupportingFiles/Cordova.plist文件获取相应权限来使用iOS加速度计。插件加速度计/key>CDVAccelerometerWindowsPhone的接入方式与iOS类似。您可以通过配置Properties/WPAppManifest.xml来访问加速度计数据。加速度计会检测设备在各个方向的运动轨迹。iPhone游戏《重力迷宫》使用了加速计功能。#p#用于混合移动应用程序开发的移动框架虽然完全可以使用HTML5、CSS3和JavaScript进行编码并将其与PhoneGap捆绑在一起以为支持的平台提供本机镜像，但人们通常仍会在混合过程中选择其他类型的移动框架移动应用程序开发。这不仅节省了大量的代码行和开发时间，而且下面列出的一些流行的框架在技术社区的帮助下可以继续获得更多的功能、平台支持和实现能力。接下来，我们将分别讨论KendoUIMobile、SenchaTouch和jQueryMobile，以帮助您了解在选择混合移动应用程序框架时哪些因素最为重要。我们将在后续文章中进一步分析其他框架的优缺点。1.AppceleratorTitaniumMobile16.WebApp.net31.The-M-Project2.ApacheFlex17.XUI32.NimbleKit3.GWTmobilewebkit+gwtmobileui18.Zepto.js33.MonoforAndroid4.CNETiPhoneUI19.ChocolateChip-UI34.MonoTouch5.iPhoneUniversal20.ApplicationCraft35.qooxdoo6.JoHTML5移动应用框架21.DHTMLXTouch36.ShiVa3D7.iUI22.Corona37.RareWire8.JQTouch23.eMobc38.V-Play9.jQueryMobile24.DojoMobile39.NSB/AppStudio10.mobione25.Marmalade40.AppConKit11.PhoneGap26.KendoUI41.Trigger.io12.QuickConnect27.HandheldDesigner42.wink13.Rhodes28.Mobify.js43.ViziApps14.SenchaTouch29.iWebKit15.TapLynx30.MoaijQueryMobile-混合移动应用程序框架jQueryMobile是一个易于学习的移动框架，凭借活跃且规模庞大的技术社区和大量移动实用程序，它没有像SenchaTouch（595美元）那样陡峭的学习曲线，甚至没有KendoUIMobile（699美元）那么困难。但是，一旦jQueryMobile应用的列表项达到五十到六十个，性能就会很差（甚至直接导致手机浏览器崩溃）。另一方面，SenchaTouch能够加载超过200个条目而不会导致任何性能问题。jQueryMobile1.3.2的组件包括JavaScript(147KB)、CSS(92KB)、图像数据（约6.6MB，zip格式）和用户核心jQuery1.10.2库(91KB)。由于移动设备的内存和CPU性能有限，在解析JavaScript代码时文件大小非常重要。鉴于此，GoogleClosure编译器、Minify、YUI压缩工具相继出现，旨在剥离JavaScript代码中无意义的部分。我们将在以后单独的文章中详细阐述优先事项。在本文中，我们将重点关注移动应用程序框架。闭包可以在不影响其运行效果和原有功能的情况下，大大减少JavaScript代码的大小。为了设计jQueryMobile页面，jQueryMobile为我们提供了一套方便的代码设计工具——即Codiqa。设计好HTML、CSS和JavaScript页面后，我们可以下载zip格式的文件。请记住，由于与CSS冲突，jQueryUI（用于桌面Web应用程序的jQuery实用程序库）不能与jQueryMobile一起使用。所以我们只能直接使用jQueryMobile工具或者技术社区创建的工具。Codiqa用于创建移动用户界面。为了构建如上所示的逻辑UI，您只需使用jQueryCSS和数据属性编写熟悉的HTML代码。data属性是HTML5中的一个特性，可以帮助用户定义各种以data-为前缀的“保存任何信息”元素，这些元素不会影响页面布局。请注意，
中的data-role属性将使其成为标签和文本框的容器。KendoUIMobile——一个混合移动应用框架KendoUIMobile是一个基于MVVM的移动应用框架，带有图表和各种非常好用的移动工具，整体包售价为699美元。KendoUI支持Knockout等模型绑定，成功帮助开发者避免编写大量代码行。KendoUIMobile提供了多种实用的工具和框架来帮助用户开发混合移动应用程序。为了在移动平台上实现更流畅的布局效果，我们需要将KendoUI与Bootstrap或Foundation等布局库相结合——这是因为KendoUI本身并不是一个布局库。与完全使用JavaScript的SenchaTouch相比，KendoUI的学习曲线更为平缓，但它通过MVC架构为开发人员带来了更好的灵活性和性能。KendoUI的HierarchicalListView、ActionSheet、ListView控制机制可以很好的列出应用项目，TabletSplitView控制机制完美满足了平板设备主从复合使用环境的需求。KendoUIMobile的ActionSheet控制机制在iPhone主题下的展示效果。KendoUIMobile的ListView控件机制在WindowsPhone主题下的显示效果。KendoUIMobile的SplitView控制机制在Android平板设备主题下的显示效果。KendoUIMobileThemeBuilder可用于在特定平台上创建主题：KendoUIMobileThemeBuilder。出于性能和灵活性的考虑，KendoUIMobile的iOS主题不包含任何图像信息。所有UI元素都是使用CSS效果创建的，因此该应用程序本身看起来与真正的iOS应用程序略有不同。KendoUI利用其dataviz组件带来交互式图形效果，实现数据可视化。为了绘制图形，KendoUI会自动检测浏览器功能并使用SVG（或VML作为替代）。IE6、IE7、IE8仅支持VML；IE9支持一些SVG特性；所有其他主要浏览器都支持SVG。KendoUIMobiledataviz生成的图形效果。SenchaTouch-SenchaTouch是一种混合移动应用程序框架，以高使用复杂性和相当夸张的学习曲线换取无与伦比的性能.SenchaTouch属于MVC，完全采用JavaScript机制，这对于Web开发者来说是无法接受的，但对于Java/C#开发者来说问题不大。这带来了不便，但它的性能令人印象深刻——尤其是与jQueryMobile的弱功能相比。由于SenchaTouch最初只针对iOS，后来增加了对Android、BlackBerry和WindowsPhone的支持，您应该做好准备，它在每个平台上的性能不会完全相同。SenchaTouch提供了一堆移动实用程序，例如NavigationView&Carousel和强大的布局库。SenchaTouch中的CarouselView控制机制。与PhoneGap一样，SenchaTouch也有一个原生的打包和部署系统。因此，您可以简单地使用SenchaTouch创建一个端到端的跨平台解决方案，而无需涉及PhoneGap。#p#HTML5响应式网站我们已经在之前的文章中讨论过应用程序开发，但现在我们需要更深入地挖掘移动网站开发工作中的一些关键概念。移动浏览器移动浏览器不同于传统的桌面浏览器，因为它支持两个视图端口——布局和视觉。布局视口用于所有CSS计算；视觉视口用作当前设备屏幕上html文档的一部分。Layout视口的实际显示宽度在不同的浏览器上是不同的。iPhone上的Safari使用980像素，Opera使用850像素，AndroidWebkit使用800像素，IE使用974像素。在BlackBerry设备上，布局视图始终保持100%的原始视口大小并且永不更改。window.innerWidth//和innerHeight用于视觉视口尺寸document.clientWidth//和clientHeight用于布局视口尺寸移动浏览器支持两种视口方案-布局和视觉。哈希片段用于索引类似Ajax的网站。大多数移动网站都是基于Ajax的，这意味着只有在必要时才加载相应的内容。在典型的网站中，URL既是一种收藏和分享内容的方式，又是网站索引中的搜索引擎。然而，Ajax类型的站点，如Twitter和Facebook，将下载JavaScript代码以进行Ajax调用以请求更多内容。但这会带来一些问题：以Google为代表的搜索机制不解析JavaScript代码，也不做Ajax请求，因此永远得不到与用户浏览内容一致的页面。结果？该站点的索引机制变得混乱且无法使用。为了创建一个向搜索机制返回HTML而不是JavaScript内容的URL，我们需要使用Hash片段（例如#!）。Ajax站点或单页应用程序，如http://twitter.com/#!/mashable或www.example.com/ajax.html#!key=value将静态HTML返回到搜索机制，从而改进站点的索引编制。本节摘自Challenges&solutions-ArchitectureofaModernWebApplication-MobileApp。转载请附上原文和本文链接。
