Le JavaScript intrusif est-il toujours correct?


9

Je pensais que si tous les utilisateurs d'un site Web devaient activer JavaScript, est-il acceptable d'utiliser un code JavaScript intrusif?

Je suis tout à fait favorable à l'amélioration progressive, mais à quoi sert une application Web avancée qui fait rebondir les utilisateurs à la porte s'ils ont un ancien navigateur ou JavaScript désactivé?

Nous avons un public cible très mince, et nous pouvons dire à notre public cible quel navigateur et plugins / fonctionnalités ils doivent avoir. Donc ma question est, est-ce que le mélange de JS et de HTML va bien dans ce cas? Comme utiliser les attributs onclick.


1
"Si tous les utilisateurs d'un site Web doivent activer JavaScript ... s'ils ont ... JavaScript désactivé?" <- C'est une contradiction, et je ne sais pas comment donner une réponse utile sans que cela soit résolu.
HedgeMage

3
Notez que selon votre public cible et votre marché, il peut y avoir des lois sur l'accessibilité qui exigent que vos sites Web soient accessibles à tous les utilisateurs, y compris les personnes handicapées. Ce que cela signifie dans la pratique pour JS, je ne sais pas. AFAIK (IINAL) où je suis, nous avons de telles lois mais il n'y a pas encore eu de cas de test pour déterminer les détails.
James

16
Qu'entendez-vous par javascript "intrusif"? Je ne connais pas le terme.
Macke

2
Donc, votre question est essentiellement la suivante: écrire du code merdique est-il toujours correct? Oui, pour les prototypes et les projets suffisamment petits et ne nécessitant aucune maintenance / mise à niveau une fois terminés. Sinon, vous vous retrouverez face à face une demi-année plus tard, car cela vous prend une heure pour comprendre ce qui aurait pu être plausible si vous aviez investi quelques secondes de plus lorsque vous l'avez mis en place.
back2dos

3
Je pensais que cette question allait demander si c'était plus ok pour redimensionner la fenêtre du navigateur de quelqu'un ou avoir des tonnes de popups.
whatsisname

Réponses:


17

Il s'agit d'une décision commerciale plutôt que d'une décision de conception.

Il y a un coût à fournir une version du site Web qui fonctionne sans JavaScript (ou Flash ou Silverlight). L' entreprise doit décider si la perte de revenus / visiteurs en vaut la peine ou non.

