Cela fait quelques temps (voir années) que je me suis lancé dans un framework Php maison. Allons tout de suite au pourquoi : je ne trouvais pas de framework simple, rapide, léger et utilisable sans problème dans un environnement Windows ou Linux (Apache pour les 2 quand même, faut pas abuser).
Je me suis donc mis au développement de ce framework en utilisant un modèle MVC, une programmation orientée objets et la possibilité de faire du multi-langues sans avoir à tout réécrire.
Comme je le voulais rapide et léger, j’ai fait attention aux fichiers CSS et JS.
Dans la version actuelle de mon framework, les fichiers CSS passent par un préprocesseurs, sont minifiés et concaténés en un seul fichier. Idem pour les fichiers JavaScript.
Préprocesseur CSS / JS
Pour le préprocesseur, j’avais, encore, besoin de quelque chose de bien précis. Je voulais pouvoir utiliser des variables Php, mais également des constantes et pouvoir faire des opérations mathématiques simples. Je voulais également des fonctionnalités avancées comme la possibilité de définir des coins arrondis en une seule ligne (sans avoir à préciser le code pour chaque navigateur).
Par exemple, j’utilise très souvent un système de grille pour mes pages. Je définie les dimensions des éléments de base de ma grille en Php. Je voulais alors pouvoir écrire quelque chose dans le style :
.bloc3x2 {
width:{#=LARGEUR * 3#};
height:{#=HAUTEUR * 2#};
}
Et définir LARGEUR en constante dans mon Php :
define(‘LARGEUR’, 170);
Le préprocesseur s’occupant ensuite de compiler tout ça.
En fait, le préprocesseur est vraiment très simple. Il ne fait que remplacer les variables dans les fichiers CSS. J’utilise pour ça une expression régulière :
$output = preg_match_all(‘/{#(.*)#}/Ui’, $this->css, $matches);
Et pour chaque valeurs trouvées, je vérifie qu’il s’agit soit d’une constante, soit d’une évaluation à faire, soit d’une fonction toute prête comme par exemple {#OPACITY:50#} qui sera alors transformée en code CSS correspondant pour mettre une opacité à 50%.
Pour les évaluations, je passe par une version sécurisée de la fonction Php « eval(); ». Ça laisse une grande marge de manoeuvre.
La minification est opérée par l’excellent YUI Compressor. Je n’ai pas trouvé mieux. La minification est réalisée sur le serveur directement. Elle n’est réalisée qu’une seul fois, un cache étant utilisé une fois le fichier final obtenu (préprocesseur / minification / concaténation).
Enfin, la concaténation permet de n’avoir qu’un seul fichier (Voir l’article sur la web performance liée aux fichiers CSS et JavaScript). Ce fichier est alors mis en cache histoire de ne pas avoir à le recalculer à chaque fois.
Pour le cache, j’utilise 2 astuces permettant de conserver ou non ce cache :
- le nom de fichier est la concaténation des noms de fichiers originaux, le tout passé en MD5.
- J’ajoute à ce nom de fichier un numéro de version (que j’indique dans la configuration du site) et qui permet de changer rapidement de version globale.
J’ai donc, au final, un nom de fichier qui ressemble à ça : 2ad6caea9c033c3b1ba7e7ad9d3a29ce-11.css
J’opère le même principe pour mes fichiers JS. Ce qui permet à mon framework maison de n’avoir qu’un seul fichier CSS et un seul fichier JS à charger à chaque page.
Tout cela me facilite mon travail de développeur tout en permettant d’obtenir de bonnes performances.
Et vous ? Vous avez des astuces aussi ?
Commentaires récents