Je commence par une réponse fournie par un développeur à un autre et qui explique très bien le pourquoi du pattern utilisé dans la construction de jQuery. Ce pattern qui permet le chaînage qui a fait sa réputation.

Pour rappel, la grande majorité des méthodes de jQuery renvoie l’objet jQuery lui-même. Tout ça notamment pour des raisons de performance. Au lieu de devoir reparser le DOM à chaque manipulation, vous avez déjà la référence renvoyée par le premier sélecteur autant la mettre en cache et quitte à appliquer plusieurs traitements, autant tout mettre sur une seule chaîne d’instructions plutôt que de créer de nouveaux branchements à chaque nouvelle ligne d’instructions. L’explication en anglais est plus complète et pertinente mais dans l’idée, c’est ça.

Un nouveau framework de widgets graphiques a également vu le jour. Nommé Chico UI, je n’en suis pas un grand fan mais je dois admettre qu’ils ont déjà un joli paquets de widgets. A tester.

Je suis tombé sur un cours pour débutant sur jQuery dans un .doc que vous pouvez télécharger légalement et gratuitement ici. C’est pas le meilleurs cours que j’ai lu mais pourquoi pas, c’est toujours une façon de démarrer.

Et voilà c’es tout pour cette semaine ! On se retrouve bientôt, j’ai une critique littéraire au planning de la semaine. Il y a du John Resig et du JavaScript dedans

Il y a environ trois mois, j’ai acheté un four combiné d’une marque classique d’électroménager. La partie qui nous intéresse est que je l’ai acheté chez Darty. Le modèle du four avait l’air bien, deux foyers de ma famille le possédent déjà et en sont satisfaits. Rien à craindre donc à priori.

Pas de bol, le four fait un bruit de motoculteur, peu importe le mode de cuisson. Etant donné que ça fait peut être bien 20 ans que j’entends parler du contrat de confiance, le moment est venu de l’éprouver.

Un premier technicien vient, fait quelques essais rapides et déclare que cela vient du moteur plateau. Je pensais plutôt au ventilateur mais laissons faire les professionnels. A noter que Darty m’avait assuré que le technicien m’appellerait une demie heure avant son passage, ce qui n’a pas été fait. Forcément, j’étais à 5 minutes à pied de chez moi à son arrivée et le mec a quand même trouvé le moyen de râler parce que je ne suis pas chez moi à ce moment là. Pour l’anecdote, en plus, il n’attendait pas devant le bon immeuble.

Une semaine après, un second technicien passe, ils avaient reçu la pièce à changer. Il fait son office, ne teste même pas et s’en va. Toujours pas d’appel pour prévenir une demie-heure à l’avance.

Nous savons tous, développeurs, ce que ça donne quand on ne teste pas : ça ne marche que rarement ou que partiellement. Et là c’est le cas. Le four fait moins de bruit mais n’est pas réparé.

Le second technicien revient, teste enfin et constate le dysfonctionnement. Une semaine de perdue. Puis diagnostique que cela viendrait du magnétron, je continue de signaler que je pense que ça vient du ventilateur, ce qui ne fait pas plus réagir. A savoir que le magnétron est la pièce qui fait chauffer les aliments dans le four quand il est en mode micro-ondes. Le problème est pourtant aussi présent en mode chaleur pulsée. Ce qui du coup est une preuve évidente d’erreur du technicien mais bon… Celui-ci est d’ailleurs très insistant à propos de l’évaluation que j’étais censé faire la semaine précédente et suite à cette intervention. 70% du temps de parole a été monopolisé par ses soins sur ce sujet. Un peu lourd.

La semaine d’après, rendez-vous pour le changement du magnétron, j’attends tout du long de la période de rendez vous la venue du technicien censé venir remplacer cette seconde pièce. Personne. Le mec est arrivé une heure et demie après l’heure au plus tard, ne m’a pas prévenu de son retard et m’engueule parce que forcément je suis à l’autre bout de Paris, ayant d’autres obligations personnelles. C’est un poil déplacé mais je ne me fais déjà plus d’illusion.

Lundi d’après, prise de tête avec une opératrice pour ravoir un rendez vous. Le samedi qui suit un troisième technicien vient, regarde le four, le teste, se marre et parle explicitement de l’incompétence de ses collègues. Il confirme que ça vient du ventilateur, me le prouve en démontant la pièce dont le rotor est effectivement désaxé. Il ne me parle même pas de son évaluation personnelle mais me parle du compte-rendu d’intervention que je recevrai rapidement. Enfin quelqu’un de compétent et professionnel !