Donc, si cela coûte 10 000 $ pour écrire cette version (le nombre peut être important, mais il n'est là que pour cet exemple), l'entreprise récupérera-t-elle ces dépenses pendant la durée de vie du site? Sinon, ne fournissez pas cette version.

Cependant, s'il ne coûte que 100 $ pour écrire cette version, il serait logique de fournir la dégradation gracieuse.

Après avoir pris la décision commerciale de ne cibler que les navigateurs compatibles JavaScript et de vous attendre à ce que vos utilisateurs activent JavaScript, il est parfaitement logique que votre application tire parti des fonctionnalités dont vous disposez maintenant. La seule chose que vous devrez faire est (comme le fait Stack Overflow lui-même) un avertissement indiquant que le site ne fonctionnera pas correctement si l'utilisateur ne l'a pas activé.


2
Je pense que vous me comprenez mal.
Petah

5
Vous devez bien vouloir nous dire WTF "JS intrusif" signifie pour éviter le malentendu. On vous a déjà demandé de le faire (voté 7 fois)!
maaartinus

1
J'ai construit quelques pages gracieusement dégradantes dans le passé et j'ai trouvé que le html et le javascript étaient beaucoup moins transparents, si vous voulez toujours offrir aux visiteurs activés JS la meilleure expérience utilisateur. Les pages étaient BEAUCOUP plus difficiles à construire et je crois que le gars qui maintient la page aura quelques difficultés à suivre votre code. Il y a donc certainement un coût de maintenabilité à long terme à garder à l'esprit lors de l'estimation du coût de dégradation progressive de votre site. J'ai trouvé très tentant de faire des compromis sur l'UX compatible JS.
Thomas Stock

1
@maaartinus, javascript intrusif est l'opposé de javascript discret en.wikipedia.org/wiki/Unobtrusive_JavaScript
Petah

1
OK, donc je ne peux que dire ... html + js est un fléau (implémentations cassées ignorant des normes étranges) et je minimiserais l'effort comme l'écrit Thomas Stock. Essayez de le faire fonctionner parfaitement dans le navigateur choisi (et ne choisissez pas IE6: D) a et d'être supportable dans les autres. Au lieu de contourner tous les problèmes, passez votre temps sur les fonctionnalités.
maaartinus

20

Quelque chose que personne d'autre n'a encore évoqué…

99% des sites Web accueillent un visiteur particulier, un avec peu ou pas de JavaScript. Ce visiteur a un nom: Googlebot .

Une grande raison pour laquelle tout le monde devrait aussi se soucier des visiteurs aveugles

Si vous êtes l'un des rares qui ne se soucie pas du tout du trafic des moteurs de recherche, eh bien, c'est votre prérogative, mais cela ne fait certainement pas une règle générale.


4
En effet. Nous avons amélioré l'un de nos sites pour le rendre plus accessible aux aveugles et, par conséquent (involontaire), le trafic que nous avons obtenu de Google a été multiplié par près d'un facteur 10 en un an.
Kris

1
Oui, mais le site Web n'est pas destiné au public. Les classements de recherche ne s'appliquent donc pas.
Petah

3
@Petah: Avez - vous envisagé indiquant clairement et succinctement ce que vos exigences précises, des situations et des restrictions sont dans la question plutôt que émaillant peu des bribes d'informations ici et là dans les commentaires?
JUSTE MON AVIS correct le

1
Tu n'as plus raison. Depuis un certain temps, Googlebot fonctionne bien en javascript (pas de surprise, étant donné que Google fonctionne à la fois sur le moteur V8 et angularjs).
maaartinus

8

Les gens qui écrivent des choses pour des environnements internes spécifiques sont une grande raison pour laquelle IE6 est toujours là.

Pensez-y


4

Si vous faites un site JS uniquement (peut-être que «application» dans ce cas est un meilleur mot), la soi-disant «discrétion» de JS n'a pas autant d'importance que dans le cas où vous devez vous dégrader gracieusement en non Version JS.

Cependant: JavaScript écrit de manière discrète est en général plus facile à écrire (et du moins je le trouve de cette façon) et à maintenir. Il est plus facile d'introduire des modifications dans la mise en page HTML qui ne cassent pas JS et des modifications dans JS sans se soucier de casser HTML.


4

Si vous créez un site Web, je garderais JavaScript discret. Cependant, si vous construisez une forme d'application (comme Google Docs), JavaScript sera assez intrusif.

JavaScript et HTML5 sont parfaits pour créer des applications si tel est votre besoin, mais c'est vraiment un choix commercial.


Oui, cela ressemble plus à Google Docs qu'à un site Web. Et nous utilisons beaucoup HTML5.
Petah

Corrigez-moi si je me trompe, mais je pense que vous pouvez toujours utiliser la plupart des concepts en JavaScript discret sans nécessairement créer un gâchis dans le code? C'est le concept qui se démarque et qui me fait le plus de bruit. Peut-être faites-vous référence à d'autres aspects du JavaScript discret que vous devriez éviter en utilisant HTML5, comme la rétrocompatibilité avec les utilisateurs non JavaScript? Vous devez choisir ce qui vous
convient

Ce dont je parle, c'est comment le site fonctionnera si Javascript est désactivé. Il y a des moments où il sera pleinement fonctionnel (si ce n'est peut-être pas aussi agréable) et d'autres où il échouera complètement. Je ne m'inquiète pas des anciens navigateurs qui ne prennent pas en charge JavaScript (Netscape 1). Bien sûr, en tout cas, il n'y a aucune raison d'écrire BAD javascript
Zachary K

2

