Mot-clé - standards

Fil des billets

mardi 3 juin 2008

Nouveautés Safari 3.1 : Selectors API

Présentation

Comme promis, on va parler de quelque chose de bien plus intéressant pour accélérer vos applications web. Une attente de longue date, la fameuse et célèbre Selectors API ! C'est l'équivalent de $$ en Prototype et Mootools, $ en jQuery, YAHOO.util.Selector.query en YUI et... document.querySelectorAll pour base2. [1] Pour ceux qui connaissent, cela permet donc de sélectionner un liste d'éléments qui correspondent à un sélecteur CSS.

L'exemple du billet précédent devient donc document.querySelectorAll('.post'). Une différence à noter entre ces deux méthodes : querySelectorAll retourne une liste statique, un tableau en quelque sorte.

Regardons un peu les performances :

var start = new Date(); for (var i = 0; i < 1000; i++) var list =document.querySelectorAll('.post'); new Date() - start
104
var start = new Date(); for (var i = 0; i < 1000; i++) var list =document.getElementsByClassName('post'); new Date() - start
2

C'est sans appel, pour un sélecteur simple, il vaut mieux utiliser une méthode spécialisée. J'ai fait quelques autres tests. De manière générale, si vous voulez traversez simplement le DOM, tenez-vous en aux autres solutions. Cette méthode sera peut-être optimisée plus tard, ce n'est que la première implémentation.

Évidemment, le navigateur ne reconnaîtra que les sélecteurs qu'il connaît. Pas de problème avec Safari 3.1 puisqu'il connaît tous les sélecteurs disponibles à ce jour (on en reparlera plus tard, peut-être). Par contre, avec IE8, ce sera plus compliqué. Oui oui, IE8 implémentera cette API ! Et comme cette API a été bien conçue, le navigateur est censé renvoyer une exception lorsqu'il ne connaît pas un sélecteur. Le monde est presque parfait !

Les librairies

  • Prototype : dans la version de dev (un appel à un div vide puis le vrai appel)
  • YUI : rien
  • mootools : rien
  • base2 : Oui, en dev.
  • jQuery : rien.

Le piège.

Le comportement de cette API est pour l'instant trompeuse. Lorsque l'on utilise cette méthode sur un élément, elle va chercher tous les éléments du document qui correspondent puis ne retourne que ceux qui sont des enfants de l'élément. Le comportement des librairies (et qui me semble plus naturel) est d'appliquer le sélecteur à partir de l'élément en question. John Resig en parle bien mieux que moi

Les petits plus

Que peut-on faire de marrant avec cette API ? On peut par exemple récupérer tous les liens présents sur la page qu'a visité l'utilisateur. Un simple document.querySelectorAll(':visited') fera l'affaire.

On peut aussi récupérer la liste de tous les éléments qui sont actuellement survolés par l'utilisateur. document.querySelectorAll(':hover') vous donnera satisfaction.

Notes

[1] Oui, cette librairie est tellement bien qu'il n'y a pas besoin d'apprendre autre chose que les standards

mercredi 28 mai 2008

Google Ajax Librairies : une bonne idée ?

Google vient donc d'annoncer la possibilité de servir 5 librairies javascripts depuis ses serveurs.

L’idée d’avoir un dépôt central est plutôt intéressante. Pour avoir un cache relativement partagé entre les sites, être sûr de la configuration HTTP au poil, bénéficier du CDN de Google. Après, il faut aussi voir que l'accès à votre site sera conditionné par la disponibilité de ses serveurs. Mais il semble que ce soit la tendance... (Amazon S3)

Par contre, Google propose de s'occuper de charger la dernière version à travers son API Javascript. C’est une très très mauvaise idée que d‘avoir la version la plus récente de la libraire. Il faut toujours tester ses applis avant de mettre la nouvelle version d’une librairie en production. À la rigueur pour les versions mineures, et encore.

Après, cela va certainement défavoriser les librairies non sélectionnées. Des librairies comme Base2, Mochikit ou YUI ne sont pas listée par exemple.

Enfin, Google a annoncé vouloir travailler avec les éditeurs de navigateurs pour intégrer certaines librairies directement dans le navigateur. Si jamais cela se réalise, ça va être marrant pour les versions et encore plus discriminant pour les librairies non incluses. Les développeurs choisiraient non pas la librarie la plus légère ou la plus performante mais la plus souvent intégrée dans les navigateurs.

Google ferait mieux de travailler avec les éditeurs pour améliorer le support des standards et l’implémentation des prochains standards. Car un code en C, C++ ou autre sera toujours plus performant que sa version Javascript.

En résumé : idée peut-être intéressante dans l’état actuel d'implémentation des standards mais attention à la discrimination et surtout, continuer à améliorer le support des standards.

jeudi 10 avril 2008

Nouveautés Safari 3.1 : getElementsByClassName

Allez, on continue dans Webkit (parce que ça me botte en ce moment). Je ne suis pas tombé sur beaucoup d'articles en français résumant les nouveautés de Safari 3.1. Et comme on n'est jamais mieux servi que par soi-même...

Commençons par getElementsByClassName. Kékecé ? À l'instar des getElementById, getElementsByTagName, getElementsByName c'est une méthode pour récupérer des éléments du DOM selon un critère, en l'occurence la ou les classes. Par exemple, sur la page d'accueil de ce blog, document.getElementsByClassName('post').length renvoie 20 mais document.getElementsByClassName('post odd').length renvoie 10. Comme toutes ces consœurs, cette méthode marche aussi à partir d'un élément du DOM, restreignant ainsi les résultats.

