WebDev-FR

Dans mon précédent billet dédié aux moteurs de sélecteurs CSS en JavaScript, je signale que certaines personnes estiment qu’on en voit la fin : les moteurs ont des performances optimales, il est inutile de chercher à les améliorer de ce côté.

C’est un peu ce que s’est dit Eric Meyer dans un billet publié mercredi dernier où il donne de bonnes idées pour les moteurs à venir.

D’un côté, nous avons les CSS 3 dont les fonctionnalités visent à remplacer des particularités que nous réalisons à l’heure actuelle avec des méthodes de Sioux mélangeant allégrement HTML, CSS, JavaScript et images (coin arrondis, effets d’ombre, animation, dégradés, etc). Le point noir, c’est que les navigateurs évoluent lentement et IE6 nous tire vers le bas, bridant nos possibilités et l’utilisation de tout ce potentiel qui commence à être géré par les nouvelles versions des navigateurs, ce qui nous oblige à continuer avec nos méthodes de Sioux qui sont rôdées, certes, mais qui obligent à déporter une partie de la couche design (les CSS) dans les autres, par exemple en ajoutant les div et les span qui vont bien pour réaliser un joli rendu (div et span qui sont parfois injectés dans le DOM par du JavaScript).

De l’autre côté, on a des moteurs de sélecteurs en JavaScript dont le rôle est de permettre l’utilisation des sélecteurs CSS 3 dans du code JavaScript afin de faciliter l’accès aux données dans la page.

Et si ces moteurs JavaScript faisaient un peu plus que ça ? Ils pourraient par exemple se charger de parcourir la feuille de style, repérer les règles CSS contenant des sélecteurs non-gérés par le navigateur et appliquer les propriétés des règles en question sur les bons éléments. Le développeur pourrait ainsi se mettre à utiliser les sélecteurs CSS 3 dans ses feuilles de style, le moteur JS se chargerait d’appliquer les règles non-gérées par le navigateur.

Il est même possible d’aller encore plus loin : pourquoi ces moteurs javascript ne pourraient-ils pas également gérer des propriétés CSS 3 ? Eric mentionne par exemple la possibilité d’appliquer plusieurs images de fond à un objet en CSS 3 :

#monID {
   background:url(top.png) no-repeat top left,
      url(bottom.png) no-repeat bottom left,
      url(middle.png) no-repeat 50% 50%;
}

Le moteur javascript se chargerait de détecter ce genre de règle et de modifier la structure de l’élément (en lui rajoutant des div et des span) pour lui appliquer les fonds multiple.

La même chose pourrait se faire avec d’inombrables propriétés actuellement inutilisables à moins de cibler des navigateurs de dernière génération. La couche présentation se composerait alors d’une sous-couche de style (les feuilles de style) et d’un moteur javascript pour gérer les problèmes de mauvaise gestion de ces feuilles de style par les navigateurs.

Le Javascript non plus pour aider le développeur à faire son interface mais pour aider le navigateur à afficher ce que lui demande le développeur.

Fin août dernier, John Resig a annoncé la création de son tout nouveau moteur de sélecteurs CSS en JavaScript, Sizzle, supposé être intégré dans l’une des prochaines versions de jQuery.

Il y a quelques jours, un autre moteur de sélecteurs a fait son apparition, il s’agit de Peppy, réalisé par James Donaghue.

Côté perf, les deux moteurs sont ce qui se fait de mieux, vous pouvez le constater en lançant le SlickSpeed sur le blog de James Donaghue. Ils sont loin devant les frameworks classiques et ont l’avantage de la légéreté : Sizzle fait 4 ko, Peppy fait 10 ko. Bref idéal pour être intégré n’importe et pour, pourquoi pas, surcharger le moteur de sélecteur de votre framework favori.

A noter toutefois que Peppy a encore quelques soucis avec une mauvaise gestion du cache sous IE : le moteur marche parfaitement à condition que le DOM ne soit jamais modifié, dans le cas contraite peuvent survenir des résultats erronés (c’est d’ailleurs cette mauvaise gestion du cache qui lui permet d’afficher des résultats bien meilleurs que ceux de Sizzle sous IE). Ce problème devrait être réglé au cours du weekend car James Donaghue a annoncé une nouvelle release dans les jours à venir.

En tout cas, ces deux moteurs annoncent le début de la fin de la guerre des perf sur les moteurs de sélecteurs : de nombreuses personnes s’accordent à dire qu’il n’est plus nécessaire d’optimiser la vitesse  et qu’il faut se tourner vers d’autres directions.

A force de lire des blogs en anglais sur le développement web, on finit par se dire que ça pourrait être pas mal de lancer son propre blog pour enrichir un peu plus la communauté française gravitant autour de ce domaine…

A l’heure actuelle, le web bouge très très vite. Déjà du côté des navigateurs avec des acteurs variés et proposant des applications à fort potentiel. Le monopole d’Internet Explorer s’effrite petit à petit et nous sommes dans les balbutiements d’une nouvelle guerre de navigateurs, en particulier depuis que Google a annoncé son entrée sur ce terrain de jeu.

Mais ça bouge aussi du côté du développement, même sur des technos ayant plusieurs années : le lent abandon des vieux navigateurs a obligé les développeurs à conserver une compatibilité avec de vieilles technos et à limiter l’utilisation de versions plus récentes. On utilise toujours les vieilles marmites mais on a appris à les maîtriser, à en connaître la moindre imperfection. On peut le voir par exemple avec l’explosion de l’Ajax il y a quelques années ou encore l’actuelle panel de frameworks JavaScript pour enrichir et faciliter la création d’une interface.

Bref ça bouge beaucoup, ça bouge très vite et il n’est pas forcément évident de suivre tout ça.

Alors voilà, le blog est lancé, pour le meilleur comme pour le pire. Il sera avant tout orienté sur le front-end et plus particulièrement sur le JavaScript et les CSS, deux technos qui me font frétiller les neurones au quotidien.

J’espère que les articles et les tutoriaux vous plairont et que vous pourrez trouver ici des informations qui vous seront utile dans vos réalisations de tous les jours.

Loïc