Une semaine après, c’est à dire le weekend dernier, le second technicien revient pour changer le ventilateur. Précisons que j’avais demandé à Darty de ne plus m’envoyer celui-ci. Je me suis moi même chargé des tests qu’il a encore complètement snobé préférant encore une fois me parler de l’éventuelle évaluation que je ferai de lui. Au passage, il s’offre même le luxe d’une remarque sexiste à ma compagne. Etant lui aussi d’une minorité dite « visible » régulièrement critiquée à tort et sans fondement, je trouve ça encore plus déplacé.

Le four fonctionne enfin. J’ai payé quatre cents euros plus je ne sais combien de grasses matinées gâchées, d’heures perdues pour une évidence signalée dès le début de l’affaire. Evidemment, en prime, pendant toute cette période, je ne disposais donc plus ni d’un four, ni d’un micro-ondes fonctionnels, ce qui a forcément quelque peu réduit les possibilités de diversifier ma cuisine.

Deux techniciens incompétents sur trois, aucun appel pour prévenir de la venue, un technicien omnibulé par son évaluation personnelle plus que par son métier, sexiste au passage. Et le comble de l’histoire, je vois le siège social du fabricant de ce four depuis la fenêtre de mon bureau.

Darty, le contrat de confiance. Peut être, mais pas avec eux.

Et pour ceux qui se demandent pourquoi je n’ai pas fait remplacer le matériel : j’ai systématiquement demandé le remplacement. Que ce soit avec les techniciens et les télé-opérateurs. Ils sont très forts pour éluder les questions …

Maintenant je vais donc entamer les procédures possibles pour obtenir un dédommagement. Payer aussi cher pour obtenir ça, c’est inadmissible.

La milestone 8 de jQuery UI 1.9 est disponible.

Vous allez me dire que ce n’est qu’une milestone, ouep, vous avez raison, mais c’est toujours ça. L’annonce a été faite par Scott González. On y apprend que l’élément Position a été complètement réécrit et que cette milestone est justement l’occasion de tester celui-ci.

Les widgets Autocomplete et Tooltip ont été modifiés pour offrir une compatibilité ARIA. En gros, ARIA, c’est une méthodologie, un standard proposé par le W3C pour améliorer l’accessibilité aux applications riches pour des personnes souffrant de divers handicaps quels qu’ils soient. J’avoue ne pas en savoir plus sur la question mais c’est bien que jQuery UI respecte ceci.

Comme d’habitude, vous êtes invités à tester. Vous pouvez charger jQuery UI ici :

http://github.com/jquery/jquery-ui/tree/1.9.0m8

Il est également possible de tester le prochain widget, nommé « Popup », de jQuery Mobile. Ça se passe ici.

J’ai noté pas mal d’articles sponsorisés à propos d’une bibliothèque nommé Infragistics jQuery Controls. Même si ce sont des billets sponsorisés, j’en ai vu passer suffisamment pour me dire que si aucun n’est désagréable envers eux, même en douce, c’est que ça vaut peut être le coup d’oeil. Si quelqu’un a un retour d’expérience, je suis preneur.

Le site Picolozine nous explique comment utiliser le SDK JavaScript de Facebook sur jQuery Mobile. Il y a un petit besoin d’optimisation, mais dans l’idée, c’est déjà pas mal que ce soit expliqué.

Petit troll de fin : j’ai eu la peau de jQuery.ish ! Un développeur s’était mis en tête de créer une énième version allégée de jQuery en supprimant des éléments. Après discussion assez courte avec lui et surtout avec la remontée de ce billet que j’ai écrit il y a quelques mois sur le côté ridicule de faire ça, le projet est abandonné. Espérons qu’il proposera plutôt une aide à l’équipe de jQuery ou rejoindra les développeurs utilisant les CDN.

Alors tout d’abord, après quelques essais, il s’avère que le hangeul, l’alphabet coréen, est assez facile à transposer sur notre alphabet latin. Il y a une quarantaine de caractères à retenir. Pour le coup, c’est le point un peu galère. Parce que non seulement il y a plus de caractères mais en plus ce ne sont pas les mêmes. Avec en prime, de devoir apprendre des symboles différents pour les représenter. Certaines de ces lettres seraient des syllabes pour nous (ya, yô, yo, yu, …) et certaines de nos consonnes ne sont presque qu’une seule pour le coréen. Par exemple le l et le r sont une seule et même lettre en hangeul. On ne fait la distinction que par leur position dans la syllabe.

Ceci dit pour se simplifier les choses, il y a 24 caractères de base (14 consonnes, 10 voyelles) plus 5 consonnes doubles et 11 voyelles composées.