Il faut faire attention en manipulant la liste renvoyée. Elle est "live", c'est-à-dire que tout changement dans le DOM la modifie (comme getElementsByTagName). Exemple:

var list = document.getElementsByClassName('post');
for (var i=0; i < list.length; i++)
{
  list[i].parentNode.removeChild(list[i]);
  alert(list.length);
}

En exécutant cette fonction sur la page d'accueil, on verra disparaître un billet sur deux et la NodeList diminuera au fur et à mesure. Attention donc en manipulant les résultats. Pour être sûr de ce qui va se passer, on peut recopier le tout dans un tableau classique, mais attention aux performances.

Cette méthode est actuellement supportée par Safari 3.1 (of course) et bientôt Firefox 3 et Opera 9.5. Elle fait partie du brouillon pour HTML 5.

Vous voyez évidemment à quoi ça sert ? Ça accélère considérablement tous les accès qu'on peut faire, si on l'utilise. Et comme de plus en plus de gens utilisent des librairies pour ne pas s'embêter avec les compatibilités entre navigateurs, on va vérifier qu'on bénéficie bien de cette amélioration quand disponible. On va surtout étudier les méthodes du style $ ou $$, qui permettent de sélectionner des éléments à partir d'un sélecteur CSS

Bilan : Ah bah c'est pas génial. Si j'étais mesquin, je dirais que c'est une raison de plus pour ne pas utiliser de librairies Javascript. À leur décharge, ce n'est pas vraiment nécessaire puisqu'elles utilisent XPath lorsque c'est disponible et c'est disponible sur tous les navigateurs ayant cette méthode. Pour jQuery, c'est regrettable, puisqu'elle n'a pas d'implémentation XPath. Bien évidemment, XPath est plus rapide que DOM, mais tout de même plus lent que getElementsByClassName.

Mais finalement, on verra bientôt qu'il y a d'autres méthodes pour nous aider.

vendredi 25 janvier 2008

Please, don't hurt the web, des solutions

Le web continue à se remuer après l'annonce de Microsoft. Anne van Kesteren explique d'ailleurs très clairement le problème que ces modes causent. Certains prépare des solutions de boycott, d'autres cherchent une solution alternative pour coller aux besoins de l'équipe IE tout en favorisant les standards. La solution de David Baron est ma préférée. Comme je le disais, la principale inquiétude de Microsoft tourne autour des Intranet. Laissons donc le reste du web bénéficier d'un vrai rendu standard. Les administrateurs des réseaux d'entreprises choisiraient quels sites doivent être vus avec un autre moteur que celui de base. Ce n'est pas aussi bien que des modes de rendus très proches qui évoluent ensemble mais on ne peut demander à Microsoft de recommencer le travail sur IE8 depuis le début.

Je suis d'ailleurs tombé sur le meilleur résumé possible de toutes ces discussions.

jeudi 24 janvier 2008

Please, don't hurt the web

IE-LockEt bien il fallait bien ça pour sortir ce blog de sa torpeur : Compatibility and IE8. Je ne ferais pas l'inventaire de toutes les réactions (on peut trouver assez de liens sur le QA Blog du W3C, mais ça fuse de partout. Que ce soit chez Mozilla, Webkit, Opera ou chez les développeurs web. Il y a bien quelques satisfaits tout de même.

On nous explique que ce nouveau mode de choix du rendu a été inventé par pragmatisme. Lorsque l'on était en mode "standard", on utilisait des hacks pour corriger les bugs de IE6. À l'arrivée de IE7, cette technique ne fonctionne plus puisque les hacks de contournement ont été corrigés mais pas les bugs en question. L'équipe de IE s'était dit que les améliorations n'étant disponibles qu'en mode "standard", le web ne serait pas cassé. C'est là que vient le pragmatisme : "faut pas refaire pareil !".

Les pages sont conçues à un moment précis, pour une version précise du moteur de chaque navigateur. Et bien inventons un moyen de fixer ces pages définitivement. Ça part donc sur une bonne intention, pleine de bon sens.

Là où le bon sens déraille, c'est que cela implique que chaque version d'IE devra intégrer toutes les versions précédentes jusqu'à IE6. Est-ce pragmatique, réalisable ? Bien sûr que non. Il y aura toujours des différences de rendu au fur et à mesure, pour s'adapter à une nouvelle version du système d'exploitation, des changements matériels, etc.

Bon, admettons que ce soit possible (oui, faîtes un effort). Je mets donc un tag pour bloquer à IE8. Mais quel IE8 ? Celui de la sortie ou celui un an plus tard avec les corrections de sécurité ? Ça pose encore plein de problèmes comme les frames et iframes mélangeant des pages ne souhaitant pas le même mode de rendu. Ou encore la question des copier/coller pour "widget".

Ce principe de choix du moteur rappelle aussi les très belles heures du web "Conçu pour Internet Explorer en 800x600". Ressortez tous vos gifs animés !

Évidemment, j'espère que Microsoft reviendra sur sa décision. On voit clairement que cette décision a été prise pour les Intranet qui restent encore la quasi chasse gardée de Microsoft vu l'inertie (tout à fait naturelle) des entreprises. Cette décision n'est pas néfaste pour les pages déjà existantes mais pour les prochaines à venir. Le slogan "Don't break the web" regarde en arrière, jamais en avant.

Au fait, comment fait IE8 pour passer le test Acid2 ?

PS : Merci à Sunny pour son logo

Update : Des solutions ?