HTML5 UI框架

Question

我在那里找到了很多HTML5 UI框架,例如:

• 剑道
• Wijmo
• jqWidgets
• 斑马
• 煎茶
• SproutCore的
• YUI
• XUI
• 屏蔽UI

我有点不知所措的那么多资源.看了一些,但几乎所有看起来都太慢和重量级.

我对将要学习哪一个感到困惑.他们的每个网站都在谈论他们的产品,就好像他们是市场上最好的产品一样.(明显的营销策略).

作为Web应用程序开发和客户端JS UI框架的初学者; 你们,根据你的经验考虑速度,小部件集合,复杂性,外观,支持等,你推荐哪些快速桌面Web应用程序开发？

你建议我开始学习哪一个？

我知道可能有很多答案,每个人都喜欢不同的答案,但这可能有助于指导我一些,并对一些最流行的框架有一些批评.

Answer 1

你的问题中有很多,答案不容易,根本不明确.它也会非常自以为是.看看你带来的框架清单,我看到了几乎无法相互比较的非常不同的东西.我将尝试以某种方式对它们进行分组,并在列表中添加更多框架.

这里的主要问题不是特定框架的利弊.主要问题是:你想要多少钱？你真的是指Gmail或Grooveshark这样的应用吗？或者你的意思是Stackoverflow - 一个动态的,并不简单,但仍然是一个网站.让我们考虑所有这些选项.

也许,你只是想用一些小部件来增强你的网站,比如标签,对话框,一些可拖动/可放置的元素,文本编辑等,你不愿意改变你的开发模型.我的意思是,你使用自己喜欢的Java/PHP/Ruby,并且不希望在JavaScript中编写很多应用程序的逻辑和行为.在这种情况下,基于jQuery的类似插件的解决方案将为您做到,尤其是jQuery UI和jQuery Mobile.

jQuery小部件遵循其插件系统.这通常意味着它们非常易于使用.为了创建一个按钮,你写道:

$('#myButton').button();

现在,如果要禁用它,可以使用以下模式调用方法:

$('#myButton').button('disable');

获取或设置值,例如在slider或datepicker上,如下所示:

$('#mySlider').slider('value');
$('#mySlider').slider('value', 42);

如您所见,基于jQuery的解决方案没有模型.您的所有数据都保存在DOM中,并通过古怪的方法调用获得.如果您需要动态处理数据,例如进行一些复杂的验证,在后台加载某些内容,过滤或排序,那么您会发现这很快就会变得混乱.顺便说一句,这就是为什么jQuery UI团队还没有提供网格控件的问题 - 如果没有模型,他们就无法做到这一点.在jQuery Mobile中,您可以通过简单的标记获得一个不错的移动UI,但是没有官方的方法来在页面之间传递数据.

总结一下:如果您有一个多页网站,如果您发布表单,那么使用jQuery UI或更轻松的解决方案,如Twitter Bootstrap.

也许,您希望构建更复杂,更像应用程序的东西(单页应用程序？).您知道您需要在客户端使用数据.那你有什么选择？

您可以使用许多JavaScript框架中的一个,它们为您提供模型,数据绑定以及可能的其他创建Web应用程序的方法,并将它们与jQuery UI进行集成.或者您可以使用更完整的框架,如Kendo或Wijmo或jqWidgets.这些框架依赖于jQuery(Wijmo依赖于jQuery UI)并提供额外的数据操作方法.他们有数据模型.Kendo实现了自己的解决方案(我认为),而Wijmo和jqWidgets与流行的Knockout JS集成.

因此,Kendo和Wijmo属于提供小部件/控件和一些支持模型的框架组.还有其他像这样的框架,它们不是基于jQuery的,例如Dojo Toolkit.添加一些动态数据加载,你会得到一个有点复杂的Web应用程序.你还想要什么？

实际上,最重要的是忘记了 - 你如何构建(组织)你的应用程序？如果您尝试构建一个以RESTful方式与服务器通信的单页应用程序,那么如果您的应用程序没有架构,您很快就会陷入混乱.通常需要的功能是一些关注点分离(MVC,MVVM),模板,路由和模块管理.这是SproutCore和Sencha出现的地方.它们为构建Web应用程序提供了全面的解决方案,其中小部件只是其中的一小部分.

看起来SproutCore和Sencha可能是赢家,因为它们是包含UI和业务逻辑的最完整的解决方案,也可以构建您的应用程序.尽管有所有专业人士,但仍有一些缺点.有人说他们太重量级或者需要坚持他们可能不喜欢的开发模式.例如,在Sencha中,您使用JavaScript描述GUI并使用Sencha的类型系统.这增加了一种沉重的感觉,即有抽象和包装,而你真的喜欢HTML,CSS和vanilla JavaScript的简易性.

但这不是唯一的方法.Web的强大之处在于,有许多框架,库,工具,越来越小的工具,这将帮助您按照自己喜欢的方式制作应用程序.例如,考虑AngularJS.它本身不提供一组控件,但与Twitter Bootstrap结合成为RIA的完整解决方案.或者,例如,看看EmberJS,一个来自创建重量级SproutCore的人的更轻量级的框架.它也没有为您提供一组小部件,但在我看来,它是一个非常好的应用程序基础.

所以这是我最后的想法,而不是结论.所有这些框架通常会向您展示他们的小部件集,漂亮的主题和其他视觉材料.但真正重要的是你将如何实际开发应用程序,如何构建它,在哪里实现逻辑.了解框架提供的内容,并思考是否可以替换缺少的内容.