Création de HTML : PHP côté serveur et jQuery côté client

Question

Il s'agit d'une question de conception. J'ai des données qui doivent être placées dans un tableau HTML, qui sera ensuite manipulé par l'utilisateur. En gros, l'utilisateur pourra sélectionner des éléments dans les lignes du tableau.

J'ai deux options - dans les deux cas, j'utilise AJAX pour obtenir les données :

1. Créez le code HTML en utilisant PHP du côté serveur, envoyez-le au client sous forme de HTML. L'utilisateur manipule ensuite le tableau à l'aide de Javascript (jQuery, essentiellement).

2. Envoyez les données brutes au client en utilisant JSON, puis utilisez jQuery pour créer le HTML et le manipuler ultérieurement par l'utilisateur.

Du point de vue de la conception, de la facilité de codage et de l'esthétique, quelle approche est recommandée ? Merci pour votre avis.

Answer 1

Pourquoi générer le HTML en PHP :

• Le JavaScript doit définir le comportement, pas le contenu.
• La création en JavaScript nécessite davantage de balises (les chaînes de caractères à plusieurs lignes ne sont pas aussi faciles à créer qu'en PHP).
• Il est plus difficile à maintenir si votre HTML est généré à plusieurs endroits (PHP et JS).
• Vous pourriez utiliser les fonctions de manipulation du DOM de jQuery pour créer votre HTML, mais vous vous tirez une balle dans la jambe à long terme.
• Il est plus rapide de créer le HTML sur le serveur que sur le navigateur (dans le sens computationnel).
• Le bouclage est plus facile avec PHP - il est facile de générer des balises de table.
• Vous conservez une certaine combativité si l'utilisateur a désactivé JavaScript si vous produisez le balisage au chargement de la page.

Pourquoi générer le HTML en jQuery :

• Vous économiseriez de la bande passante.
• Lier des événements pourrait être plus simple.

Je suis donc favorable à la première option, qui consiste à générer le HTML en PHP.

---

Comparaison visuelle des deux méthodes, en créant un tableau simple.  

Option 1, en utilisant PHP :

// PHP

$html = '<table>';    
foreach($data as $row) {
    $html .= '<tr>';
    $html .= '<td><a href="#" class="button">Click!</a></td>';
    $html .= '<td>'.$row['id'].'</td>';
    $html .= '<td>'.$row['name'].'</td>';
    $html .= '</tr>';
}
$html .= '</table>'; 
echo $html;
?>

// jQuery

$('#container').load('handler.php', function() {
    $('#container a.button').click(function() {
        // Do something
    });
});

Option 2, utiliser jQuery :

// PHP

echo json_encode($data);

// jQuery

$.ajax({
    url: 'handler.php',
    dataType: 'json',
    success: function(data) {
        var table = $('<table />');

        var len = data.length;
        for(var i = 0; i < len; i++) {
            var row = $('<tr />');
            var a = $('<a />').attr('href', '#').addClass('button');

            row.append($('<td />').append(a));
            row.append($('<td />').html(data[i].id);
            row.append($('<td />').html(data[i].name);

            table.append(row);
        }

        table.find('.button').click(function() {
            // Do something
        });

        $('#container').html(table);
    }
});

Du point de vue de la conception, de la facilité de codage et de l'esthétique, j'opterais pour l'approche PHP.

Answer 2

Une discussion similaire a eu lieu à Pourquoi est-ce une mauvaise pratique de renvoyer du HTML généré au lieu de JSON ? Ou bien est-ce le cas ? avec quelques bons points non mentionnés dans ce fil.

Answer 3

Si le code HTML généré est identique au code HTML de la page, vous pouvez peut-être tirer parti de votre code de modèle existant pour générer le même code HTML avec moins de duplication.

Sinon, JSON est généralement plus courant car il est plus compact et permet de créer des nœuds et de leur attribuer des propriétés non HTML, comme des gestionnaires d'événements, au fur et à mesure.

Cependant, si vous créez vos nouveaux nœuds en créant une chaîne HTML, vous devez utiliser l'encodage HTML pour garantir que tout < , & ou les guillemets sont échappés correctement. Il n'y a pas de fonction intégrée pour faire cela en JavaScript comme htmlspecialchars en PHP ; il est assez trivial d'en écrire un, mais personne ne semble s'en soucier. Le résultat est que les applications jQuery sont pleines de failles de sécurité côté client, juste au moment où nous commencions à faire des progrès dans la correction des problèmes de XSS côté serveur.

Answer 4

Des arguments tout aussi convaincants pourraient probablement être avancés pour les deux, mais vous enverrez probablement moins de données dans le tuyau si vous optez pour la deuxième solution.

Answer 5

J'aime vraiment l'idée de mettre en place ce genre de choses du côté du client. J'ai trouvé JavaScriptMVC est un bon cadre (la version 2.0 est basée sur jQuery) pour cela, car il dispose de modèles de vue côté client (bien que cette approche ne plaise pas à tout le monde).

Avec jQuery seul, je trouve qu'il est assez complexe de créer des vues côté client (parce que ce n'est pas ce à quoi il est destiné), donc vous feriez mieux de tout mettre ensemble côté serveur en PHP si vous pouvez garder votre application aussi dynamique de cette façon.