设计 AJAX 应用程序的推荐方法

Question

这是一个非常笼统的问题，但我在 Flex 工作了几年，对纯 Web 开发并没有太多经验。

我的问题是：如果您需要构建一个 AJAX 应用程序，您更喜欢两种方法中的哪一种：

1. 经典的服务器端 MVC，其中控制器返回提供模型数据的视图。视图可以是完整的或部分的。基本上，只有少数成熟的视图作为容器工作，而 javascript 将帮助用部分 HTML 视图异步填补空白。这种方法比传统的 Web 开发更进一步，因为 javascript 仅用于维护整体控制和用户交互

2. 一个成熟的 js 应用程序，例如使用 Cappuccino、Sproutcore 或 Backbone.js 构建的应用程序，其中客户端很厚，并实现了 MVC 的客户端实现，同时处理模型，作为控制逻辑，并查看交互。在这种情况下，服务器端扮演一组 JSON/XML 服务的角色，客户端与之交换数据。这种情况的缺点是视图模板必须在开始时加载，当初始应用程序被引导时，以便 javascript 可以根据数据布局标记。优点是减少了服务器响应的权重，以及更好地控制客户端，这允许应用视图模型绑定等内容。

3. 这两者之间有些混合的方法。

我更喜欢第二个，这很正常，因为我来自类似的环境，但我最关心的问题是 url 路由（或我们在 Flash 中称之为深度链接）、状态管理、模块化和视图布局（视图标记模板何时加载？是否应该有特定的服务器端点在被调用时提供这些模板，以便模板数据不会在开始时加载？）

请评论

Answer 1

我自己更喜欢 #2，但我更喜欢 javascript :)

不幸的是，我什至从未见过 flex 代码是什么样的。我的经验是使用 Rails，所以我会用这些术语来讨论，但希望这些概念足够普遍，以至于答案是有意义的

对于客户端模板，最好是当您选择的服务器端平台有故事时（例如 rails 3.1 资产管道或 pre 3.1 的 jammit 插件）。如果您使用的是 rails，我可以提供更多信息，但如果您不是第一件事，我会寻找一个开箱即用的资产管理系统。

我的后备通常只是将模板嵌入到我的服务器端模板中的脚本标签内，例如

<script type='text/html' id='foo-template'></script>

要稍后检索字符串，您可以执行以下操作（jquery 语法）

var template = $('#foo-template').html();

在我的服务器端模板中，我会将这些脚本标签作为部分提取到它们自己的文件中，所以我仍然可以得到文件分离（rails 语法）

<%= render :partial => 'templates/foo.html.erb' %>

我更喜欢只使用 jammit，并将我的客户端模板放在以 .j​​st 结尾的单独文件中，但第二种方法可以在任何地方使用，并且您仍然可以获得大部分相同的好处。

Answer 2

我是一个移动 Web 应用程序的架构师，该应用程序拥有 100,000 名用户，其中 20,000 名用户同时在线。

对于那种应用程序（例如有限的带宽），我认为#2 是唯一的选择。

所以服务器端只是一组数据服务，客户端使用纯 AJAX RPC。 在我们的例子中，我们使用包含所有内容的单个静态 index.htm 文件。另外，我们使用 HTML5 清单来减少启动时脚本/样式/图像到服务器的往返次数。加上 localStorage 用于应用程序状态持久性和缓存。

从 MVC 开始：are many template engines out there，所以你可以使用任何对你来说最方便的东西。模板本身非常紧凑，因为它们不包含任何数据，因此可以（在我们的例子中）将它们全部包含在内。

是的，此类应用程序的架构需要事先深思熟虑。 #1 选项不是那么重要 - 入门级别较低。

我不知道您的目标是什么平台，但正如我所说，#2 可能是移动设备的唯一选择。

Answer 3

我会推荐第二种方法。您已经熟悉的第二种方法（厚客户端瘦服务器方法）是越来越多的现代开发人员的首选方法，因为小部件的呈现和管理是在客户端完成的，这节省了服务器上的计算和带宽开销。另外，如果您有一个复杂的小部件管理案例，那么使用小部件的服务器端代码可能会变得越来越复杂和难以管理。 你指出的缺点：

视图模板必须在开始时加载，当初始 应用程序被引导，以便 javascript 可以布局标记 根据数据。

不正确。您可以根据需要通过 ajax 动态加载静态模板，然后使用 javascript 将它们呈现为完整的小部件。 例如，如果您有一个带有图像编辑器组件的图像库，那么在用户实际选择编辑图像之前，您可能不会加载图像编辑器所需的文件（包括图像、模板和小部件渲染代码）。

使用脚本加载器（例如 requirejs、labjs），您最初可以只加载一个中小型引导脚本，然后根据要求动态加载其余脚本。

此外，功能强大且成熟的服务器端小部件库仅适用于 java 后端（例如 vaadin）。如果您正在使用 php、python 或 ruby​​ 后端，那么编写自己的服务器端 ui 框架可能会严重过度。使用客户端服务器竞争 javascript ui 框架要方便得多，例如。 dojo、qooxdoo 等。

您似乎倾向于使用客户端 mvc 框架。这是一个不错的方法，但是双重 mvc 架构（在服务器和客户端上）通常会导致代码重复和混乱。因此，我不会推荐混合方法。

您可以在前端有一个适当的 mvc 框架，并且只有一个服务器端模型层，它通过一个 restful api（或 rpc，如果你愿意的话）与应用程序交互。

由于您来自 flex 背景，我建议您查看 Ajax.org ui platform http://ui.ajax.org。他们的用户界面框架像 flex 一样是基于标签的，尽管项目是新的，但他们拥有一组强大的小部件和非常令人印象深刻的图表和数据绑定解决方案。 Dojo 和 Ample SDK 也采用了基于标签的小部件布局系统。

Qooxdoo 和 extjs 提倡通过 javascript 来做所有事情，从布局到渲染，这对你来说可能不方便。