J’ai lu pour vous : Simplifiez et enrichissez vos développements JavaScript (Jquery)

jquery

de J. Chaffer et K. Swedberg

Souhaitant acquérir des connaissances sur jQuery, j’ai lu ce livre avec attention. Ayant un niveau débutant/intermédiaire en JavaScript, je me suis fié à la mention « tous niveaux » et je n’ai pas été déçu. Le livre s’adresse effectivement à tous les niveaux et comprend des chapitres « premiers pas » reprenant les bases de jQuery, ainsi que des chapitres plus avancés qui misent sur l’amélioration progressive d’une fonctionnalité. A noter aussi les annexes en fin de livre qui reviennent sur les sites de référence, les outils et quelques notions avancées comme les closures JavaScript.
Les six premiers chapitres permettent d’appréhender les briques de base de JQuery : sélecteurs, événements, effets, manipulation du DOM et utilisation d’AJAX. Dans ces chapitres, j’ai particulièrement apprécié :

 

  • Les notations les plus avancées ainsi que les filtres de parcours sur les sélecteurs jQuery qui soulignent leur puissance et leur souplesse.
  • Le rappel sur la gestion des événements et la manière dont jQuery résout le problème lié aux multiples gestionnaires. On y trouvera des éléments très intéressants sur la propagation d’événements.
  • La bonne explication du chaînage et de la synchronisation des événements, notamment dans leur application aux effets.
  • L’explication sur les différentes méthodes existantes dans jQuery qui utilisent AJAX.
J’ai cependant regretté l’absence de comparatif sur les performances des sélecteurs jQuery par rapport aux frameworks concurrents (dojo et extjs, par exemple, ont eux aussi des systèmes de sélecteurs). Dans la même veine, j’aurais apprécié un chapitre ou une section par chapitre concernant les bonnes pratiques. Les auteurs abordent cependant quelques-uns de ces aspects, notamment en parlant de la mise en cache des sélecteurs, mais un peu plus de conseils auraient été bienvenus.

 

Sur les chapitres précédents, vous aborderez des problématiques assez courantes et une façon de les traiter avec jQuery : carrousels d’images, manipulation de tables et formulaires. L’approche par « amélioration progressive » et le souci des auteurs de conserver une page Web accessible sans JavaScript est particulièrement intéressante. Les lecteurs pourront peut-être saturer par excès de lecture de code sur ces chapitres, il faut savoir espacer ses moments de lecture et sélectionner ce qui vous intéresse.

 

La traduction française est de très bonne qualité, notamment grâce aux captures d’écran ainsi qu’aux exemples de code qui sont eux aussi en version française. Il y a un réel effort d’adaptation au public français (liens vers les versions françaises de certains sites par exemple). J’ai été cependant un peu déstabilisé par certains termes pour lesquels la traduction ne m’était pas familière, comme les fonctions callback traduites en « fonctions de rappel ».

 

Pour résumer, même s’il est dommage que la version 1.4 de jQuery soit sortie peu de temps après le livre, il s’agit d’un bon ouvrage s’adressant à tous les niveaux et qui tombe à pic à l’heure où jQuery gagne de plus en plus en popularité.

Note : J’ai originalement créé ce billet de lecture sur developpez.com. Je vous invite à y consulter la section « Livres » pour découvrir d’autres ouvrages très intéressants
 

Sortie d’un plugin Jira : jira-order-plugin

J’avais déjà parlé de Jira et des possibilités de personnalisation dans un précédent article. Ici plus exactement.

Cette fois-ci c’est un nouveau plugin que je sors des cartons, Jira order plugin, une fille d’attente pour gérer des fiches par ordre de priorité.

 

Principe de fonctionnement

Pour résumer, le principe de ce plugin est assez simple, il permet de créer une file d’attente des fiches à traiter.

Mais pourquoi une file d’attente alors qu’on a déjà une priorité sur les fiches me direz-vous ? Ne vous est-il jamais arrivé d’avoir 200 fiches ouvertes dans votre projet avec 20 fiches à traiter d’urgence sans parler du reste ? Ok et dans ce cas là quelle est votre stratégie ? Traiter toutes les demandes urgentes d’un coup ? Les traiter dans un ordre aléatoire ?

