Building web pages on the server-side or client-side?

Question

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.

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:

<!-- 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
// 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.

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.

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.

Any comments? Thanks in advance.

Answer 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.

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.

Answer 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.

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.