HTML5 UI框架

我在那里发现了很多HTML5 UI框架,例如:

> Kendo
> Wijmo
> jqWidgets
> Zebra
> Sencha
> SproutCore
> YUI
> XUI
> Shield UI

我有点淹没了那么多的资源在那里。
看了一些,但几乎所有看起来都太慢和重量。

我有点困惑,我将学习哪一个。
他们的每个网站谈论他们的产品,如果他们是市场上最好的。 (明显的营销策略)。

作为Web应用程序开发和客户端JS UI框架的初学者;你们,根据你的经验,你建议快速桌面网络应用程序开发考虑速度,小部件集合,复杂性,看起来感觉,支持等?

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

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

解决方法

在你的问题中有这么多,答案不容易,也不会确定。它也会非常评价。看看你带来的框架列表,我看到很不同的东西,几乎不可以相互比较。我会尝试将它们分组,并添加更多的框架到列表中。

这里的主要问题不是特定框架的利弊。主要问题是:你想要多少钱?你真的是指一个像Gmail或Grooveshark的应用程序?或者你的意思是像Stackoverflow – 一个动态,不是很简单,但仍是一个网站。让我们考虑所有这些选项。

也许,你只是想用一些小部件,如选项卡,对话框,一些可拖动/可拖放元素,文本编辑等增强您的网站,你不愿意改变你的开发模式。我的意思是,你使用你最喜欢的Java / PHP / Ruby,并不希望写在JavaScript的很多应用程序的逻辑和行为。在这种情况下,基于jQuery的类插件解决方案将为您,特别是jQuery UIjQuery Mobile

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

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

现在如果你想禁用它,你调用一个方法使用以下模式:

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

获取或设置值,例如在滑块或datepicker,看起来像这样:

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

正如你所看到的,基于jQuery的解决方案没有模型。所有数据都保存在DOM中,并通过古怪的方法调用获得。如果您需要动态处理您的数据,例如做一些复杂的验证,在背景中加载东西,过滤或排序,然后你会看到,这很快就会变得凌乱。顺便说一句,这是为什么jQuery UI团队还没有提供网格控件的问题 – 他们不能做没有模型。在jQuery Mobile中,通过简单的标记方式获得了一个漂亮的移动UI,但是没有正式的方法在页面之间传递数据。

总结一下:如果你有一个多页网站,如果POST你的表单,然后使用jQuery UI或更轻的解决方案,如Twitter Bootstrap

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

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

所以Kendo和Wijmo属于提供小部件/控件和一些后台模型的框架组。还有其他框架,像这些,不是基于jQuery的,例如。添加一些动态数据加载,你会得到一个有点复杂的Web应用程序。你还想要什么?

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

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

但这不是唯一的方法。 Web的力量是有许多框架,库,工具,在那里,smaller和更大的,这将帮助你制作你的应用程序的方式你喜欢它。例如,考虑AngularJS.它不提供一套控件本身,但结合Twitter Bootstrap成为RIA的完整解决方案。或者,例如,看看EmberJS,一个更轻量的框架从创建重量级的SproutCore的家伙。它不提供给你一组小部件,但在我看来,一个应用程序的一个很好的基础。

所以这里是我的最终想法而不是结论。所有这些框架通常会告诉你他们的小部件集,很好看主题和其他视觉材料。但真正重要的是如何实际开发你的应用程序,如何构建它,你将实现你的逻辑。了解框架提供什么,并思考是否可以替换缺少的东西。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码
HTML5使用DOM进行自定义控制
使用HTML5 Canvas绘制阴影效果的方法
使用PHP和HTML5 FormData实现无刷新文件上传
如何解决HTML5 虚拟键盘出现挡住输入框的问题
HTML5中div和section以及article的区别分析
html5和CSS 实现禁止IOS长按复制粘贴功能
html5 touch事件实现触屏页面上下滑动
canvas 模拟实现电子彩票刮刮乐的代码
HTML5 Plus 实现手机APP拍照或相册选择图片上传的功能
Android自定义环形LoadingView效果
HTML5 canvas绘制五角星的方法
html5使用html2canvas实现浏览器截图
使用Canvas处理图片的方法介绍
利用Canvas模仿百度贴吧客户端loading小球的方法