La majorité des utilisateurs (mes utilisateurs, je ne connais pas vos utilisateurs) ont JavaScript disponible et activé. Donnons à ces utilisateurs une expérience utilisateur exceptionnelle. Cependant, vous devez toujours fournir une version de votre site qui fonctionne sans Javascript. Je sais que c'est compliqué de construire 2 versions, mais c'est comme ça que ça se passe dans le développement web. (En réalité, vous devrez peut-être créer plusieurs versions, une troisième pourrait être une version mobile de votre site).

Ce que vous ne voulez pas faire, c'est concevoir le plus petit dénominateur commun: "Eh bien, certains utilisateurs ont désactivé Javascript, nous allons donc concevoir notre site pour qu'il fonctionne bien pour eux - pas de Javascript, cliquez sur le serveur pour tout . " Cela pénalise juste la majorité de vos utilisateurs qui ont Javascript.


Ce que je dis, c'est qu'aucun des utilisateurs n'a désactivé JavaScript. S'ils le font, ils ne peuvent pas accéder au site.
Petah

@Petah, eh bien, ce n'est pas génial non plus. Vous ne voulez pas renvoyer les utilisateurs sans Javascript. Alors c'est ce que vous demandez alors, puisque je chasse les utilisateurs sans Javascript, est-ce que je peux mettre le JS dans le même fichier avec mon HTML?
Marcie

Nous avons un public cible très mince, et nous pouvons dire à notre public cible quel navigateur et plugins / fonctionnalités ils doivent avoir. Donc, ma question est, est de bien mélanger JS et HTML dans ce cas. Comme utiliser les attributs onclick.
Petah

4
@Petah, il y a d'autres raisons d'éviter de mélanger JS et HTML. C'est les mêmes raisons pour lesquelles nous évitons de mélanger les styles et le HTML - séparation des préoccupations. Si votre style est mélangé à votre structure, qui est mélangée à votre comportement, vous avez quelque chose de très difficile à maintenir. Après l'avoir fait de manière "discrète" pendant un certain temps, vous verrez à quel point vos fichiers sont élégants et combien il est plus facile d'apporter des modifications.
Marcie

2
@Petah, avez-vous un énorme fichier JS pour l'ensemble de votre site, et tout y passe? J'ai environ un fichier JS par page, et cela fonctionne bien pour moi. Des trucs vraiment «communs» sont tout ce qui se trouve dans le fichier JS partagé.
Marcie

2

Vous avez mentionné l'utilisation d'attributs onlick. Envisagez-vous d'utiliser un gestionnaire d'événements JavaScript pour la navigation dans les pages?

Je le déconseille pour une seule raison: il casse le clic du milieu .

Pour un clic régulier sur un lien, en supposant que JavaScript est activé, ceux-ci seront fonctionnellement équivalents:

<a href="#" onclick="window.location = 'myPage.htm';">Click here</a>
<a href="myPage.htm">Click here</a>

Si vous essayez de cliquer avec le bouton du milieu sur le premier exemple, vous obtiendrez une page vierge plutôt que maPage.htm.

En dehors de cet exemple, je pense qu'il est correct d'utiliser du JavaScript intrusif si cela est logique pour vous. Il faut moins de temps pour écrire (mais pas nécessairement maintenir) JavaScript en ligne, et la perte de l'amélioration progressive peut ne pas être importante dans votre situation.


Dans ce cas, ce n'est pas pour la navigation, c'est pour des boutons comme 'Actualiser', 'Supprimer', 'Créer', etc.
Petah

Dans ce cas, je dirais que c'est un style personnel. Je trouve la méthode intrusive plus rapide / plus facile à démarrer, mais la façon «correcte» d'être plus propre et plus facile à entretenir. Il y a certainement un facteur de bien-être flou à faire de la bonne façon.
GavinH

+1 - Il est plus facile de garder le code propre dès le départ s'il est discret. Je trouve que si je deviens trop désordonné au début, il peut être trop difficile d'essayer de résoudre les problèmes plus tard. Je suis dépassé. Je préfère faire le meilleur travail possible pour que quand je rentre, ce n'est pas si mal de refactoriser.
jmort253

2

