Geek Answers Handbook

Creating web pages on the server side or on the client side?

I always wondered how to choose between using server-side code and client-side code to create HTML pages. I will use a very simple php vs javascript / jquery example to further explain my question. Your advice and comments are greatly appreciated.

Say I'm going to present a webpage to a user to select the type of report on my webpage. What makes sense?

For server-side creation, I would do the following:

<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 would get javascript to create the page, as shown below:

<!-- 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 need on the server is a php script data dump, for example:

<?php
// filename: rt.php
// again, let 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 the pros and cons in different areas.

1 - , , . , , , -. , , . minifier, .

2 - " " (.. ), , , .

3 - , , , . , php-, HTML .

? .

+5
4

Con ( ): , . , , , , .

, ? . - foreach echo ( , )? .

+3

, , Javascript . , . / ( ).

, XSLT. , , , - .

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

, , , HTTP-. , , , json_encode.

, , , - -, Javascript, , Javascript, .

+1

, - , HTTP (?) , .

, .

, -- - ? , , . - Zend Framework, .

+1

You can maintain a clearer separation of problems by creating it on the client side, but it can bring the cost of user experience if there is a lot to download (plus you should consider what FrustratedWithForms mentioned). It’s easier for me to create it on the server side, which means that this will become a more desirable option if you are on a strict timeline, but decide based on your skill set.

0
source

More articles:


All Articles