standards

Attention, c'est un codeur (pas content) qui vous parle.

Hier, en aidant un pote pour son site, il me montre un système pour faire des onglets dans une page web. Un truc assez simple en fait : on dispose de quelques liens et suivant que l'on clic sur le lien 1 ou 2, c'est le bloc A ou B qui devient visible (dans la même page html, donc).

J'ai littéralement pété un câble quand j'ai vu un code JavaScript de 300 lignes pour faire ça.

Merde : c'est quoi cette manie de faire compliqué/complexe, même pour un truc ultra simple ?
Ok, le code date de 2006, et à l'époque c'est IE6, mais quand même… Lors d'un clic, il n'y a pas besoin de 300 lignes de codes pour faire un getElementById(id).style.display="none".

Nan franchement, parfois je ne vois pas. Je ne vois pas ce qui motive certains à vouloir faire 3 tonnes de code pour un truc simple. Encore, s'il y avait eu des fonctions supplémentaires… Je dis pas, mais là non.

Finalement, on a tout refait le code. 20 lignes de codes JS à tout casser, et ça marche. Et j'aurais même pu le faire en 100% CSS, mais ça n'aurait pas marché sur IE8;7.

Et je ne parle même pas de jQuery. Je ne suis pas grand programmeur en JS, mais quand j'en vois qui utilisent ça pour des menus déroulants, j'ai envie de hurler « STOP » : la bibliothèque jQuery fait 250 kio : servez vous en pour faire des choses complexes mais pas pour des menus déroulants. Y'a pas besoin de JS pour ça.
Revenez un peu sur Terre, et utilisez simplement les briques de base pour construire les bases.
Merde.

image de kk+

15 commentaires

gravatar
GoustiFruit a dit :

J'espère que tu lui as cassé la gueule !?

gravatar
adr_elo a dit :

Pas d'accord, je suis pour la création, si c'est pour repiquer le code des autres, on n'avance plus. Jquery, c'est bof bof au niveau clarté du code. Que ce soit la bibliothèque ou le code créé par ses utilisateurs, ce n'est pas très clair.

Et puis, le programmeur passe par une évolution : à ses débuts, ses codes ne sont pas aussi optimisés que 10 ans après.


Dans l'exemple donné, que peux bien faire :
$(this).find(".sub").stop().fadeTo('fast', 1).show() ?

C'est clair comme du jus de boudin un "find" puis "stop" puis "fadeto". On a l'impression que chaque fonction appelle une autre. Ce n'était pas plus clair d'avoir :
var obj=this.find(".sub");
obj.stop();
obj.fadeTo...
obj.show()

Bref, c'est pas très propre tout ça.

gravatar
Louix76 a dit :

Je suis entièrement d'accord avec toi !

gravatar
Le Hollandais Volant a dit :

@adr_elo :


Pas d'accord, je suis pour la création, si c'est pour repiquer le code des autres, on n'avance plus.



Euh, j'ai pas dit le contraire.
Mais si on me propose un code qui me va, qui est libre, etc. je vais pas me priver quoi. Il ne s'agit alors pas de piquer le code des autres, mais de gagner du temps.

Le logiciel qui fait tourner mon blog : au début j'ai songé à écrire le mien en PHP, mais c'était trop long, donc j'en ai pris un vieux et léger et je l'ai ammélioré : gain de temps +12 minimum.

En programation, je pense aussi que c'est en additionnant nos connaissances qu'on avance, pas en créant chacun notre programme de notre coté. Il faut de la diversité, ok, mais s'il n'y a pas d'entraide du tout, ça ne va pas non plus.


$(this).find(".sub").stop().fadeTo('fast', 1).show()


Aucune idée, j'ai pas étudié de code, et justement c'est un code que je dénonce dans ce billet.
Rien que l'idée d'utiliser du JavaScript pour un menu déroulant me pique les yeux.

Ok, c'est possible, mais c'est pas une raison de le faire.

C'est également possible de créer un site web avec Word (il parait). Pourtant le premier qui me demande comment on fait, je lui fait bouffer le livre du Zéro.

gravatar
Identitools a dit :