JavaScript intrusif était correct il y a 10 ans. C'est aussi bien si vous êtes un amateur, ou si vous construisez un prototype jetable, ou s'il y a des circonstances qui le nécessitent, comme une dépendance au code hérité ou au code piloté par les données et cela coûterait tout simplement trop pour réparer al

Si vous construisez quelque chose à partir de zéro, suivez les normes, écrivez un code correct, propre et maintenable. Écrivez quelque chose dont vous serez fier et qui ne vous rendra pas malade dans un an quand un pauvre schmuck vous demandera de l'aide parce qu'il ne comprend pas un hackjob que vous avez fait. Écrivez quelque chose qui garantit que vos concepteurs Web peuvent facilement échanger des CSS sans avoir à creuser leur chemin à travers HTML et JavaScript désordonnés.

Générez l'application de manière à ce qu'elle ait de la place pour se développer, afin que tout développeur puisse intervenir et la maintenir. Le temps investi maintenant vous fera gagner du temps à l'avenir, sinon votre temps, celui de quelqu'un d'autre.

Assurez-vous que le JavaScript peut être réutilisé dans un autre contexte. Assurez-vous qu'une refonte complète du site Web peut être juste cela, une refonte et non pas une reconstruction complète de quelque chose qui existe déjà mais qui n'a pas été construit dur.

Imaginez à quel point il serait embarrassant de devoir consacrer autant de temps à une refonte qu'à sa construction d'origine.

Faites-moi confiance par expérience, JavaScript discret vous empêchera de faire des erreurs coûteuses.


2

D'accord, appelez-moi simplement le gardien de la crypte pour tout ce que je fais, mais je n'ai jamais senti que la vraie valeur de cela avait été bien comprise. Historiquement, il a été affirmé que "JavaScript discret" ou, garder votre JS hors du HTML via des attributs de gestionnaire d'événements HTML en ligne et des balises de script qui ne se liaient pas autant que possible à un fichier est un énorme élément clé de:

  • Problèmes d'accessibilité
  • SEO
  • Et une amélioration progressive

LIES! (eh bien, maintenant ils le seraient)

La vérité est que vous pouvez faire du JavaScript techniquement intrusif tout en retirant les trois éléments ci-dessus. À moins que vous ne construisiez du contenu HTML de manière dynamique, ce qui était un gros non-non SEO à l'époque.

Mais arrêtez-vous et pensez ... à VOUS!

Vraiment, le gros avantage, la victoire la plus importante et la moins vendue du maintien de la séparation a toujours été l'avantage direct que le développeur en tire. Vous pouvez avoir autant de gestionnaires d'événements que vous le souhaitez sur le même élément html pour le même événement que cela est pratique. Cela signifie que si une balise avec class="some_class"obtient toujours un certain comportement mais obtient également un comportement bonus lorsqu'elle est à l'intérieur d'une id="bonus_behavior"div, nous n'avons pas à commencer à jouer avec la logique à l'intérieur de notre gestionnaire d'événements à autorisation unique pour créer une branche pour cela. Nous pouvons simplement ajouter ou non des gestionnaires selon le contexte.

Facile à lire aussi

Un autre avantage est la lisibilité. C'était une préoccupation plus critique lorsque les outils de navigation consistaient en un message d'erreur exclusif d'IE vous disant qu'il y avait quelque chose de mal avec [object]mais IMO, c'est toujours un gros problème. CSS ici, JS là-bas et HTML est l'endroit où eux et le serveur se rencontrent. Avec toutes ces choses réunies en un seul endroit, il est logique de s'appuyer sur les crochets (les ID, les classes et la hiérarchie) pour créer une couche d'abstraction que tout utilise pour se connecter au HTML.

IMO, plus vous POUVEZ garder vos HTML, CSS et JS séparés, plus il est facile non seulement de lire, mais aussi de modifier et de comprendre ce qui se passe. Je vois un div vide avec "dynamic_combo_box" en tant que classe et j'ai une bonne idée que quelque chose fait une sélection de fantaisie qui charge les données dynamiquement. J'ai une piste sur la façon de trouver cela dans le JS et le CSS et si je rencontre la classe dans ces préoccupations, j'aurai une bonne idée de quoi il s'agit et comment le trouver dans le HTML.

