复杂JavaScript UI的开发方法

Question

我试图了解围绕复杂客户端JavaScript开发的不同方法和最佳实践的前景。

我不知道该给这类应用程序贴上什么标签，也许是沉重的AJAX或RIA (但不像Flash/Silverlight这样的插件)。我指的是具有以下特性的web应用程序：

• 在JavaScript中模拟富/本地桌面用户体验
• 包含客户端JS中的大多数/全部行为，使用服务器作为数据API(JSON/Html-模板)。

这与使用web服务器进行UI呈现形成对比，在页面刷新模型中生成所有HTML。

一些例子是：

• Google Docs / Gmail
• 明德迈斯特
• 枢轴跟踪器

随着我们进入HTML5，我可以看到这种风格的RIA开发，与沉重的JavaScript，变得越来越普遍和必要的竞争。

问:围绕着管理这类繁重的JS开发，出现了哪些常见的方法？

随着应用程序在功能上的发展，客户端代码非常复杂。在使用原始JS的多个团队中扩展开发工作是有问题的(我听说过，而且很容易相信)。

Google已经通过构建从高级语言(Java)编译到JS的GWT来解决这个问题，它依赖于高级语言所拥有的现有开发基础设施(Eclipse、强类型、重构工具)，以及抽象浏览器兼容性和远离开发人员的其他问题。

还有其他一些工具，比如Script# for C#，它们做类似的事情。所有这些都使JS更多地扮演了IL (中间语言)的角色。即。“你再也不会用那种‘低级语言’写作了。”

但是，“编译到JS”并不是唯一的方法。并不是很明显，GWT是占主导地位的approach...or确实会成为它。

人们在使用富客户端JavaScript做什么？一些有针对性的问题：

• 大多数商店是否手工制作JS (比如jQuery等)？
• 还是有许多不同的方法，没有明确的最佳实践出现？
• 大多数商店都在避免RIA规模开发，而倾向于更简单的开发服务器端/页面重绘模型吗？如果是的话，这会持续多久？
• 汇编成JS可能是未来的一种趋势吗？还是这只是个错误的想法？
• 他们如何管理客户端JS的复杂性和重构？
• 模块化和跨团队的工作分配？
• 客户端模式的应用、执行和测试，如MVC/MVP等。

那么，在我们这个沉重的JavaScript和HTML5未来中，新出现的趋势是什么？

谢谢!

Answer 1

我看到的大多数向这个方向移动的网络应用程序(和我交谈过的Web )都是以jQuery为基础的。

GWT (和类似的多层语言)背后的全部理由是，对于“真正的程序员”来说，JavaScript太松散/太脆弱/太易变。但是，如果您有一个框架来处理脆弱的/易变的位，那么就没有理由增加额外的复杂性层了。

只是我的观点…

Answer 2

我认为GWT是有风险的。一旦你决定使用它，你就被它困住了。基本上，这意味着您将标记、DOM和CSS的某些方面视为执行环境。随着客户端代码变得越来越复杂，手工编写的JavaScript与GWT的混合变得非常困难。GWT有本地的方法，但是这些方法在可能的适用性方面是非常有限的。这是一个很大的交易，也是一个很大的赌注。

Google试图将GWT作为一个非常快速的X平台执行环境来销售，并有一个良好的服务器端集成。但正如其他人已经指出的那样，情况已经不再是这样了-- JQuery和YUI即使不是更快，也是同样快的。手动组装页面时，更容易对页面进行配置和优化，这样您就可以完全控制CSS、标记和JavaScript。

GWT试图向您隐藏底层平台，这可能是一种错误的做法。很多所谓的组件web框架也是这样做的。您应该编写带有EL和自定义标记的模糊XML派生代码。输出将是一堆格式不良的HTML，到处都是小块糟糕的JavaScript。页面是缓慢的，错误的和完全无法维护的。

在我们当前的项目中，我们使用Stripe(一种基于低级别操作的框架)和客户端的JQuery。一旦您清楚地看到了所有的谜题，就可以很容易地执行Ajax :这是您的服务器端代码，它对数据进行操作。这是您的客户端代码-用于数据检索和在页面上进行操作。这是你的CSS，这是你的标记，这是你的模板-一切都是干净的和解耦的。易于扩展，可攻击，可调和可调试。我爱死它了。

我喜欢JQuery，因为它对速度和简单的态度。我喜欢YUI3的模块化和全面的小部件。我喜欢YUI CSS，因为它给了我跨浏览器的一致性。我喜欢JavaScript的好部件。我喜欢Java让我完成工作。

吻一下，你就会没事的！

Answer 3

我听说过这些所谓的“单页申请”。

这是一个新的环境，规则还没有完全写好。我在去年(2010年)开发了一个相对重要的单页应用程序，这些都是我们使用的工具。

后端是Java，使用servlet提供JSON服务，该页面用于最终提交准备好的订单。此服务还用于一些验证步骤和定价。

前端代码是javascript。我们使用jQuery对页面元素进行操作，使用纯净处理模板，使用要求将代码分解为模块。(RequireJs的构建工具用于提供更好的下载。)

我们使用qUnit编写测试，并有一个jUnit测试，该测试使用htmlunit运行每个qUnit测试，然后根据qUnit pass/fail状态刮取输出以获得结果，并通过或失败。这些内容被添加到后端的jUnit测试中，并使用哈德森/詹金斯滚到ci中。