54

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

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

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

作为 Web 应用程序开发和客户端 JS UI 框架的初学者;各位,根据您的经验,考虑到速度、小部件集合、复杂性、外观、支持等,您推荐哪一款用于快速桌面 Web 应用程序开发?

你推荐我从哪一个开始学习?

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

4

2 回答 2

132

你的问题太多了,答案并不容易,而且根本不会确定。也会很有主见。看看你带来的框架列表,我看到了非常不同的东西,几乎没有可比性。我会尝试以某种方式对它们进行分组并将更多框架添加到列表中。

这里的主要问题不是特定框架的优缺点。主要问题是:你想要多少?您真的是指像 Gmail 或 Grooveshark 这样的应用程序吗?或者你的意思是像 Stackoverflow 这样的东西——一个动态的,一点也不简单,但仍然是一个网站。让我们考虑所有这些选项。

也许,您只是想通过一些小部件来增强您的网站,例如选项卡、对话框、一些可拖放/可拖放的元素、文本编辑等,并且您不愿意更改您的开发模型。我的意思是,您使用您最喜欢的 Java/PHP/Ruby,并且不希望用 JavaScript 编写大量应用程序的逻辑和行为。在这种情况下,基于 jQuery 的类似插件的解决方案将为您提供帮助,尤其是jQuery UIjQuery Mobile

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

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

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

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

获取或设置值,例如在滑块或日期选择器上,如下所示:

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

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

总结一下:如果您有一个多页网站,如果您发布表单,则使用 jQuery UI 或Twitter Bootstrap等更轻量级的解决方案。

也许,您想构建更复杂、更像应用程序的东西(单页应用程序?)。您知道您将需要在客户端处理数据。那你有什么选择?

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

所以 Kendo 和 Wijmo 属于同时提供小部件/控件和一些支持模型的框架组。还有其他类似的框架,它们不是基于 jQuery 的,例如Dojo Toolkit。添加一些动态数据加载,您将获得一个有点复杂的 Web 应用程序。你还能希望什么?

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

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

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

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

于 2012-10-18T20:54:40.933 回答
4

Infeligo 的回答是一流的。我的经历可能会引起一些人的兴趣。我使用 Ruby on Rails 作为我的大部分业务逻辑所在的服务器平台。

在前端,我使用 dHTMLX,它是一个“对象”的 JS 库,其中最强大的是它们的网格对象。我的大多数应用程序都有业务/会计信息处理/显示要求,而网格对象是我的支柱。然而,他们的对象集是全面的,包括在单个应用程序中创建附加“窗口”以向最终用户提供 MDI 类型接口的能力。我通常有一个登录表单,成功应用后会打开一个 HTML 页面,顶部有一个菜单。根据菜单中的选择,打开和关闭新窗口以显示/操作信息。这些窗口在单个 HTML 页面的范围内。

所有对象都有与之关联的非常好的事件,我在前端使用这些事件进行了大量验证。但是,我通常也会复制 Rails 模型中的所有数据验证。这是额外的工作,但我只是格外小心。还有一些抽象对象有助于在前端可视对象(例如网格和后端服务器)之间连接数据。大多数数据连接都可以使用 XML 或 JSON 完成。我在 JSON 上使用 XML 仅仅是因为我对这种结构的经验以及 Rails 提供了一个不错的 XML 构建器这一事实。所以在我的例子中,我很少使用任何基于 Rails 的视图,因为我所有的视觉对象都来自 dHTMLX。

我喜欢 dHTMLX 的另一件事是它们的对象的速度。例如,网格对象将以非常可接受的速度轻松处理 10,000 多行。

该套件的最大缺点是它的文档。该公司是一家东欧开发商,因此通常很难准确理解其文档的含义。此外,他们的文档往往不会完整地记录所有内容,因此大量时间浪费在试错类型的学习上。

希望这可以帮助

于 2013-06-06T12:53:20.147 回答