Surlignage

Réflexions

Du cambouis sous le capot

J’ai toujours conçu une certaine méfiance à l’égard des frameworks logiciels. Ceux qui revendiquent le titre de « web 2.0 » n’échappent pas à la règle : ils manquent de souplesse et, s’ils permettent de réduire le temps de conception (quoique cela reste à prouver), ils imposent en contrepartie de nombreuses contraintes. Les applications basées sur ces architectures logicielles sont généralement lourdes et peu performantes. Souvent le code généré n’est pas optimisé et n’utilise pas les balises HTML adéquates.

J’ai récemment été amené à travailler sur le graphisme et l’ergonomie d’un logiciel basé sur le dōjō toolkit. Outre des temps de chargement et d’initialisation assez conséquents (qui peuvent paraît-il être un peu réduits en fonction des réglages choisis), le code HTML généré est déplorable. J’ai dû me pencher sur ce code afin de mettre au point mes feuilles de style, et plus d’une fois je me suis écrié « quelle horreur ! »

Petite illustration : l’application utilise des onglets auxquels j’ai appliqué la technique bien connue des sliding doors, décrite en détail dans deux articles d’A List Apart¹. Pour créer ce type d’onglet, le code HTML nécessaire et suffisant est le suivant :

1. <div id=”tabs”>
2. <ul>
3. <li><a href=”…”>Accueil</a></li>
4. <li class=”current”><a href=”…”>Informations</a></li>
5. <li><a href=”…”>Produits</a></li>
6. </ul>
7. </div>

Voici maintenant le code généré par dōjō pour obtenir les mêmes onglets :

1. <div style=”width: 100%; height: 100%;” class=”dojoTabContainer dojoLayoutContainer”>
2. <div style=”left: 0px; top: 0px; bottom: auto; right: auto; width: 595px;” class=”dojoTabLabels-top dojoAlignTop” role=”wairole:tablist” wairole=”tablist” dojoattachevent=”onKey”>
3. <div dojoinsertionindex=”0″ class=”dojoTab current” dojoattachevent=”onClick”>
4. <div dojoattachpoint=”innerDiv”>
5. <span style=”-moz-user-select: none;” role=”wairole:tab” dojoattachpoint=”titleNode” tabindex=”0″ wairole=”tab”>Accueil</span>
6. <span dojoattachpoint=”closeButtonNode” class=”close closeImage” style=”display: none;” dojoattachevent=”onMouseOver:onCloseButtonMouseOver; onMouseOut:onCloseButtonMouseOut; onClick:onCloseButtonClick”></span>
7. </div>
8. </div>
9. <div dojoinsertionindex=”1″ class=”dojoTab” dojoattachevent=”onClick”>
10. <div dojoattachpoint=”innerDiv”>
11. <span style=”-moz-user-select: none;” role=”wairole:tab” dojoattachpoint=”titleNode” tabindex=”-1″ wairole=”tab”>Informations</span>
12. <span dojoattachpoint=”closeButtonNode” class=”close closeImage” style=”display: none;” dojoattachevent=”onMouseOver:onCloseButtonMouseOver; onMouseOut:onCloseButtonMouseOut; onClick:onCloseButtonClick”></span>
13. </div>
14. </div>
15. <div dojoinsertionindex=”2″ class=”dojoTab” dojoattachevent=”onClick”>
16. <div dojoattachpoint=”innerDiv”>
17. <span style=”-moz-user-select: none;” role=”wairole:tab” dojoattachpoint=”titleNode” tabindex=”-2″ wairole=”tab”>Produits</span>
18. <span dojoattachpoint=”closeButtonNode” class=”close closeImage” style=”display: none;” dojoattachevent=”onMouseOver:onCloseButtonMouseOver; onMouseOut:onCloseButtonMouseOut; onClick:onCloseButtonClick”></span>
19. </div>
20. </div>
21. </div>
22. </div>

On constate le recours systématique à des balises sans signification (<div> et <span>), la présence de nombreux attributs non standards et de styles imbriqués. Le code généré par dōjō est non seulement incroyablement lourd, mais il n’est pas proprement structuré, ne respecte pas les standards HTML et n’établit pas de séparation claire entre le contenu et sa présentation.

Ce n’est qu’un cas parmi d’autres et mon propos n’est pas de dénigrer dōjō en particulier. Cet exemple est simplement destiné à mettre en évidence les défauts inhérents à ce type de frameworks, qui produisent certes des applications rutilantes estampillées « web 2.0 », mais qui font frémir d’horreur si l’on soulève le capot !

Mis en ligne le 02/05/2007 | Poster un commentaire