-
JavaScript, les bonnes pratiques : mise en place
Le 7 novembre 2010 par Maxime dans Conception web.
Le JavaScript est un langage qui s’exécute coté client, c’est-à-dire sur le navigateur du visiteur. Il peut servir notamment à réaliser des animations visuelles, ou des interactions avec les actions utilisateurs. Il a donc des particularités par rapport aux langages coté serveur comme PHP, Python ou Ruby. Appliquer ces bonnes pratiques permettront d’avoir une base solide pour vos applications.
- Le JavaScript peut-être désactivé
- Une question d’accessibilité
- Externalisez vos scripts
- Organisez et commentez votre code
- Compressez vos fichiers en production
Le JavaScript peut-être désactivé
Il ne faut jamais l’oublier : coté client = non sécurisé. Le javascript peut être lu par l’utilisateur, il peut être désactivé, il peut être modifié. Il faut donc en tenir compte lors de son développement. Il faut notamment éviter absolument d’établir des vérifications de sécurité en js, sans revérifier derrière dans votre langage serveur.
L’exemple type étant la validation de formulaire : on souhaite contrôler si l’utilisateur a laissé un champ vide ou si ce qu’il a rempli suit le schéma de regexp spécifié. Si l’utilisateur désactive le js, il pourra soumettre son formulaire en passant outre cette vérification. Si une sécurité n’est pas mise en place coté serveur, c’est l’intrusion…
Une question d’accessibilité
Car vos visiteurs peuvent avoir un navigateur dont le moteur javascript n’est pas activé, il faut que votre contenu soit accessible même sans js. Certains diront : « oh, tout le monde a javascript ! » Ceux-là seraient étonnés de voir le nombre d’utilisateurs désactivant le js. Certains n’ont même pas le choix, par exemple un réseau d’entreprise qui préfère désactiver le javascript pour des raisons de sécurité.
L’autre raison qui persuadera ceux qui ne sont pas encore convaincu de l’intérêt de rendre accessible sans js leur contenu : les moteurs de recherche. Google, Bing ou autres ne gèrent pas (encore) totalement le javascript. Certains progrès ont été faits sur le crawl du js, mais certaines techniques empêchent l’accès au contenu, notamment l’ajax.
Un exemple : une navigation par onglet.L’erreur classique serait de cacher en css avec un display: none les onglets qui doivent être cachés. L’utilisateur qui n’a pas javascript n’aura pas accès au contenu. Si on cache les onglets en js, les onglets seront bien cachés pour l’utilisateur possédant javascript, mais ils seront tout de même accessibles pour ceux qui ne l’ont pas.
Externalisez vos scripts
Externaliser, c’est rassembler le javascript dans un fichier externe au code html. On importe ensuite le fichier de la façon suivante :
<script type="text/javascript" src="monScript.js"></script>Notez que cette balise ne peut s’écrire sous forme auto-fermante, comme le <textarea>. J’ai déjà fait la maladresse et cherché l’erreur comme un con pendant de longues minutes…
<script />De cette façon, tout le code javascript est rassemblé à un seul endroit, et non dispersé dans le code. En termes de maintenance, c’est plus pratique. Pas besoin de parcourir tout le code pour ajouter supprimer ou modifier une fonctionnalité.
Le code html ainsi épuré, est aussi lui-même plus lisible et maintenable. Encore une fois il y a aussi un intérêt en terme de référencement : un code allégé de tout script sera crawlable plus facilement par les moteurs de recherche. Tout ceci est également valable pour vos fichiers CSS.Edit via Epsillon : Il est intéressant de placer les balises <script> juste avant le </body> plutôt que dans le <head>. Ces fichiers seront ainsi téléchargés en dernier et ne retarderont donc pas le téléchargement du html et du css notamment. La page se chargera donc plus vite du point de vue de l’utilisateur. On pourra s’intéresser également à l’attribut defer de la balise <script>, qui permet de spécifier au navigateur qu’il doit les télécharger en dernier. Cet attribut n’est cependant pas supporté partout pour l’instant… Les fichiers CSS quant à eux doivent bien être placés tout en haut.
Organisez et commentez votre code
Bien commenter son code, c’est la première caractéristique d’un bon développeur. Mais là où certains langages sont assez explicites, comme le xhtml ou même certains snippets php, le js a la particularité d’être parfois très opaque.
$(this).addClass('active').siblings().removeClass('active')
.children('a').animate({opacity:0},350);Bien commenter son code peut-être donc crucial pour ne pas réduire sa productivité.
Pour augmenter la lisibilité, mais aussi la réutilisabilité du code, prenez l’habitude de programmer de façon modulaire. Quand chaque étape d’un algorithme est regroupée dans une fonction ou dans un objet, vous pouvez faire évoluer et maintenir votre code facilement. Et il vous sera aisé de récupérer une partie du code pour un projet futur.
Compressez vos fichiers en production
On l’a dit plus haut, il est important dans la phase de développement d’avoir un code clair et documenté. Cela dit, il est bon de ne pas mettre en production vos fichiers tels quels. Le js étant exécuté coté client, le script est téléchargé. Un fichier js trop lourd ralentira donc l’affichage de la page. Il est également préconisé par les moteurs de recherche et serait en cela un critère de placement dans les SERP. Il est donc d’usage de n’y laisser que le strict nécessaire.
Des compresseurs de fichiers comme Google closure ou YUI compressor feront le boulot pour vous. On peut aller plus loin avec ces outils, pour par exemple compresser les noms de variables utilisées dans nos scripts. En préfixant systématiquement les noms de variables par un underscore _, on dit au compresseur qu’il peut compresser la variable. Evidemment, gardez une version non compressée de vos scripts pour pouvoir les maintenir.
Enfin un point essentiel pour alléger le poids de vos scripts : vérifier que la compression gzip est activé sur votre serveur.
A votre tour
Les erreurs à éviter et les conseils à appliquer en JavaScript ne tiennent certainement pas en un seul article. Nous aborderons dans de prochains billets l’optimisation des performances, l’utilisation de librairies, le développement d’animations… En attendant, n’hésitez pas à partager vos best practices js dans les commentaires !
Flux RSS de design, referencement, actus internet - Bewype
Recevez les articles tout chauds sortis du four !
Inscrivez-vous à notre flux RSS
Partager - Faîtes découvrir le blog Bewype - conception site internet et logique entrepreneuriale
Jeter un oeil sur les autres articles : design graphique, actu web et marketing seo
Vos commentaires sur JavaScript, les bonnes pratiques : mise en place
(2) jQuery,optimisation - Réagissez !-
Epsillon
18 novembre 2010 à 10 h 27 min
Articles très intéressant pour partir sur de bonnes bases. Je rajouterais cependant une chose qui n’a pas été évoqué ici : placer ses scripts avant le (/body) pour les charger en dernier et ne pas impacter sur la vitesse d’affichage du reste de la page.
-
Maxime
18 novembre 2010 à 11 h 31 min
Très bonne remarque, je voulais en parler dans l’article mais ça m’est sorti de la tête à la rédaction
Je le rajoute dans l’article, merci de ta participation !
