在服务器端或客户端构建网页？

I've always wondered how to decide on choosing between using server-side code versus client-side code to build HTML pages. I'll use a very simple php vs javascript/jquery example to further explain my question. Your advice and comment is very much appreciated.

我一直想知道如何决定在使用服务器端代码与客户端代码之间进行选择来构建HTML页面。我将使用一个非常简单的php vs javascript / jquery示例来进一步解释我的问题。非常感谢您的建议和意见。

Say I'm about to present a web page to a user to select a type of report in my web page. Which makes more sense?

假设我要向用户提供一个网页,以便在我的网页中选择一种报告。哪个更有意义?

For server-side creation, I'd do this:

对于服务器端创建,我会这样做:

<div id="reportChoices">

<?php
// filename: reportScreen.php
// just for the sake of simplicity, say a database returns the following rows 
// that indicates the type of reports that are available:

$results = array(
    array("htmlID"=>"battingaverage", "htmlLabel"=>"Batting AVG report"),
    array("htmlID"=>"homeruntotals", "htmlLabel"=>"Home Run Totals report"),
);

foreach ($results AS $data)
    echo "<input type='radio' name='reportType' value='{$data['htmlID']}'/>{$data['htmlLabel']}";
?>

</div>

Using client-side code, I'd get the javascript to build the page like the following:

使用客户端代码,我将获得javascript来构建如下所示的页面:

<!-- filename: reportScreen.html -->
<div id="reportChoices">
</div>

<!-- I could put this in the document.ready handler, of course -->
<script type="text/javascript">
$.getJSON("rt.php", {}, function(data) {
 var mainDiv = $("#reportChoices");
 $.each(data, function(idx, jsonData) {
  var newInput = $(document.createElement('input'));

  newInput
   .attr("type", "radio")
   .attr("name", "reportType")
   .attr("value", jsonData["htmlID"])

  mainDiv.append(newInput).append(jsonData["htmlLabel"]);
 });
};
</script>

All I would need on the server is a data dump php script such as:

我在服务器上需要的只是一个数据转储php脚本,例如:

<?php
// filename: rt.php
// again, let's assume something like this was returned from the db regarding available report types

$results = array(
    array("htmlID"=>"battingaverage", "htmlLabel"=>"Batting AVG report"),
    array("htmlID"=>"homeruntotals", "htmlLabel"=>"Home Run Totals report"),
);

echo json_encode($results);
?>

This is a very simple example, but from this, I see pros and cons in different area.

这是一个非常简单的例子,但从这一点来看,我看到了不同领域的利弊。

1 - The server-side solution has the advantage of being able to hide most of the actual programming logic behind how everything is built. When the user looks at the page source, all they see is the already-built web page. In other words, the client-side solution gives away all your source code and programming logic on how certain things are built. But you could use a minifier to make your source look more cryptic.

1 - 服务器端解决方案的优势在于能够隐藏大部分实际编程逻辑背后的所有内容。当用户查看页面源时,他们看到的只是已经构建的网页。换句话说,客户端解决方案提供了有关某些内容构建方式的所有源代码和编程逻辑。但你可以使用缩小器使你的源看起来更神秘。

2 - The client-side solution transfers the "resource load" onto the client system (i.e. the browser needs to use the client's computer resources to build most of the page) whereas the server side solution bogs down, well, the server.

2 - 客户端解决方案将“资源负载”转移到客户端系统上(即浏览器需要使用客户端的计算机资源来构建大部分页面),而服务器端解决方案则陷入困境,即服务器。

3 - The client-side solution is probably more elegant when it comes to maintainability and readability. But then again, I could have used php libraries that modularize HTML controls and make it a lot more readable.

3 - 在可维护性和可读性方面,客户端解决方案可能更加优雅。但话说回来,我本可以使用php库来模块化HTML控件并使其更具可读性。

Any comments? Thanks in advance.

任何意见?提前致谢。

4 个解决方案

#1

Con (client solution): The client-side solution relies on the client to execute your code properly. As you have no control over what client system will execute your code, it's much harder to ensure it will consistently give the same results as the server-side solution.

Con(客户端解决方案):客户端解决方案依赖客户端正确执行代码。由于您无法控制客户端系统将执行您的代码,因此要确保它始终如一地提供与服务器端解决方案相同的结果要困难得多。

This particular problem doesn't really seem to need a client-side solution, does it? I'd stick with the server-side solution. The only extra work there is a foreach loop with one echo and that's not really so resource heavy is it (unless you've profiled it and know that it IS)? And the resulting code is all in one place and simpler.

这个特殊问题似乎并不需要客户端解决方案,是吗?我坚持使用服务器端解决方案。唯一的额外工作是一个带有一个回声的foreach循环,并不是真的如此资源丰富(除非你已经分析它并且知道它是)?结果代码全部集中在一个地方且更简单。

#2

I'm sceptical that moving the report generation on to the client side really saves any resources - remember that it's still doing an HTTP request back to your (?) server, so the database processing still gets done.

我怀疑将报告生成移动到客户端确实可以节省任何资源 - 请记住它仍在向您的(?)服务器发送HTTP请求,因此数据库处理仍然完成。

Also, giving away your database schema on the client side could be a recipe for database attacks.

此外,在客户端提供数据库模式可能是数据库攻击的一种方法。

Perhaps you should use a model-view-controller pattern to separate the business logic from the presentation on the server? At least this keeps all the code in one place but still lets you logically separate the components. Look at something like Zend Framework if this sounds useful to you.

也许您应该使用模型 - 视图 - 控制器模式将业务逻辑与服务器上的表示分开?至少这会将所有代码保存在一个地方,但仍允许您在逻辑上分离组件。如果这听起来对您有用,请查看Zend Framework之类的内容。

#3

Typically, it's best not to depend on Javascript being enabled on the client. In addition, your page will not be crawled by most search engines. You also expose information about your server/server-side code (unless you explicitly abstract it).

通常,最好不要依赖于在客户端上启用的Javascript。此外,大多数搜索引擎都不会抓取您的网页。您还公开了有关服务器/服务器端代码的信息(除非您明确地抽象它)。

If you want to transform data into the view, you might want to take a look at XSLT. Another thing to read up on if you have not already, is progressive enhancement.

如果要将数据转换为视图,可能需要查看XSLT。如果您尚未阅读,另一件事就是逐步增强。

http://alistapart.com/articles/understandingprogressiveenhancement/

In the first client-side solution you presented, it's actually less efficient because there's an extra HTTP request. And the second one is possibly not very efficient as well, in that all the data must be processed with json_encode.

在您提供的第一个客户端解决方案中,它实际上效率较低,因为有额外的HTTP请求。第二个也可能效率不高,因为必须使用json_encode处理所有数据。

However, if what you're working on is a rich web application that depends on Javascript, I see no problem with doing everything with Javascript if you want to.

但是,如果您正在处理的是依赖于Javascript的富Web应用程序,我认为如果您愿意,可以使用Javascript完成所有操作。

#4

You can maintain a better separation of concerns by building it on the client side, but that can come at a cost of user experience if there is a lot to load (plus you have to consider what FrustratedWithForms mentioned). To me it's easier to build it on the server side, which means that becomes a more desirable option if you are on a strict timeline, but decide based on your skill set.

您可以通过在客户端构建它来保持更好的关注点分离,但如果有很多要加载的话,这可能会以用户体验为代价(另外您必须考虑FrustratedWithForms提到的内容)。对我来说,在服务器端构建它更容易,这意味着如果你在严格的时间线上,这将成为一个更理想的选择,但根据你的技能组合决定。

#1

#2