Bonjour à tous,
Je me demandais si certains avaient une expérience des mécanismes de mise en production de code JavaScript et CSS.
On a longtemps considéré que, le JS et le CSS étant interprétés par le client (navigateur), le code développé était un code «final», et qu'il n'y avait donc pas de séparation entre code de développement et code de production. Cette approche montre des sites de faiblesse pour des projets moyens ou grands, car elle répond mal aux deux besoins suivants:
- optimiser les performances;
- faciliter la maintenance et les évolutions.
Le code optimal pour la maintenance, c'est un code qui est organisé dans des fichiers séparés. On peut déployer des trésors d'ingéniosité, mettre des maousse commentaires, dresser des tables des matières, utiliser du code folding... une feuille de styles de 3000 lignes reste assez difficile à exploiter! C'est aussi un code qui est un minimum documenté lors que nécessaire, par des commentaires par exemple. J'ai déjà écrit une feuille de styles de correctifs pour IE6-7 pour une application web, ça faisait 9 ko, dont 2 de code et 7 de commentaires.
À l'inverse, pour les performances il faut a) des fichiers sans commentaires, b) le moins de fichiers possibles (sauf utilité particulière à séparer certains styles, par exemple si on veut isoler les styles d'une partie du site qui n'est visionnée que par le quart des visiteurs).
Je parle surtout de CSS, mais pour JavaScript c'est globalement le même combat.
La solution, c'est de séparer le code de développement (optimisé pour la maintenance et les évolutions) et le code de production (optimisé pour les performances). Et d'automatiser le passage de l'un à l'autre (moyennant un peu de configuration).
Dans les solutions qui vont bien:
http://developer.yahoo.com/yui/compressor/
http://crisp.tweakblogs.net/blog/1665/a-new-javascript-minifier-jsmin+.html
http://code.google.com/p/minify/
J'aimerais savoir:
- si vous avez connaissance d'autres outils intéressants;
- si vous les utilisez régulièrement;
- qu'est-ce que ça implique en termes de workflow.
Question subsidiaire: si vous livrez une intégration (ou design + intégration) à un client mais n'hébergez pas ou ne déployez pas le site vous-même, est-ce que vous proposer une méthode pour l'optimisation, ou livrez un code optimisé «à la main» (concaténer les fichiers qui vont bien, utiliser JSMin ou YUI Compressor ou autre...) en plus du code de développement, ou laissez le client se débrouiller?
J'essaie de mettre sur pied un workflow «standard» pour O2Sources, mais ce n'est pas évident de s'y retrouver.
Je me demandais si certains avaient une expérience des mécanismes de mise en production de code JavaScript et CSS.
On a longtemps considéré que, le JS et le CSS étant interprétés par le client (navigateur), le code développé était un code «final», et qu'il n'y avait donc pas de séparation entre code de développement et code de production. Cette approche montre des sites de faiblesse pour des projets moyens ou grands, car elle répond mal aux deux besoins suivants:
- optimiser les performances;
- faciliter la maintenance et les évolutions.
Le code optimal pour la maintenance, c'est un code qui est organisé dans des fichiers séparés. On peut déployer des trésors d'ingéniosité, mettre des maousse commentaires, dresser des tables des matières, utiliser du code folding... une feuille de styles de 3000 lignes reste assez difficile à exploiter! C'est aussi un code qui est un minimum documenté lors que nécessaire, par des commentaires par exemple. J'ai déjà écrit une feuille de styles de correctifs pour IE6-7 pour une application web, ça faisait 9 ko, dont 2 de code et 7 de commentaires.
À l'inverse, pour les performances il faut a) des fichiers sans commentaires, b) le moins de fichiers possibles (sauf utilité particulière à séparer certains styles, par exemple si on veut isoler les styles d'une partie du site qui n'est visionnée que par le quart des visiteurs).
Je parle surtout de CSS, mais pour JavaScript c'est globalement le même combat.
La solution, c'est de séparer le code de développement (optimisé pour la maintenance et les évolutions) et le code de production (optimisé pour les performances). Et d'automatiser le passage de l'un à l'autre (moyennant un peu de configuration).
Dans les solutions qui vont bien:
http://developer.yahoo.com/yui/compressor/
http://crisp.tweakblogs.net/blog/1665/a-new-javascript-minifier-jsmin+.html
http://code.google.com/p/minify/
J'aimerais savoir:
- si vous avez connaissance d'autres outils intéressants;
- si vous les utilisez régulièrement;
- qu'est-ce que ça implique en termes de workflow.
Question subsidiaire: si vous livrez une intégration (ou design + intégration) à un client mais n'hébergez pas ou ne déployez pas le site vous-même, est-ce que vous proposer une méthode pour l'optimisation, ou livrez un code optimisé «à la main» (concaténer les fichiers qui vont bien, utiliser JSMin ou YUI Compressor ou autre...) en plus du code de développement, ou laissez le client se débrouiller?
J'essaie de mettre sur pied un workflow «standard» pour O2Sources, mais ce n'est pas évident de s'y retrouver.
. 