Trop facile à rendre encore plus bâclé

Et bien sûr, la lisibilité a tendance à aller de pair avec la maintenabilité. Lorsque vous faites simplement les choses directement en vidant le tout dans des balises de script où se trouve le HTML pertinent, le plus souvent, il devient plus facile pour les gens de simplement couper et coller ce script dans le HTML d'une autre page sur laquelle ils travaillent lorsque ils veulent des fonctionnalités similaires, ce qui signifie que vous avez maintenant une chose qui deviendra probablement deux choses ennuyeusement similaires mais pas 100% similaires dont le comportement peut devenir problématique au fil du temps en défiant les attentes et nécessiter l'ajout de branchements plus inutiles pour gérer les exceptions dont vous avez besoin un autre ne l'a pas fait.

Ainsi, le comportement de rigging de ces crochets HTML encourage la réutilisation du code de manière intelligente. Si vous avez besoin de brancher le comportement pour une implémentation alternative, il vous suffit d'aller à la même fonction et de la gérer avec la hiérarchie HTML ou peut-être un data-att déclenchant un comportement alt. C'est un guichet unique pour quiconque veut comprendre comment les éléments d'interface utilisateur d'un certain type fonctionnent et ces types de copier-coller paresseusement paresseux feront la bonne chose / plus maintenable juste parce que c'est la chose la plus facile à faites maintenant et c'est la meilleure façon de rendre la maintenabilité possible. Faites-en la chose la plus simple à faire, même pour quelqu'un qui s'en fiche, que ce soit à cause de la panique ou de l'apathie.

Mais qu'en est-il de 2014?