Les syllabes sont en fait des caractères regroupées dans une structure très logique. Chaque syllabe est composée « normalement » d’une consonne, puis d’une voyelle et possiblement d’une autre consonne. La syllabe se lit donc de gauche à droite puis de haut en bas. Si elle ne commence pas par une consonne, vous devrez mettre un « rond » à la place (désolé, j’ai pas trouvé le nom donné à cette figure de style). Ça simplifie beaucoup la lecture quand on n’a pas cet alphabet dans notre langue maternelle puisqu’au moins, on sait de suite si un caractère est une consonne ou une voyelle.

Et comme toutes nos langues latines et anglo-saxonnes, le texte se lit de gauche à droite et de haut en bas. Un beau frein en moins dans l’apprentissage

Sur ce premier billet, vous l’aurez compris, l’objectif est grand, mais la langue est construite de façon très logique. Ça devrait aider. Je suis plus qu’optimiste et enthousiaste à cette idée

GMAP3

Priorité à l’ancien, le plus éprouvé et surtout au premier sur le terrain. GMAP3 est édité par Jean-Baptiste Demonte et aidé par plus d’un désormais, dont gtraxx fidèle lecteur de ce blog. La version 5 est disponible depuis peu.

Je crois qu’il n’y a plus besoin de présenter ce plugin, vous trouverez à peu près tout ce que pourriez vouloir faire avec Google Maps. Si vous voulez absolument utilisez ce dernier, je ne peux que vous le conseiller.

La documentation est complète, les exemples ne manquent pas et pas mal de monde s’en sert, suffisamment en tout cas pour trouver facilement d’autres exemples d’utilisation « en prod ».

Ceci dit, attention, l’API d’utilisation de Google Maps est payante si vous avez des services payants sur votre site et la licence est assez chère. Pour en savoir plus, vous pouvez consulter la page dédiée aux entreprises et il existe une limitation d’usage pour les comptes gratuits.

BingMap plugin for jQuery

Alors j’avoue, ce n’est pas uniquement parce qu’il est sympa que je parle de son plugin. Aurélien est venu demander conseils et relecture, et pas qu’auprès de moi. Je trouve sa démarche respectable et très professionnelle. Surtout que la qualité est au rendez-vous.

L’avantage de Bing Maps sur GMAP3 ? Microsoft et non Google. Bête à dire mais nombreux sont ceux qui n’utilisent que les services de Microsoft ou qui ne souhaitent pas tout faire passer par Google.

Autre avantage ? Vous êtes gourmands mais je peux encore : l’API de Bing Maps n’est pas encore limitée. Officiellement, il n’existe pas de limitation à son usage que vous soyez un particulier, une entreprise, que vous proposiez du tout gratis ou quelque chose de payant. Cependant, la récente mise sous tarification de l’usage de l’API de recherche peut laisser croire que cela risque d’arriver.

BingMap plugin for jQuery exploite assez simplement l’API de Bing Maps, propose les éléments clés de celle-ci et est aussi très bien construite. Suite à nos discussions sur le sujet, Aurélien a su construire un plugin respectant les conventions proposées par l’équipe de jQuery. Je vous invite à jeter un oeil au moins, à l’utiliser si vous vouliez vous simplifier Bing Maps.

osmLeafLet.jQuery

Évidement, je ne pouvais pas louper mon propre plugin. Vous pouvez retrouver toutes les infos sur le site dédié.

Je vous en avais déjà parlé et je ne ferai donc que compléter par quelques infos oubliées. Tout d’abord Open Street Map ne changera jamais de statut, c’est à dire qu’il sera toujours gratuit pour tous types de service. J’utilise l’API de Leaflet qui à priori ne changera jamais de licence non plus.

J’ai respecté les mêmes conventions de développement qu’Aurélien, dans l’idée de garantir une API la plus simple possible en conservant la philosophie de chaînage de jQuery. Pour le moment, celui-ci est encore un peu limité. Vous ne pouvez qu’afficher une carte à dimensions choisies, mettre des marqueurs, une popup, gérer quelques évènements de base d’action sur la carte mais je ne souhaite presque pas l’étendre plus.

Pourquoi ? Parce que tout surplus est inutile à la grande majorité des utilisations. Par contre je développerai quelques plugins complémentaires pour les besoins spécifiques. Tout le monde n’a pas besoin de pouvoir tracer des formes géométriques, je le proposerai mais séparément. Ne me reste donc qu’à proposer la géolocalisation de vos visiteurs sur la carte affichée et vous disposerez d’un plugin définitif en version stable.

Conclusion