Parfois on voit des managers qui vont de nouveau reprioriser leur fiches urgentes avec des priorités « urgentes ++ » en créant donc un nouveau stade d’urgence. Bon super, et après, on créé un « urgente +++ », « plus urgente tu meurs » etc… L’autre idée c’est de définir leur ordre de traitement de façon linéaire à travers une file d’attente.

Mais bon, pas envie de gérer sans arrêt les ajouts dans la file d’attente, dans ce cas le plugin va calculer automatiquement la position d’une nouvelle fiche entrée dans le système à partir de sa priorité et de sa date de création. Et voilà, vous avez les grandes lignes directrices de ce plugin :

  • file d’attente des fiches à traiter
  • calcul de la position initiale des fiches dans la file à partir de leur priorité et de la date de création
  • recalcul de la position des fiches dans la file après un déplacement ou un changement d’état

Concrètement la visualisation de cette file d’attente utilise le navigateur de fiches :

issueorder

On remarquera sur l’image la colonne « Issue ordering » qui représente notre Custom field configuré pour apparaître dans le navigateur de fiches.

Et sous le capot, ça marche comment ?

Plus complexe que le précédent plugin, cette fois-ci il s’agit :

  • d’un custom field
  • d’un listener qui écoute les changements d’états des fiches
  • d’un service qui réordonne les fiches régulièrement
  • d’une action webwork combiné avec Jquery pour un réarrangement manuel de l’ordre des fiches

Jquery

Parmi les éléments techniques intéressants ici je citerais notamment l’utilisation de Jquery pour la partie Drag and drop qui permet de repositionner les fiches manuellement.

Dans le template Velocity j’utilise un bout de code Jquery pour chaque valeur de champ

?View Code JAVASCRIPT
$('#rankHkn${index}').draggable({ axis: 'y', cursor: 'crosshair', opacity: 0.35, revert: true });
$('.droppable').droppable({drop: function ( event, ui) {displayMessageOrderField(ui.draggable.attr("id"),this); }});

Et voilà, en deux lignes à peine j’obtiens la possibilité de faire du Drag and Drop sans être vraiment expert JavaScript moi-même ^^

On notera que ${index} est interprété par Velocity lors de la création de la page, alors que $(‘.droppable’) n’ayant pas été interprété par Velocity, il apparaît tel quel dans la page HTML et sera donc utilisé comme sélecteur CSS par JQuery. L’utilisation du $ dans les templates Velocity pour deux choses distinctes peut amener bien des surprises si on n’y fait pas gaffe.

Un petit brin d’ergonomie, évitez l’attente

Vous vous souvenez, plus haut j’ai écrit que les fiches étaient automatiquement placés dans la file d’attente lors de leur création en fonction de certains critères. Ok mais du coup ca implique un calcul. Rapide sur une petite instance, ce calcul peut facilement prendre du temps sur une instance Jira avec un grand nombre de fiches. Et ce temps on veut éviter de l’infliger à l’utilisateur qui voulait juste créer une fiche, lui.

Toute l’astuce a donc été ici d’utiliser un design pattern assez simple, le producteur consommateur :

  • le producteur c’est l’utilisateur, à la création d’une fiche (ou sa modif) il empile l’action dans une file d’évènement
  • le consommateur c’est un service Jira qui dépile cette file pour traiter les évènements

Du coup, pas d’attente pour l’utilisateur car l’ajout dans la pile est rapide. Le défaut c’est par contre d’avoir une actualisation de la position dans la file d’attente plus lente, après le passage du service uniquement.

Et côté implémentation en Java, rien de mieux que l’utilisation d’une BlockingQueue qui permet de gérer correctement la concurrence d’accès à l’ajout et la lecture dans la pile.

Où trouver tout ça

Bon, si le plugin vous intéresse, vous pouvez le trouver sur le plugins exchange ou sur sa page Confluence.

Et si le code vous intéresse, celui-ci est accessible via svn ici.