移动WebApp开发JS框架对比

1  目的

本次评比的目标是以移动Web App开发为基础的JS框架，会有意的排除部分不适用于移动Web App开发的JS框架，如 jQuery、ExtJS等。希望通过这次评比结果，能找到最合适你移动Web App应用开发的JS框架。

2   方法

由于JS框架在功能、特性和应用领域不同，所以，我将现在的主流JS框架分成四个大类：

• Mobilie Javascript Library。移动JS框架，在Desktop Javascript开发中具有代表性的JS框架有jQuery、ExtJS等，而在Mobile Javascript开发中比较成熟的有Sencha Touch、jQuery Mobile等；
• Javascript Template Engine。JS模版引擎，Javascript 在生成各种页面内容时如果能结合一些模板技术，可以让逻辑和数据之间更加清晰。Sencha Touch自带XTemplate模版引擎，完美的应用在组件渲染中；
• Javascript MVC Framework。JS MVC框架，如Backbone、Ember等。在ExtJS 4的应用架构中就设计有MVC模式，同时Sencha Touch很好的继承了ExtJS在MVC方面的优秀架构思想；
• Javascript Module Loader。JS模块化加载，在CommonJS提出AMD规范时，就得到了大多数开发者的积极响应，同时诞生了一批符合 AMD规范的优秀的框架，如RequireJS，现在主流的JS框架都陆续开始支持AMD规范 ，如Dojo等。

本篇文章主要对Mobilie Javascript Library进行对比，针对移动JS框架中的两类特性:

• 支持平台与兼容性
• 开发与学习

作为参考指标，最后分析总结。 

3   Mobile Javascript Library

Mobile Javascript Library 包含两种类型的JS库：UI框架、类库

• UI框架包含一套完整的WebApp用户体验，提供一组功能丰富的控件，并允许开发者方便地依照自己的需要加以扩展；
• 类库仅是一些类与函数的集合，类库中的一个个“完整的概念”之间是无关的或是关系松散的。

以我们接触得比较多的两种Desktop Javascript Library为例，ExtJS属于UI框架，而jQuery就是一个类库。

3.1 选择移动JS框架思考的问题

• 优秀的触摸屏交互体验：手指作为输入设备代替鼠标光标提供了一个额外的用户界面设计的挑战。MobileJavascript Library提供标准的用户界面元素和事件处理模型。
• 跨平台：支持多种移动设备平台，如 iOS和Android等 。
• 轻量级：由于移动网络带宽的限制，会更加重视文件大小 。
• 使用HTML5和CSS3标准：大多数主流移动设备的网页浏览器支持HTML5和CSS3，移动WebApp使用W3C规范的新功能与特性为用户提供更好的体验。

下面，通过比较Mobile Javascript Library的特性，找到一个最适合的JS框架帮助你创建移动WebApp应用。

3.2 特性比较

3.3 分析

Sencha Touch

优点

•   用户体验最接近Native App， 具有整体的UI组件、布局解决方案；

•   统一的编程代码结构和要求，良好组织的代码易于维护；

•   继承ExtJS 4的应用程序MVC架构；

•   完善的API文档，示例；活跃的社区，网上有大量的文档书籍帮助学习；

缺点

•   兼容性差，仅支持webkit内核的浏览器；

•   框架比较重量级，学习成本比较高；

•   商业化使用有版权问题；

jQuery Mobile

优点

•   跨浏览器兼容性最好，几乎兼容所有的平台和浏览器；

•   入门简单，语法简洁，编码灵活，一些简单的应用直接用HTML既可实现，无需Javascript；

•   开源插件与第三方扩展网上资源丰富；

•   完善的API文档，示例；活跃的社区，网上有大量的文档书籍帮助学习；

缺点

•   jQuery Mobile对代码没有特定的要求，后期维护难度较大；

Zepto

优点

•   学习成本低，Zepto保持了与jQuery几乎一样的功能，使用gzip压缩只有5-10k；

缺点

•   Zepto不支持Windows Phone下的IE ；

Jo HTML5 Mobile App Framework

优点

•   没有什么突出的优点，感觉是与Sencha非常相似的一个框架；

缺点

•   兼容性相比Sencha Touch稍好一点，但是也不支持WP IE、Firefox、Opera；

•   网上文档、资料太少，中文资料几乎没有，英文资料也非常少；

Wink Toolkit

优点

•   Wink的核心库是轻量级的，支持AMD规范的模块化加载，功能接口相比Zepto更丰富；

•   提供很酷的2D、3D效果UI组件；

缺点

•   组件对 Android的支持程度不好，3D组件无法使用 ；

ChocolateChip-UI

优点

•   组件样式模仿iOS界面，用户体验与iOS非常相似；

缺点

•   兼容性差，仅支持webkit内核的浏览器；

•   API文档太简单，网上资料非常少，社区没有活力；

•   组件扩展难度高，要熟悉WMXL标签语法；

XUI

优点

•   XUI有多个版本，跨浏览器支持的代码都被剥离，使用GZIP压缩之后最小只有4.2kb。学习成本低，与jQuery相似的链式语法。

缺点

•   XUI的优点也是缺点，有的Web App应用可能并不希望将跨浏览器支持拆分为多个版本使用；

Dojo Mobile

优点

•   Dojo本身有很多优秀的设计，面向对象、MVC、JS模块化加载；

•   完善的API文档，示例；活跃的社区，网上有大量的文档书籍帮助学习；

缺点

•   Dojo Mobile需要依赖完整的dojo库，压缩之后的代码140k，gzip压缩之后在40k；

•   兼容性差，仅支持webkit内核的浏览器；

•   学习成本高；

4   总结

想要最好的用户体验Sencha Touch会是最好的选择，想要最好的兼容性应当选择jQuery Mobile，如果有相当强大的UI团队，Zepto、XUI会是更好的选择，适合的才是最好的。

对于我个人而言，我比较青睐Zepto这种小巧灵活的类库，能让我有最大的自由发挥空间。我在面向对象、UI组件、MVC方面拥有多年的开发经验，有能力去设计、编写 UI框架，当然，这些都离不开我的UI团队的支持。虽然Zepto不兼容IE，但是这在可接受的范围之内， 如果未来官方不能支持IE 的话，我的团队有足够的实力与时间实现Zepto对IE的兼容 。

选择一个适合的移动JS框架只是开始，移动WebApp开发才是真正的挑战，如何解决跨平台的各种兼容问题？如何保证基于HTML5的WebApp的稳定性？如何平衡动画效果的性能问题？等等。