J’ai essayé de rester plus ou moins impartial ou en tout cas « équitable ». Si je ne me trompe pas, à peut-être une ligne près, chaque plugin a disposé d’autant de place que les 2 autres, les questions des coûts, licences, sites d’exemples et fonctionnalités ont toutes été abordées. Chaque plugin a au moins un avantage et un défaut explicitement cité. J’ai même essayé de respecter cette équité dans les tags de cet article.

A vous de faire vos choix donc. Bonne carte à tous ! Et vive la libre concurrence

Heureusement Jonathan Cutrell sauve les meubles en expliquant les 14 raisons pour lesquelles personne n’utilise votre plugin jQuery. Je précise que son article est très bien écrit et que je suis plutôt d’accord en tout point avec lui. Conseils à suivre donc

2 choses côté officiel :

• L’équipe a besoin de vos retours sur ce que vous pensez des changements potentiels qu’ils pourraient mettre en place sur les forums officiels ;
• Vous êtes invités à tester le composant Popup qui devrait être intégrer dans jQuery Mobile 1.2.

C’est tout pour cette semaine. A plus tard !

Qui, sincèrement, n’a jamais été tenté d’écrire ce genre de code ?

var monLien = "<a href=\"" + lien + "\" title=\"" + description + "\">" + titre + "</a>";

Voyons ensemble les raisons pour lesquelles il ne faut pas faire ça. En introduction, je vous mets le code qu’il aurait fallu écrire pour que ce soit « propre ».

var monLien = document.createElement("a");
monLien.href = lien;
monLien.title = description;
monLien.textContent = titre;

1/ Maintenabilité

C’est bête mais il est bien plus difficile de déboguer une chaîne qu’une série d’instructions. Dans le premier cas vous savez que ça plante mais où? Quel est le réel générateur de la panne?

Chaque variable introduite dans votre élément DOM via le second exemple est géré par JS, vous n’avez que l’affectation à faire. Souple et pas moins efficace. Et vous savez aisément quelle est l’instruction qui ne fonctionne pas.

2/ Lisibilité

Le code d’exemple est simpliste là. Même si j’ai pas été très cool avec les guillemets. Mais voyons un code quelque peu plus « lourd ».

var select = "<select name=\""+name+"\">";
for(var i = 0; i < mesOptions.length; i++) {
    select += "<option value=\""+mesOptions[i]["valeur"]+"\""+(mesOptions[i]["selected"]?" selected":"")+">"+mesOptions[i]["label"]+"</option>";
}
select += "</select>";

Et sa version DOM :

var select = document.createElement("select");
select.name = nom;
for(var i = 0; i < mesOptions.length; i++) {
    var option = document.createElement("option");
    option.value = mesOptions[i]["valeur"];
    option.textContent = mesOptions[i]["label"];
    option.selected = mesOptions[i]["selected"];
    select.options.add(option);
    delete option;
}

Franchement, c’est pas plus lisible ça?

3/ Performance

J’ai écrit un JSperf il y a quelques semaines que vous avez été nombreux à exécuter et je vous en remercie. Ce test montre clairement que la création par instructions DOM est bien plus rapide que la création par concaténation. Seule la dernière version de Firefox en beta montre une tendance inverse et encore la différence est tellement minimale qu’elle est tout à fait négligeable comparée à d’autres navigateurs actuels qui ont un facteur 8 parfois (cas de Safari).

4/ Testabilité

Dans le cas de la concaténation, vous ne pouvez vérifier votre élément qu’à la fin de la construction de la chaîne. Soit parce que vous avez tout foutu sur une ligne, soit parce que vous ne souhaitez raisonnablement pas vérifier une balise pas finie.

Avec la création via instructions DOM c’est que dès le début, toute votre balise existe et vous vous pouvez déboguer/tester pas à pas votre élément. Pratique et ultime encore une fois.

Conclusion

Comme vous l’aurez compris la façon classique d’écrire des éléments DOM via concaténation de chaînes n’est en rien une bonne pratique. Arrêtez de le faire, n’encouragez plus cette horreur!

Remerciements

Pour le coup, je tiens à remercier toutes celles e tous ceux qui ont déroulés le test, sans vous, il aurait manqué un point clé à cet article. Je ne peux malheureusement nommer que ceux qui m’ont dit l’avoir fait tourner, ne pouvant nommer des visiteurs anonymes. Donc je remercie : l’équipe technique de ma boite, @foxmask, @Chabbinou, @kogratte, @crash__ et @iron_ass. Désolé pour ceux que j’oublie.

Je vous propose donc de faire un tour rapide de ce qui existe pour générer des graphiques avec JavaScript. N’hésitez surtout pas à partager à propos de ce que vous connaissez/utilisez, comme d’hab.

