Côté Client, la logique OU logique côté Serveur?
J'ai fait quelques projets web, et la plupart des difficultés que j'ai rencontré (les questions, les confusions) peut être trouvé avec de l'aide. Mais j'ai encore une question importante, même après avoir posé des développeurs expérimentés: Lorsque des fonctionnalités peuvent être mises en œuvre à la fois avec le code côté serveur et côté client de script (JavaScript), dont l'une doit être préférée?
Un exemple simple:
Pour effectuer le rendu d'une page html dynamique, je peux le format de la page dans le code côté serveur (PHP, python) et l'utilisation d'Ajax pour récupérer la page mise en forme et de les rendre directement (plus logique sur le serveur-côté, moins sur le côté client).
Je peux aussi utiliser de l'Ajax pour récupérer les données (non formaté, JSON) et utiliser un script côté client pour le format de la page et la rendre avec plus de traitement (le serveur reçoit les données à partir d'une base ou d'une autre source, et la renvoie au client avec JSON ou XML. De plus logique sur le côté client et moins sur le serveur).
Alors, comment puis-je décider lequel est le mieux? Ce qui une offre de meilleures performances? Pourquoi? Lequel est le plus facile à utiliser?
Avec les navigateurs' JS moteurs de l'évolution, JS peut être interprété en moins de temps, donc si je préfère de script côté client?
D'autre part, avec le matériel évolue, les performances du serveur est en croissance et le coût de rompre la logique côté va diminuer, donc si je préfère de script côté serveur?
EDIT:
Avec les réponses, je veux donner un bref résumé.
Pros de la logique client:
- Meilleure expérience utilisateur (plus rapide).
- Moins de bande passante réseau (baisse des coûts).
- Une évolutivité accrue (réduction de la charge du serveur).
Pros de la logique côté serveur:
- Les questions de sécurité.
- Une amélioration de la disponibilité et de l'accessibilité (les appareils mobiles et les anciens navigateurs).
- Un meilleur RÉFÉRENCEMENT.
- Facilement extensible (peut ajouter d'autres serveurs, mais ne peut pas rendre le navigateur plus rapide).
Il semble que nous avons besoin d'un équilibre entre ces deux approches face à un scénario spécifique. Mais comment? Quelle est la meilleure pratique?
Je vais utiliser côté client, la logique, sauf dans les conditions suivantes:
- De sécurité critiques.
- Des groupes spéciaux (désactivé JavaScript, des appareils mobiles, et autres).
Vous devez vous connecter pour publier un commentaire.
Dans de nombreux cas, j'ai peur que la meilleure réponse est les deux.
Comme Ricebowl dit, ne faites jamais confiance le client. Cependant, j'ai l'impression que c'est presque toujours un problème si vous faites confiance au client. Si votre demande est en valeur l'écriture, il est intéressant de sécurité. Si quelqu'un peut le briser par la rédaction de leurs propres clients et de la transmission des données, vous ne vous attendez pas, c'est une mauvaise chose. Pour cette raison, vous devez le valider sur le serveur.
Malheureusement, si vous validez le tout sur le serveur, qui souvent laisse à l'utilisateur une expérience utilisateur médiocre. Ils peuvent remplir un formulaire seulement pour trouver qu'un certain nombre de choses qu'ils ont saisies sont incorrectes. Cela peut avoir travaillé pour "Internet 1.0", mais les attentes sont plus élevées sur l'Internet aujourd'hui.
Ce qui vous laisse écrire un peu de code redondant, et en la maintenant dans deux endroits ou plus (certaines des définitions telles que les longueurs maximales doivent également être maintenus dans la couche de données). Raisonnablement penser que de grandes applications, j'ai tendance à résoudre ce problème à l'aide de la génération de code. Personnellement, j'utilise un outil de modélisation UML (Sparx du Système Enterprise Architect) pour le modèle d'entrée "règles" du système, puis faire usage de classes partielles (d'habitude je suis en train de travailler .NET) pour générer le code de validation de la logique. Vous pouvez obtenir quelque chose de similaire par le codage de vos règles au format XML et d'en déduire un certain nombre de chèques à partir de ce fichier XML (entrée longueur, le masque de saisie, etc.) sur le client et le serveur tier.
Probablement pas ce que tu voulais entendre, mais si vous voulez le faire correctement, vous devez appliquer les règles sur les deux niveaux.
J'ai tendance à préférer une logique côté serveur. Mes raisons sont assez simples:
Il ya probablement plus -et mieux - raisons, mais ce sont ceux du haut de mon esprit en ce moment. Si je pense de plus je vais les ajouter, ou de voter ceux qui viennent avec eux avant que je ne.
Édité, valya commentaires que l'utilisation de logique client (à l'aide d'Ajax/JSON) permet l' (plus facile) la création d'une API. C'est peut-être vrai, mais je peux seulement à moitié d'accord (c'est pourquoi je n'ai pas voté pour que encore de réponse).
Ma notion de logique côté serveur est à celui qui récupère les données, et organise des il; si j'ai ce droit, la logique est le "contrôleur" (C MVC). Et c'est ensuite transmis à la " vue.' J'ai tendance à utiliser le contrôleur pour obtenir les données, puis l'onglet "affichage" traite de la présenter à l'utilisateur/client. Donc je ne vois pas ce client/serveur, des distinctions sont nécessairement à l'argument de la création d'une API, en gros: des chevaux pour les cours. 🙂
...aussi, comme un amateur, je reconnais que j'ai peut-être un peu tordu utilisation de MVC, donc je suis disposé à être corrigé sur ce point. Mais je garde toujours la présentation séparée de la logique. Et que la séparation est le point plus loin que les Api aller.
J'en général de mettre en œuvre autant que raisonnable côté client. Les seules exceptions qui me ferait aller côté serveur serait de résoudre le suivant:
Des problèmes de confiance
N'importe qui est capable de débogage JavaScript et de la lecture du mot de passe, etc. Évidence ici.
Des problèmes de performances
Moteurs JavaScript sont en évolution rapide, donc ce n'est plus un problème, mais nous sommes encore dans un IE-dominé monde, donc les choses sera ralentir lorsque vous traitez avec de grands ensembles de données.
Problèmes de langue
JavaScript est faiblement typé langue et il fait beaucoup d'hypothèses de votre code. Cela peut vous amener à employer spooky solutions de contournement afin d'obtenir les choses de fonctionner comme il faut sur certains navigateurs. - Je éviter ce genre de chose comme de la peste.
De votre question, il semble que vous essayez simplement de charger des valeurs dans un formulaire. En l'absence de toute les questions ci-dessus, vous avez 3 options:
Pure côté client
L'inconvénient est que vos utilisateurs le temps de chargement double (une charge pour la forme vide, une autre charge pour les données). Cependant, les mises à jour ultérieures de la forme n'aurait pas besoin d'un rafraîchissement de la page. Les utilisateurs de ce genre si il y aura beaucoup de récupération de données à partir du serveur de chargement dans le même formulaire.
Pure côté serveur
L'avantage est que votre page serait de charger les données. Cependant, à la suite des mises à jour des données nécessiteraient actualise à toutes les/que de grandes parties de la page.
Client-serveur hybride
Vous avez le meilleur des deux mondes, cependant vous avez besoin pour créer des données de deux points d'extraction, à l'origine de votre code d'enfler légèrement.
Il existe des échanges avec chaque option de sorte que vous aurez à peser le pour et de décider ce que vous offre le plus d'avantages.
D'un examen, je n'ai pas entendu parlé, c'était la bande passante du réseau. Pour donner un exemple concret, une application, j'ai participé à été fait côté serveur et a abouti à 200 mo page web d'être envoyé au client (il était impossible de faire moins sans majeur majeur de la re-conception d'un tas d'applications); résultant de 2-5 minutes de temps de chargement de page.
Lorsque nous nous sommes mis en œuvre en envoyant le JSON données codées à partir du serveur et local JS génération de la page, le principal avantage est que les données envoyées réduit à 20 mo, ce qui entraîne:
De la réponse HTTP taille: 200 mo+ => 20 mo+ (avec les correspondants des économies de bande passante!)
De temps pour charger la page: 2-5 min => 20 secondes (10 à 15 qui sont prises par DB requête qui a été optimisé pour l'enfer un plus).
IE processus de taille: 200 MO+ => 80 MO+
Rappelez-vous, les 2 derniers points sont principalement dues au fait que côté serveur eu à utiliser de merde tableaux dans les tableaux de l'arbre de la mise en œuvre, alors que d'aller à côté client nous a permis de refonte de la couche de la vue à utiliser beaucoup plus léger, page. Mais mon point principal était la bande passante du réseau de l'épargne.
J'ai construit une bonne application web où tous CRUD fonctionnalités sont disponibles dans l'absence de JavaScript, en d'autres termes, tous AJAX effets sont strictement progressive des améliorations.
Je crois qu'avec assez de dévouement, la plupart des applications web peuvent être conçues de cette manière, d'où un affaiblissement de nombreux de la logique du serveur vs client de la logique de "différences", tels que la sécurité, l'évolutivité, soulevé dans votre question, parce que dans les deux cas, la demande est acheminée à un même contrôleur, dont la logique métier est tout de même jusqu'à ce que le dernier kilomètre, où JSON/XML, au lieu de la pleine page HTML, est renvoyé pour ceux XHR.
Seulement dans quelques cas où la AJAXified application est bien plus avancée que ses statique contrepartie, GMail étant le meilleur exemple de venir à mon esprit, alors on a besoin de créer deux versions et de les séparer complètement (Bravo à Google!).
Je voudrais donner à mes deux cents sur ce sujet.
Je suis en général en faveur de l'approche côté serveur, et voici pourquoi.
J'ai écrit plusieurs systèmes à l'aide de ces deux approches, et dans mon expérience, côté serveur est le chemin. Toutefois, cela ne veut pas dire que je ne pas utiliser AJAX. Tous les systèmes modernes que j'ai construit intègrent à la fois des composants.
Espère que cette aide.
À ce stade, le côté client de la technologie est à la pointe, avec l'arrivée de nombreux clients côté des bibliothèques comme la colonne vertébrale, knock-out, de la Colonne vertébrale, puis avec plus de côté client de modèles tels que JSrender , moustache, etc, de développement côté client est devenu beaucoup plus facile.
donc, Si mon exigence est d'aller pour l'application interactive, je vais sûrement aller pour le côté client.
Dans le cas où vous avez plus statique contenu html alors oui aller pour le côté serveur.
J'ai fait des expériences en utilisant les deux, je dois dire que côté Serveur, il est relativement plus facile à mettre en œuvre puis côté client.
Comme la mesure de la performance est concerné. Lire ceci, vous comprendrez côté serveur scores de performance.
http://engineering.twitter.com/2012/05/improving-performance-on-twittercom.html
Je sais que ce post est vieux, mais je voulais à tout commentaire.
Dans mon expérience, la meilleure approche est d'utiliser une combinaison de côté client et côté serveur. Oui, Angular JS et les cadres similaires sont populaires maintenant, et ils ont fait plus facile de développer des applications web qui sont légers, ont amélioré la performance, et de travailler sur la plupart des serveurs web. MAIS, l'exigence majeure dans les applications d'entreprise est de l'affichage des données de rapport qui peut englober plus de 500 enregistrements sur une page. Avec des pages de retour de longues listes de données, les Utilisateurs sont souvent à la recherche de fonctionnalités qui feront de cette énorme liste de facile à filtrer, de recherche, et d'effectuer d'autres fonctions interactives. Parce que IE 11 et antérieures d'IE sont les navigateurs sont le "navigateur de choix"dans la plupart des entreprises, vous devez être conscient que ces navigateurs ont encore des problèmes de compatibilité moderne à l'aide de JavaScript, HTML5 et CSS3. Souvent, l'exigence est de faire un site ou une application compatible sur tous les navigateurs. Cela nécessite l'ajout d'shivs ou à l'aide de prototypes, ce qui, avec le code inclus pour créer une application côté client, s'ajoute à de chargement de la page sur le navigateur.
Tout cela permettra de réduire les performances et peut provoquer de terribles IE erreur "Un script présent sur cette page ralentit Internet Explorer pour exécuter lentement", obligeant l'Utilisateur de choisir s'ils veulent poursuivre l'exécution du script ou pas...la création de mauvaises expériences de l'Utilisateur.
Déterminer la complexité de l'application et de ce que l'utilisateur veut maintenant, et pourrait vouloir dans le futur en fonction de leurs préférences et à leurs applications existantes. Si c'est un simple site web ou l'application avec petit-à-moyennes des données, l'utilisation du Framework JavaScript. Mais, s'ils veulent intégrer l'accessibilité; SEO; ou besoin d'afficher de grandes quantités de données, utilisez le code côté serveur pour rendre les données et le code côté client avec parcimonie. Dans les deux cas, utilisez un outil comme Fiddler ou Chrome Developer tools pour vérifier le chargement de la page et le temps de réponse et d'utiliser les meilleures pratiques pour optimiser le code.
Caisse MVC applications développées à l'aide ASP.NET de Base.
Je pense que la deuxième variante est mieux. Par exemple, Si vous mettre en place quelque chose comme 'skins' plus tard, vous vous remercier pour pas la mise en forme html sur le serveur 🙂
Il maintient également une différence entre la vue et le contrôleur. Ajax données est souvent produit par le contrôleur, ainsi soit-il juste de retour de données, pas en html.
Si vous allez créer une API plus tard, vous aurez besoin de faire quelques changements dans votre code
Aussi, "Nues" de données est plus cachable que le HTML, je pense. Par exemple, si vous ajoutez un peu de style pour les liens, vous aurez besoin de reformater tout le code html.. ou d'ajouter une ligne à votre js. Et il n'est pas aussi grand que html (en octets).
Mais Si beaucoup de scripts sont nécessaires pour le format de données, Il n'est pas cool de demander aux utilisateurs' navigateurs pour le formater.
Tant que vous n'avez pas besoin d'envoyer des données au client pour lui permettre de faire le travail, côté client vous donnera un système plus évolutif, que vous êtes à la distribution de la charge sur les clients plutôt que de marteler votre serveur à tout faire.
Sur le revers de la médaille, si vous avez besoin de traiter beaucoup de données pour produire une petite quantité de html à envoyer au client, ou si des optimisations peuvent être prises pour utiliser le serveur à aider de nombreux clients à la fois (par exemple, traiter les données une fois et envoyer le html résultant pour tous les clients), alors il peut être plus efficace d'utiliser les ressources pour faire le travail sur d'autre serveur.
Si vous le faites en Ajax :
Vous aurez à prendre en compte les questions d'accessibilité (recherche sur l'accessibilité du web dans google) pour personnes à mobilité réduite, mais aussi pour les anciens navigateurs, ceux qui n'ont pas JavaScript, des robots (comme google bot), etc.
Vous aurez pour flirter avec une "amélioration progressive" qui n'est pas simple à faire si vous n'avez jamais travaillé avec beaucoup de JavaScript. En bref, vous aurez à faire votre app avec les anciens navigateurs et ceux qui n'ont pas JavaScript (certains mobiles par exemple) ou si c'est de la désactiver.
Mais si le temps et l'argent n'est pas un problème, j'irais avec amélioration progressive.
Mais aussi envisager le bouton "Retour". Je déteste quand je suis de navigation 100% AJAX site web qui rend le bouton de retour inutile.
Bonne chance!
2018 réponse, avec l'existence de Node.js
Depuis Node.js vous permet de déployer logique Javascript sur le serveur, vous pouvez ré-utiliser la validation à la fois côté serveur et client.
Assurez-vous d'installer ou de restructurer les données de sorte que vous pouvez ré-utiliser la validation sans modification du code.