[Sors d'une longue partie de Minecraft en multijoueurs]
Lis "Revenez un peu sur Terre, et utilisez simplement les briques de base pour construire les bases."
[Retourne se connecter sur son serveur favori]

gravatar
norea a dit :

ouais, et au lieu d'utiliser du libre, vous les faites en silverlight, gain de temp +1000, souplesse du design, code très agréable à écrire ou à lire ^^

gravatar
Sined a dit :

Pour moi, ces bouts de code qui prennent 300 lignes au lieu de 20 sont souvent dûs à deux raisons/problèmes :
- c'est un débutant qui a fait l'appli.
J'ai remarqué que souvent les débutants développent de véritables usines à gaz pour de petits trucs simples car ils n'ont pas encore acquis les "façons de penser", n'ont pas une vision globale de leur code ou qu'ils ne maitrisent pas assez le langage (d'où l'intérêt de revenir régulièrement sur son code).

- l'appli a été déposé sur un site de partage de codes sources, et est désormais bêtement repompé par tous ceux qui ne maitrisent pas cette techno (surtout que le code était noté par 5 étoiles (évalué comme tel par ceux qui ont repompé avant) ).

gravatar
Androc a dit :


Et je ne parle même pas de jQuery. Je ne suis pas grand programmeur en JS, mais quand j'en vois qui utilisent ça pour des menus déroulants, j'ai envie de hurler « STOP » : la bibliothèque jQuery fait 250 kio : servez vous en pour faire des choses complexes mais pas pour des menus déroulants. Y'a pas besoin de JS pour ça.
Revenez un peu sur Terre, et utilisez simplement les briques de base pour construire les bases.



Je suis pour les choses simples, interfaces épurées, utiliser le JavaScript pour ce à quoi il sert et ne pas lui faire faire des choses inutiles, etc.

Cependant je nuancerai un peu ton propos dans la mesure où si l'on commence à vouloir utiliser du JavaScript, ce n'est pas idiot de penser à intégrer un framework dès le début du travail.

jQuery fais 229ko dans sa version "développement" (à ne pas déployer sur un site) mais seulement 31ko dans sa version "production" (minifier, gzip). Vu que c'est un code fixe, tu le mets en cache et ça n'alourdit le chargement que la première fois, donc le poids est un faux problème.

En revanche, jQuery permet de condenser énormément le code pour un "coût" fixe (la librairie).

Il y a eu deux exemples donnés : getElementById(id).style.display="none"
en jQuery, cela donnerait $(id).hide() ce qui est tout aussi compréhensible et plus court.
$(this).find(".sub").stop().fadeTo('fast', 1).show() ce code est également clair à partir du moment où on sait qu'on peut chaîner des appels avec jQuery. Il n'est en revanche pas du tout interdit d'écrire son code comme l'a écrit adr_elo : var obj=this.find(".sub");
obj.stop();
obj.fadeTo...
obj.show()
c'est juste plus long et pas forcément plus clair. De plus écrire ce code en pur JavaScript représenterait bien plus de code. Alors, si c'est la seule utilisation JavaScript dans un site web, je suis d'accord qu'on peut se fendre de réinventer la roue, mais sinon c'est contre productif.

En dehors de ce laïus, je suis parfaitement d'accord qu'on tombe parfois sur des codes horriblement complexe pour effectuer des choses simples. Un site qui recense ce genre de choses : The Daily WTF

gravatar
Tommy a dit :

Je suis d'accord avec Sined.
C'est normal, quand on débute d'en faire trop. On fait du "zèle" de développement.

Personnellement, je sais que je peux le faire en JavaScript classique, mais c'est plus simple à faire en jQuery. Si je veux me simplifier la vie, ou si j'ai déjà besoin des bibliothèques jQuery dans ma page, j'utiliserais jQuery.
Sinon, j'utiliserais du JavaScript tout simple.

jQuery est une super bibliothèque, mais elle doit être utilisée que si on en a vraiment besoin, ou si on manque de temps. Parfois, c'est quand même plus pratique de faire un machin.fadeTo(300, function() { $(machin2).fadeIn(800) }); que de réécrire du code pour faire un fondu en JavaScript.

Tout est question de proportions et de bon sens. (Utiliser jQuery pour faire des menus déroulants, c'est aussi malin que d'utiliser du JavaScript pur pour faire une énorme et complexe application de gestion...)

gravatar
Le Hollandais Volant a dit :

@Androc : je connais TDWTF :D
On trouve parfois des cas, comme une fois, un formaulaire de numéro de téléphone. Au lieu de faire "autoriser([0-9]" (pour n'autoriser que les chiffres), le code interdisait tout, et un par un : "interdire(abcdef… xyzABCDEF…XYZ…;:?;!§%…)." o_O

@Tommy : en faire trop, ok. Ne pas voir des simplifications, mais à ce point là… Je sais pas moi : le site du zéro propose un long tuto sur le JS. Certes, il n'est ni complet ni super-super-bien structuré, mais il pose les bases et permet d'en faire le minimum.


jQuery est une super bibliothèque, mais elle doit être utilisée que si on en a vraiment besoin, ou si on manque de temps.


Voilà !

gravatar
qwerty a dit :

J'essaye toujours de faire le plus simple possible. Après, j'arrive plus a me relire, et j'ai la flemme de l'améliorer. CQFD.

gravatar
doku a dit :

@Androc :
Contre-productif, je ne suis pas sûr, il faut penser maintenance avant tout.

En toute logique, la fonction obj.stop() te ramène le résultat de la fonction stop, qui serait un booléen ou qq chose du genre, selon le but de la fonction, pas l'objet lui-même.

$(this).find(".sub") te ramène bien un résultat différent de $(this)

C'est assez illogique, je trouve.

D'autre part, je crois savoir que les objets renvoyés par les fonctions Jquery ne sont pas ceux natifs et qu'une fois qu'on a récupéré un objet, les fonctions natives JS ne sont plus dispo (et il faut tout coder en fonction Jquery). Ca, c'est contre-productif !

gravatar
Iste a dit :

Je vais pas partir sur un gros com a troll pour changer, et juste me contenter de :

@Le Hollandais Volant : Tu comprends maintenant pourquoi une très grande partie des dev déteste les débutants qui se lancent sans suivre de cours ;)

gravatar
Alain Ternaute a dit :

Tout à fait d'accord avec vous. Et pareil en graphisme, pour les images : combien de sites (même célèbres et fréquentés) font du gâchis de bande passante rien qu'avec les images...
J'ai un débit de connexion faiblard, et je peste souvent contre ces sites trop longs à charger.
(Korben, nan, pas toi aussi !!!)


Et j'aurais même pu le faire en 100% CSS, mais ça n'aurait pas marché sur IE8;7.


Merci beaucoup pour ton astuce. Mais dis-donc des tuyaux comme ceux-là, faut être un sacré limier du Web pour en trouver... Ou alors avoir un très longue expérience en dev XHTML/CSS pour les faire.
J'ai essayé de trouver ce genre d'info (pour un bête menu déroulant vertical) eh bien impossible de trouver quoi que ce soit d'exploitable. Que du javascript, JQuerry, et cie.

gravatar
Le Hollandais Volant a dit :


Mais dis-donc des tuyaux comme ceux-là, faut être un sacré limier du Web pour en trouver... Ou alors avoir un très longue expérience en dev XHTML/CSS pour les faire.



Je pense qu'il suffit d'un peu d'imagination pour arriver à ce qu'on veut :)


J'ai essayé de trouver ce genre d'info (pour un bête menu déroulant vertical) eh bien impossible de trouver quoi que ce soit d'exploitable. Que du javascript, JQuerry, et cie.



Tu peux regarder ma page des astuces CSS : http://lehollandaisvolant.net/tuto/css.php
J'ai mis tout plein de truc en 100% CSS :D

PS : bientôt je publierais un article sur les petits "trucs" en CSS qui peuvent faire la différence sur un design "standard" et un design plus paufinné. Il y a des propriétés CSS que peu de personnes connaissent, mais qui sont pourtant pas mal.

Les commentaires sont fermés pour cet article