Quand JavaScript doit-il générer du HTML?
J'essaie de générer le moins de HTML possible à partir de JavaScript. Au lieu de cela, je préfère manipuler le balisage existant chaque fois que je le peux et générer du HTML uniquement lorsque j'ai besoin d'insérer dynamiquement un élément qui n'est pas un bon candidat pour utiliser Ajax. Cela, je crois, facilite beaucoup la maintenance du code et y apporte rapidement des modifications car le balisage est plus facile à lire et à tracer. Ma règle de base est: HTML est pour la structure du document, CSS est pour la présentation, JavaScript est pour le comportement.
Cependant, j'ai vu beaucoup de code JS qui génère des monticules de HTML, y compris des formulaires entiers et des boîtes de dialogue modales riches en contenu. En général, quelle méthode est considérée comme la meilleure pratique? Dans quelles circonstances JavaScript doit-il être utilisé pour générer du HTML et quand ne doit-il pas l'être?
Chaque fois que j'ai rencontré une génération HTML lourde en javascript, c'était presque uniquement dans un plugin d'interface utilisateur autonome. Cela a du sens, car il permet d'encapsuler l'intégralité du plugin dans un seul fichier .js (+ un .css pour personnaliser les styles), le rendant ainsi facilement réutilisable, distribuable et indépendant du cadre utilisé dans l'application.
Donc, si vous écrivez un plugin javascript autonome ou un composant d'interface utilisateur générique que vous souhaitez utiliser dans différentes applications, une telle approche a ses avantages. Sinon, je pense que c'est à la fois plus propre, plus facile à écrire et plus facile à maintenir lorsque vous gardez la génération html loin de javascript et côté serveur.
Je pense que le problème est que vous comparez les modèles côté serveur correctement écrits à la génération HTML ad-hoc côté client mal écrite. Bien sûr, le code écrit proprement est plus facile à lire, à maintenir et à tracer.
Vous appelez le code côté client "monticules de HTML", mais bien sûr, c'est le même HTML partout où il est généré. Le "monticule" est vraiment le gros morceau de code.
Il existe de nombreuses bibliothèques de modèles côté client. Ils fonctionnent de manière similaire à ceux côté serveur. Quant à ce que vous devriez préférer, le compromis de performance est compliqué, mais JSON est généralement plus compact que le HTML qu'il devient et avoir le modèle sur le client peut éliminer certains appels de serveur. D'un autre côté, le client peut avoir JS désactivé, ou être trop lent pour être pratique, cela dépend donc également de votre public cible. Dans l'ensemble, je pense que les approches sont assez comparables, le principal facteur étant les capacités de navigation de votre public cible.
Mais cela dépend exactement de ce que vous faites, si vous préférez JS à votre environnement de serveur, quelle solution de modèle vous préférez, etc.
Il y a une tendance à utiliser des modèles côté client, dans le cas extrême, vous auriez un serveur fournissant uniquement une API RESTful, par exemple au format JSON, tout en effectuant tout le rendu côté client. L'avantage de cette approche est que le code et les modèles JS sont des ressources statiques qui peuvent être mises en cache, mandatées et distribuées via CDN. Ce qui ne peut pas être fait si vous avez du HTML dynamique généré côté serveur. De plus, le retour des données de l'API RESTful au format léger utilise beaucoup moins de ressources côté serveur, ce qui accélère la réponse. En outre, étant plus léger, il réduit le transfert réseau, ce qui le rend encore plus rapide. De cette façon, vous pouvez avoir une application à faible latence très réactive, même sur des connexions lentes telles que la 3G. Cette approche est donc populaire pour les pages et applications mobiles.
Il existe de nombreuses bibliothèques implémentant des modèles JS, l'une des plus populaires est Pure , Moustache et dust.js . Plus tard est utilisé par LinkedIn, ils ont décrit les avantages dans leur article "Laisser les JSP dans la poussière: déplacer LinkedIn vers les modèles côté client dust.js".
L'avantage de générer du HTML sur le client est que vous déchargez le travail de rendu sur chaque client, qui reste généralement inactif en attendant la réponse. Libérer davantage de ressources serveur pour ne fournir que des données JSON et du contenu statique (HTML, JS et CSS).
Nous faisons une application web qui génère exclusivement du HTML avec Javascript. 87% des hits du serveur sont des données JSON, le contenu statique est généralement chargé une fois, puis à partir du cache du navigateur.
Mais vous ne pouvez pas l'utiliser - du moins pas facilement - si vous avez besoin de référencement. Ou si vous ciblez une population qui a désactivé Javascript, mais je ne suis pas sûr que celui-ci soit toujours pertinent avec Youtube, Twitter, Facebook, Gmail, ... forçant naturellement les gens à l'activer.
Je génère du code html en jquery parce que j'utilise un portlet et après l'exécution du code jsp, je dois faire une boucle avec du code html, que je ne peux pas obtenir dans un Java for boucle avec du code javascript à l'intérieur. Donc je rend Java arraylist dans un tableau javascript et l'utilisation des chaînes pour générer du html.
Nous construisons des applications sur une seule page (ala Google Mail) et il y a littéralement non génération de HTML côté serveur dans nos applications. Au lieu de cela, nous utilisons Backbone.js pour structurer notre côté client et des guidons pour rendre notre JSON en modèles qui vont dans la page. Cela fonctionne très bien et nous arrivons à la fin de notre première application qui l'utilise et nous aborderons un projet encore plus grand à l'avenir.
Tout type de gros client où le serveur est utilisé uniquement pour conserver les données et renvoyer les résultats de la requête est un enfant affiche pour une période où vous souhaiterez que JavaScript génère du HTML. Assurez-vous simplement d'utiliser un bon moteur de modèle pour le rendre propre et facile.
Concernant le chargement dynamique des pages, il faut savoir que derrière toute la magie "JQuery AJAX Cloud!", Il ne se passe que deux choses:
- Le code d'un élément est injecté dans un div (mauvais), ou
- Le contenu est chargé dans un iframe (mieux, mais ce n'est tout simplement pas pareil ...)
En ce qui concerne la question d'origine, je ne crée du contenu HTML via Javascript que lorsque je crée une application Web quelconque qui lit les données XML ou JSON stockées sur le serveur, et cela change beaucoup.
Cela n'aurait pas beaucoup de sens de charger du contenu statique sur une page avec Javascript, car il y a toujours la possibilité qu'il ne se charge pas correctement, ou que le client le désactive ("prenez ces petites annonces!"). De plus, il est très difficile de changer le contenu HTML lorsqu'il est effacé à l'intérieur d'une horrible document.write() ou d'une chaîne de document.createElement().
Vous avez donc raison; soit tapez le code HTML brut, ou si un contenu dynamique est nécessaire, utilisez un script côté serveur pour afficher ce qui est nécessaire. Utilisez Javascript pour injecter du HTML uniquement si le site est censé fonctionner sans connexion Internet ou dans un cas similaire.
Une dernière note, si vous voulez implémenter xmlhttprequests, euh, AJAX, dans un site Web, probablement la meilleure façon/la plus sûre de le faire est de stocker les données dans un format de données (comme XML), de les charger et de les produire en conséquence sur le client. document.write et element.innerHTML n'est vraiment pas la meilleure façon de manipuler le contenu et est susceptible de provoquer des maux de tête potentiels à l'avenir (pourquoi ce script ne s'exécute-t-il pas? Mon _ <i> tag met tout en italique! etc.).
Mon mantra à ce sujet est: quand c'est plus facile et que personne ne se soucie du balisage.
Vous pouvez également tirer parti des deux et définir une limite où il est trop difficile de se soucier du balisage et vous préférez vous concentrer sur l'arborescence DOM. Par exemple, un formulaire qui a des lignes dynamiques (par exemple "ajouter une autre pièce jointe"), vous voudriez probablement le formulaire en HTML, le bouton "ajouter une ligne" et le bouton soumettre ... vous ne voulez probablement pas générer le HTML avec votre langage côté serveur ou quelque chose.
Une autre règle d'or peut être la réutilisabilité. Si votre solution peut être appliquée à d'autres problèmes côté client, encapsulez-la dans js.