Creating HTML: PHP server-side vs. jQuery client-side

Question

This is a design question. I have data that needs to go into an HTML table, which will later be manipulated by the user. Basically the user will be able to select items in the table rows.

I have two options - in both cases I'm using AJAX to get the data:

1. Create the HTML code using PHP on the server side, send it to the client as HTML. The user then manipulates the table using Javascript (jQuery, essentially).

2. Send the raw data to the client using JSON, then use jQuery to both create the HTML and later manipulate it by the user.

From a design/ease of coding/beauty point of view, which approach is recommended? Thanks for any insight.

Answer 1

Equally compelling arguments could probably be made for both, but you'll likely be sending less data down the pipe if you go with 2.

Answer 2

I really like the idea of putting things like this together on the client side. I found JavaScriptMVC to be a good Framework (the 2.0 Version is based on jQuery) for that because it has client side view templates (though not everybody likes that approach).

With jQuery alone I find it quite complex to create client side views though (because that is not what it is meant for), so you might be better of with putting everything together on the server side in PHP if you can keep your application equally dynamic that way.

Answer 3

If the HTML generated is identical to page HTML you may be able to leverage your existing templating code to generate the same HTML with less code duplication.

Otherwise, JSON is typically more common as it tends to be more compact and it allows you to create nodes and assign non-HTML properties like event handlers to them as you go.

If you create your new nodes by creating an HTML string, however, you have to use HTML-encoding to ensure any <, & or quotes are escaped correctly. There's no built-in function to do this in JavaScript like htmlspecialchars in PHP; it's pretty trivial to write one, but no-one seems to bother. The result is jQuery apps that are full of client-side cross-site-scripting security holes, just as we were starting to make some progress of fixing the server-side XSS stuff.

Answer 4

Both options have plus and negative points, however andras makes a good point in stating whether the content needs to be indexed/searchable. I personally would opt for option 1 thhough as I believe the architecture would be easier to produce.