Il peut être légitime de dire que dans les applications modernes d'une seule page, certaines de ces choses insignifiantes ne devraient peut-être pas être bloquées aussi dogmatiquement qu'elles l'ont été, mais croyez-moi quand je dis que je ne pense pas que je suis le seul à a été vendu dessus car cela rend finalement le travail plus facile. Je suis paresseux d'une manière (j'espère) plutôt bonne. J'aime quand je n'ai qu'à changer les choses en un seul endroit pour obtenir des changements partout dans une application, quand je n'ai qu'à regarder au même endroit pour comprendre ce qu'est le bogue, et quand j'ai du mal à comprendre ce qu'est le diable en cours et comment mieux réutiliser ce code pour faire quelque chose de très similaire.

C'est bien comme fractionner une base de données ou une couche de données, c'est bien. En fin de compte, c'est un gain de temps, pourquoi n'ai-je pas juste fait, comme prendre les cinq minutes pour faire la lessive la veille plutôt que de passer 10 minutes à fouetter vos boxers et à effectuer des contrôles d'odeur paranoïaque le lendemain matin.

Pour moi, ce sont ces motivations égoïstes qui ont toujours été le point principal de pourquoi je m'accroche non seulement à JS discret, mais à la séparation des préoccupations de style / comportement / contenu autant que possible, même si WHAT-freaking-WG fait de son mieux pour brouiller ces préoccupations de manière compréhensible et cool / pratique.

Maintenant que tout le monde fait des SPA et qu'il est presque stupide d'essayer de convaincre les entreprises que nous devons nous soucier des personnes qui fonctionnent sans JS (l'accessibilité peut maintenant être supposée être gérée avec du contenu généré par JS), il semble que la prochaine génération de développeurs JS se soucie moins à ce sujet mais IMO, il y a toujours une victoire là-bas et c'est principalement pour vous, le développeur qui écrit et maintient ce genre de choses. Et vraiment, cette victoire aurait toujours dû être le point le plus souligné, mais ne l'a jamais été pour une raison quelconque, car elle profite finalement à vous et également au produit par un heureux accident, car il est plus facile d'ajuster / modifier / déboguer.

Est-ce que ça va?

Eh bien oui, je suppose. Dans une application jetable jetable pour un concours ou quelque chose comme ça. Mais je le ferais quand même parce que j'en ai l'habitude et que ce n'est pas plus difficile à faire.


1

Si vous connaissez votre environnement d'exploitation cible, Javascript et les frameworks comme jQuery peuvent être une véritable aubaine. Par exemple, dans un environnement d'entreprise où le SOE a Javascript et IE8 plus que son plus sûr pour écrire des applications de navigateur côté client intensives.


1

Faciliter la dégradation gracieuse n'est qu'un des nombreux facteurs qui font du JavaScript discret un choix attrayant, et à mon avis, ce n'est pas le plus important.

D'après mon expérience personnelle, je dirais que si vous parlez d'un projet plus important, qui évoluera probablement beaucoup au fil du temps, l'utilisation d'un style discret rendra l'application beaucoup plus facile à maintenir, à déboguer et à refactoriser. C'est la principale raison pour laquelle nous utilisons toujours un style discret, même sur les sites qui exigent que JavaScript soit activé pour tous les visiteurs.


+1 à Shang pour ce joyau "Faciliter la dégradation gracieuse n'est qu'un des nombreux facteurs qui font de JavaScript discret un choix attrayant, et à mon avis, ce n'est pas le plus important." La mise en œuvre de Javascript peut parfois être une épée à double tranchant, j'ai trouvé personnellement
MattyD

1

En général, si vous développez un "site Web" traditionnel qui est disponible de manière anonyme, indexé par les moteurs de recherche et où les revenus sont générés par les annonces, alors vous devez fournir une dégradation gracieuse. L'idée étant que ce type de site vit et meurt par accessibilité, donc limiter l'accessibilité signifie perdre une tonne de pages vues et donc des revenus publicitaires.

Un accès restreint, généralement non indexable et non basé sur les revenus publicitaires (application Web) peut être beaucoup plus flexible. Cela revient à une décision entre l'étendue du support, la profondeur des fonctionnalités et le coût de développement. Pensez-y comme développer une application traditionnelle: quelle plateforme supportez-vous et quelles sont les spécifications minimales? Si vous ciblez une seule plate-forme et des spécifications limitées, vous pouvez vous concentrer sur la fourniture d'un produit supérieur avec moins de coûts de développement et de support, au prix d'une perte de part de marché potentielle.

Exemple: la recherche Google est un site Web. Google Docs est une application Web. Google Search n'est pas superflu et peut fonctionner à l'identique sans JavaScript, CSS et / ou images, etc ... - il fonctionne aussi bien dans les navigateurs en mode texte que dans les derniers navigateurs GUI. Google Docs ne fonctionne tout simplement pas avec JavaScript désactivé et ne se dégrade même pas gracieusement - pas même un avertissement pour activer JavaScript.


1

Je préfère que la plupart de la mise en page et de la navigation soient gérées en CSS. Oui, Lynx peut ne pas le prendre en charge, mais tous les navigateurs complets que je connais ne peuvent pas le désactiver. Ensuite, JavaScript peut être utilisé pour des choses plus flashy mais pas obligatoires. J'aime aussi Ruby on Rails à cet effet. Il peut faire beaucoup de ce que JavaScript serait requis pour faire côté serveur tant que vous n'avez pas besoin de mises à jour dynamiques de page.

Plus ciblé sur la réponse à la question: je N'AIME PAS le JavaScript requis, mais il y a une analyse de rentabilisation où il est requis comme l'a noté ChrisF.


0

Javascript est la norme par défaut en ce qui concerne tout type de contenu dynamique fourni par le client, s'ils n'ont pas JS, ils n'auront probablement pas Silverlight.

Ensuite, vous devez penser à votre marché / public. Êtes-vous programmers.stackexchcange ou bbc.co.uk/news? publics très différents.


0

Puisque vous pouvez regarder autour du Web et voir "Javascript intrusif" sur de nombreux sites, votre question de base est répondue, oui, elle est correcte, et de nombreux sites populaires le font, même Google.

Le plus important, cependant, est la dégradation gracieuse des fonctionnalités, même si vous insistez pour que vos utilisateurs aient activé Javascript, vous devez fournir un niveau d'expérience décent aux utilisateurs non-js, sinon ils ne reviendront jamais volontiers.


Ils ne seront même jamais autorisés après la première page.
Petah
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.