Raphaël

Licence MIT, à peu près tous les types de graphiques.

http://raphaeljs.com/

Morris.js

Licence BSD simplifiée, réservée aux courbes. Utilise Raphaël.

http://oesmith.github.com/morris.js/

gRaphaël

Basé aussi sur Rapaël, un peu moins riche aussi, sous licence MIT.

http://g.raphaeljs.com/

Kartograph

Création de cartes interactives, sous licence GPL.

http://kartograph.org/

D3.js

Licence BSD, peut-être la bibliothèque de graphiques la plus riche.

http://d3js.org/

Sigma.js

Sous licence MIT, j’aime bien le style de ses nuages de points. Sigma ne fait que ça mais le fait plutôt bien.

http://sigmajs.org/

ExtJS

On ne présente plus ExtJS je crois, sous multiple licences, selon votre usage. Très complet, très stable mais du coup aussi : très lourd.

http://extjs.com

HighCharts

Dans mes préférés, licences variables selon vos usages. Très complet et très bon style par défaut.

http://www.highcharts.com/

JSXGraph

Là on tape clairement dans le monde des maths. Plusieurs centaines d’exemples. Sous licence LGPL. Plus maintenue je crois.

http://jsxgraph.uni-bayreuth.de/wp/

jQPlot

Un de mes préférés aussi, sous licence MIT ou GPL 2 selon vos envies. Plutôt complet aussi.

http://www.jqplot.com/

dygraphs

Excelle dans les tracés sur repère trigo. Sous licence MIT.

http://dygraphs.com

Flotr2

Aucune licence appliquée, faites en ce que vous voulez. Cette bibliothèque est assez riche aussi.

http://www.humblesoftware.com/flotr2/

Cette version de maintenance apporte des correctifs pour le Datepicker, Draggable et Sortable. Le processus de build a également profité de quelques modifications. Voici les liens du changelog complet ainsi que celui du guide de migration.

Pour ceux qui suivent l’actualité de Microsoft, vous avez peut-être entendu parler de la création le mois dernier de la filiale « Microsoft Open Technologies ». Et bien leur première publication dans le monde de l’open source est pour jQuery Mobile ! Ils ont mis à disposition un thème qui reprend leur interface Metro. En soit, c’est pas grand chose, mais ça montre bien encore une fois que Microsoft a définitivement cette volonté de changer d’image et agit pour.

Un site réalisé avec jQuery Mobile a été assez plébiscité. De ce que j’ai compris, c’est un site de pari sur le foot. Je vous laisse jouer avec les boutons sans trop comprendre ce que vous faites. Le site étant en hébreux, cette langue n’étant pas vraiment une de mes spécialités, j’ai pas tout compris. L’idée étant plutôt de voir la façon dont sont intégrés l’essentiel des systèmes de jQuery Mobile.

Originalité de la semaine, Lory Bineau a publié un article sur comment utiliser  des plugins jQuery avec Haxe. Voici un lien pour ceux qui ne connaissent pas Haxe.

Pour parler plugins, ce coup-ci, nous parlerons de jQuery que l’ami Bruno Bichet qui nous a remonté jQuery List, une liste de plus de 600 plugins catégorisés.

Je terminerai sur une présentation de jQuery Mobile effectuée au cours de la Kiwi Party 2012. Nicolas Hoffmann a essayé de présenter ça de façon assez complète en un nombre de slides plutôt limité et il s’en sort plutôt bien.

Dan Wahlin a publié sur son blog, une liste d’outils (sites et extensions de navigateurs) qui peuvent vous être utiles pour travailler avec jQuery. Je ne peux que vous conseiller de le lire avec attention.

Autre tutoriel très intéressant, celui de François Guillot. Il nous y explique comment gérer correctement les callbacks avec jQuery en revenant sur les fondements même de cette partie du langage JavaScript.

On poursuit avec les plugins. Il y en a un pas mal du tout qui a été publié cette semaine. jQuery-contextMenu permet de mettre en place des menus contextuels. Je n’ai pas eu le temps de tester l’outil mais ça m’a l’air sympa.

Je vous ai parlé plusieurs fois de la conférence jQuery UK. La page Lanyrd étant enfin complète, voilà toutes les vidéos tournées sur place.

Pour terminer, une petite anecdote. Le framework AQuery vient de voir le jour. Dédié au développement Java pour Android, il s’inspire directement des pratiques de jQuery pour faciliter le développement. Affaire à suivre même si il semblerait que l’idée est déjà des contestataires capables de justifier leurs propos de façon pertinente.