La troisième édition du Scrum day s’est déroulé ce Jeudi 11 Avril 2013 dans les locaux d’IBM à Bécon-Les-Bruyères. Pour moi,  ce fut une grande première. On n’a pas tous les jours l’occasion de croiser les principaux chantres des méthodes Agiles...

Hadoop permet d’optimiser le temps d’exécution de traitements distribués quand ils sont limités par la bande passante vers les données. Mais, pour cette même raison, son système de fichiers (HDFS) n’est pas conçu pour les accès aléatoires. Si vous recalculez les recommandations pour vos utilisateurs chaque nuit, comment exposer alors à chaque utilisateur les données le concernant? BigData in, BigData out. Dans ce contexte, LinkedIn utilise Voldemort. Cette base de données clef/valeur propose en effet de construire son index en utilisant Hadoop. Nous allons voir ensemble la justification et la mise en place.

Lire la suite de cet article …

Une application Web peut se voir comme une application classique, sur laquelle on greffe une couche de communication et de présentation que sont HTTP et HTML. Ne pas tenir compte de l’aspect Web a de nombreux avantages : tests rapides, modularité accrue, etc. Comme François l’explique dans un autre de nos articles : cela permet aussi de découpler la logique métier plus facilement.

Dans cet article, je présente un motif de conception qui s’avère très utile pour connecter la logique métier avec la couche de communication. Ce motif, que je désigne ici par Form-Object, permet de convertir des données envoyées via HTTP afin de construire nos objets du domaine métier.

Lire la suite...

Java EE 7, c’est parti !

La semaine dernière Oracle a annoncé la sortie de Java EE 7, en nous promettant (je cite) “le support de HTML5, plus de productivité pour les développeurs et la réponse aux besoins les plus exigeants des entreprises”.

Qu’en est-il vraiment ?

Etat des lieux de Java EE

Si Java est aujourd’hui le principal language utilisé en entreprise, Java EE n’a pas eu le même succès, la plupart des gens n’en utilisant qu’un sous-ensemble (JSP, Servlet, JPA, etc.) et non pas l’ensemble des APIs (EJBs, JMS…).

Les premières versions de la plateforme, mal conçues, ont été rapidement concurrencées par des frameworks tels que Spring : au bout de quelques années de concurrence, J2EE est devenu Java EE et a repris les principes majeurs de Spring tels que l’injection de dépendance par annotation ou les intercepteurs (encore qu’on pourrait argumenter que les intercepteurs Java EE sont nettement moins puissants que l’AOP fourni par Spring).

Cependant, entre-temps, notre monde a bougé : la productivité ou la satisfaction des développeurs n’est plus simplement limité à avoir un framework d’injection de dépendance ! Nous voulons pouvoir développer des applications REST, HTML5, dans le cloud, avec la stack ayant le plus de buzzwords possibles. Et j’oubliais la mobilité et le Big Data, sur des architectures distribuées

Que ce soit sur Google Trends (tendances des recherches Google) ou Indeed (tendances des offres d’emploi aux US), on retrouve les mêmes courbes :

• Google Trends : “Java EE” vs Node.js vs MongoDB vs Hadoop
• Indeed : “Java EE” vs Node.js vs MongoDB vs Hadoop

On voit bien ici que l’intérêt des développeurs pour Java EE n’a pas décollé, par rapport à des frameworks concurrents (node.js) ou des technologies NoSQL/Big Data.

C’est donc sur ces thèmes que Java EE doit se battre, en particulier contre Spring ou Node.js, qui sont des stacks ayant pris depuis longtemps le chemin des applications HTML5, REST, NoSQL, mobiles, dans le cloud, etc. Et c’est ce que nous allons donc étudier tout au long de cet article.

Le support de HTML5, 1ère partie : les Websockets

Le support de HTML5 m’a personnellement plutôt fait sourire : quel rapport entre Java EE et le HTML5 ? Pour Oracle, dans sa “press release”, cela signifie supporter les Websockets !

Quiconque ayant déjà fait des Websockets se méfie en voyant ce type d’annonce :

• Utiliser des Websockets est une problématique bien plus compliquée que d’avoir simplement une implémentation sur son serveur d’application. Il est clair que la solution proposée par Java EE va poser des problèmes de portabilité et de gestion des erreurs (que faites-vous si un serveur proxy ou un navigateur client ne supporte pas Websocket ?).
• Les Websockets changent radicalement la manière dont on conçoit une application, car l’idée est de pouvoir faire du “push” depuis le serveur, ce qui est très différent d’une architecture classique où l’on répond à des requêtes envoyées par un client HTTP. La seule solution en Java EE consiste à utiliser JMS 2.0 pour faire ces envois (mécanisme détaillé dans ce blog), ce que je trouve plutôt lourd. Sortir un serveur JMS pour faire des Websockets, c’est quand même bien compliqué !

Pour utiliser Atmosphere depuis pas mal de temps, un excellent framework qui résout tous ces problèmes de manière performante et élégante, je vois mal quiconque utiliser Java EE 7 directement.

La press release d’Oracle met donc en avant une avancée technique nécessaire et intéressante, mais dont l’implémentation reste simpliste.

Le support de HTML5, 2ème partie : JAX-RS 2 et JSON

Faire une application HTML5 avec un framework MVC JavaScript moderne, de type backbone.js ou angular.js, c’est surtout consommer des services REST, et s’échanger des données au format JSON.

La mise à jour de l’API JAX RS est donc particulièrement bienvenue, et permet :

• D’avoir des intercepteurs sur ses services REST
• De pouvoir avoir des services asynchrones
• D’avoir une API cliente (il était en effet assez incroyable de constater qu’il y avait une API serveur mais pas d’API cliente !)

De même nous disposons maintenant d’une API JSON standardisée, avec JSON-P (plus de détails sur cet article). Une nouveauté intéressante est l’ajout d’une API fluente permettant de créer du JSON (personnellement je n’ai encore jamais eu ce besoin, mais cela peut toujours être utile).

Toutes ces fonctionnalités étant présentes dans les stacks concurrente (par exemple Spring MVC REST + Jackson 2), il s’agit donc là d’une mise à jour nécessaire.

Un regret cependant : cette stack ne propose pas de support pour réaliser des tests unitaires avec des mocks, comme nous en disposons dans Spring. C’est une fonctionnalité que j’apprécie particulièrement, par exemple dans Tatami (voici en exemple), et qui devrait bientôt faire l’objet d’un nouvel article sur ce blog.

Le support de HTML5, 3ème partie : JSF 2.2

De manière plus discrète, Java EE 7 amène également les “passthrough attributes” dans JSF 2.2, ce qui permet enfin d’utiliser HTML5 avec JSF 2.2.

Jusqu’à présent, on ne pouvait utiliser que les tags reconnus par sa librairie de composants : or, en HTML5, vous pouvez ajouter et définir vos propres attributs, que vous utilisez ensuite en JavaScript.

Les “passthrough attributes” sont en fait assez basiques : la librairie de composant va simplement rendre ces attributs côté client. Elle fait alors juste “passe plat” entre le code JSF et le HTML généré. Mais cela change tout, car nous pouvons maintenant avoir nos propres attributs côté client !

Pas de cloud dans Java EE 7

L’objectif de Java EE 7 était le cloud : comme présenté l’année dernière par Oracle (les slides sont encore ici), nous devions pouvoir développer “dans le cloud” avec Java EE 7, et plus précisément :

• Avoir des APIs pour gérer le provisionning, l’élasticité, la qualité de service, etc.
• Avoir des applications modulaires, avec Jigsaw
• Avoir du “vrai” multi-tenancy sur les serveurs d’app
• Enfin, JCache allait renaître de ses cendres et nous aurions une API de cache digne de ce nom

Au final, tout cela a été abandonné.

Pour avoir participé à la spécification JMS 2, je peux vous confirmer que cet abandon a été volontaire : aucun vendeur de serveur d’application ne souhaite voir ces fonctionnalités être intégrées dans Java EE. Cela fait plus de 10 ans que l’ajout de ces fonctionnalités “avancées” dans Java EE sont sabordées par une grande partie des acteurs du JCP, car ce sont grâce à elles que les entreprises clientes achètent des serveurs en “version entreprise” au lieu de se contenter d’un simple Tomcat.

C’est donc un grand gâchis, mais ce n’est que partie remise. Comme en son temps l’arrivée de Spring a fait bouger le JCP, l’arrivée du cloud va nécessairement faire bouger les lignes. A titre d’exemple, les ventes de serveurs d’Oracle (les anciens serveurs Sun, que Oracle a racheté) ont chuté de 27,2% ce trimestre ! Il est donc probable que le JCP, à nouveau, soit forcé de s’adapter.

Focus sur JMS 2

L’un des succès de Java EE 7 est l’arrivée de JMS 2. Plus de 10 ans après la norme précédente, et toujours sans support du clustering (cf. le point précédent), JMS 2 propose une API modernisée, qui vous permettra de vous passer de la fameuse JmsTemplate de Spring.

JMS 2, heureusement, garde quand même l’un des grands bénéfices de JMS 1, qui était de pouvoir être utilisé en dehors d’un serveur d’application : en effet, les vendeurs de serveurs d’applications voulaient lier JMS 2 à CDI, de manière à obliger les utilisateurs à avoir un serveur d’application pour envoyer un message. Au final, nous restons donc sur une API proche de l’originale, mais modernisée et simplifiée.

Cette nouvelle API a été très bien décrite dans ce blog, nous en retiendrons principalement :

• La suppression de beaucoup de code inutile
• La fin de l’API connection.createSession(true,Session.SESSION_TRANSACTED), dont les deux paramètres étaient une curiosité étonnante
• L’ajout d’une API “fluente”, de type context.createProducer().setPriority(1).setProperty(“foo”, “bar”).send(demoQueue, textMessage);

La bonne surprise de Java EE 7 : l’intégration de Spring Batch

Lancé par IBM, l’intégration des batchs dans Java EE est enfin une réalité ! Dans la pratique, il s’agit d’une intégration du code Spring Batch dans Java EE :

• L’API est la même
• Les fichiers de configuration sont les mêmes
• Même dans les slides d’Oracle, on retrouve des schémas copiés/collés du site de Spring Batch

D’autre part, SpringSource a fait le maximum pour que Spring Batch puisse être utilisé dans Java EE (avec CDI), mais sans que l’on soit obligé de dépendre de ses APIs.

Depuis le nombre d’années que l’on attendait une solution pour faire des batchs en Java EE, c’est donc une excellente nouvelle, d’autant plus que Spring Batch est une solution très largement reconnue.

Reste à voir quelles implémentations seront disponibles dans les différents serveurs d’applications :

• Est-ce que les vendeurs de serveurs d’applications se contenteront tous de copier/coller le code de Spring Batch, ou certains feront-ils des implémentations spécifiques ?
• Est-ce que nous aurons enfin des stratégies performantes de partitionning des batchs ? Les versions disponibles sur Spring Batch sont en effet en cours de développement depuis longtemps, sans grande avancée.

Cette nouvelle devrait également permettre de faire revivre Spring Batch, qui est un projet qui ne progressait plus beaucoup ces dernières années, en particulier depuis que Accenture en avait abandonné le co-développement avec SpringSource.

En conclusion

Cette montée de version de Java EE, tant attendue, n’a pas tenue ses promesses. L’objectif “cloud” a été totalement raté, de même qu’un certain nombre d’API qui devaient être mises à jour (JCache en particulier).

Heureusement, un travail minimal a été réalisé sur les HTML5 et sur JMS 2, et nous avons eu la bonne surprise de voir l’intégration de Spring Batch dans la spécification. En 2013, nous n’en attendions pas moins !

La soirée du 4 juin 2013 marque l’ouverture chez Xebia du mois du JS, série d’évènements destinée à découvrir les principaux acteurs du marchés des frameworks MVC coté client.

Cette première soirée, consacrée à Ember.js, a permis à une vingtaine de personnes de découvrir comment poser les premières pierres d’une application Ember.

Lire la suite de cet article …

Tu es fière d’être codeuse (ou codeur) ? Tant mieux, car nous avons un défi pour toi : sauras-tu écrire du code committable en moins de deux minutes ?

Intéressé ? Nous te proposerons de rejoindre ce vendredi midi des Octos aventureux pour un atelier de programmation. Tous niveaux de TDD acceptés.

Nous travaillerons par paires et en TDD sur un problème de programmation relativement simple. L’exercice consistera à résoudre ce problème en respectant le protocole suivant, inspiré par Adrian Bolboaca :

Écrire et faire passer un test

1. démarrer un timer à 2 minutes
2. écrire un test non passant
3. écrire du code pour faire passer le test
4. dès que les 2 minutes sont écoulées, on fait le point :
   •  le test est vert ? On committe et on va en 5. pour faire un refactoring
   •  le test est rouge ? On annule tous les changements faits depuis le dernier commit et on retourne en 1.

Faire un refactoring

5. démarrer un timer à 2 minutes
6. faire un refactoring
7. dès que les 2 minutes sont écoulées, on fait le point :
   • le test est vert ? On committe et on passe au choix en 1. pour ajouter une fonctionnalité ou en 5. pour un autre refactoring
   • le test est rouge ? On annule tous les changements faits et on retourne en 5. pour retenter un refactoring

Au bout de 45 minutes, nous effacerons le code produit et débrieferons ensemble sur l’expérience.

Toujours intéressé ? Les inscriptions sont ouvertes sur eventbrite.

En venant, assure-toi d’apporter

• un ordinateur sur lequel tu es à l’aise
• de quoi développer dans ton langage préféré (IDE ou éditeur de texte, compilateur, …)
• un gestionnaire de versions que tu sais utiliser en local (je suggère git ou mercurial mais si tu sais faire du svn en local feel free!)
• un sandwich ou autre repas à emporter (que tu mangeras probablement pendant le debrief, mais si tu arrives à manger en codant feel free!)

Si tu viens en binôme, vous pourrez vous contenter d’un seul ordinateur (si tu veux aussi binômer sur le repas feel free!)

N’oublie pas de t’inscrire pour venir.

what : atelier coder à pas de chaton
when : ce vendredi 21 juin de 12h30 à 13h30
where : OCTO Technology, 50 avenue des champs Élysées, 75008 Paris, 5ème étage, salle André Gide

Suggestion d'articles :

1. L’école du Tech-Lead
2. Vendredi 26/04 : l’École du Tech Lead parle de revues de code
3. Tech days 2011 : le bilan

La revue de presse hebdomadaire des écosystèmes Java/JEE proposée par Xebia.

• Agilité
  • L'importance du Lean startup dans les entreprises (Par Yannick Grenzinger)
  • Product Ownership dans le brouillard (Par Gilles Mantel)
• Mobilité
  • Un meilleur visualiseur de logs pour Android (Par Gautier Mechling)
• Web
  • AngularJS va être porté sur Dart (Par Mathieu Breton)
• Le coin de la technique
  • Sortie de Java EE 7 et de Glassfish 4.0 (Par Antoine Michaud)

Lire la suite de cet article …

Vous avez peut-être déjà travaillé avec la classe UICollectionView, mais savez-vous comment personnaliser entièrement la mise en page et les transitions de vos données ? De même, avez-vous déjà eu à mettre en œuvre un UICollectionViewLayout personnalisé ?

Si la réponse est "non", alors une lecture de cette article s’impose.

Lire la suite de cet article …

Dans un précédent article, nous introduisions un projet réalisé au sein d’Ekito, basé sur CMIS (Content Management Interoperability Service). Comme son nom l’indique, cette norme permet de favoriser l’interopérabilité entre systèmes de gestion de contenu.   Mais c’est quoi au … Lire la Suite →

Que vous soyez ingénieurs Java, DEV ou OPS, venez découvrir l’outil ElasticSearch avec David Pilato et Lire la suite de cet article …

On a entrevu ici les raisons pour lesquelles le JavaScript devient une technologie incontournable et que les besoins de structuration du code expliquent en grande partie l’engouement pour BackboneJS, EmberJS ou AngularJS. Infotel a réalisé à ce jour plusieurs projets AngularJS (ci-dessous les captures d’écrans correspondantes) qui nous donnent l’occasion de partager quelques bonnes pratiques [...]

Un ami m’a dit un jour que le Scrum Master était, au-delà du gardien de la méthode, le garant de la vélocité de l’équipe. Depuis, je me suis approprié cette formule que je trouve excellente. Pour garantir la vélocité, il faut la connaître et qu’elle soit fiable. Bien souvent, pour des équipes Scrum débutantes, il est possible d’être confronté à une vélocité qui fait le yoyo d’un sprint à l’autre. Ou encore, récemment, je me suis trouvé dans cette situation : le Scrum Master et le Product Owner d’une équipe pensaient qu’ils ne connaissaient pas la vélocité de leur équipe. Etonnant non ? Et pourtant, dans quelques cas la vélocité a du mal à émerger. Je vous propose quelques bons réflexes à avoir pour stabiliser la vélocité de votre équipe et l’accompagner sur le chemin du rythme soutenable.

Lire la suite de cet article …

Plus d’une heure et demi de vidéo sur ElasticSearch, encore un IppEvent d’une grande qualité technique avec David Pilato, qui nous présente le moteur de recherche Open Source le plus avancé du moment.

Je profite de ce billet pour vous annoncer deux nouvelles en relation avec l’évènement :

• Tatami, notre réseau social d’entreprise Open Source, utilise maintenant exclusivement Elastic Search pour ses recherches. Vous pouvez retrouver le code sur https://github.com/ippontech/tatami
• Notre prochain IppEvent aura lieu Jeudi 20 Juin et traitera de Cassandra : http://ippevent-cassandra.eventbrite.fr/?ref=etckt

Elasticsearch – Le moteur de recherche élastique pour tous, pour David Pilato from Ippon Technologies on Vimeo.

DroidCon, la conférence exclusivement réservée à Android, prendra place cette année à Paris les 17 et 18 juin 2013.

Après une Lire la suite de cet article …

La conception et le développement des grandes applications web a sa part de difficulté, et pour GWT, il n’y a pas d’exception. Plusieurs développeurs travaillent sur le même code, d’où la nécessité de maintenir une cohérence et d’assurer la pérennité des...

Le déploiement automatique des applications est l’un des piliers essentiels du "Continuous Delivery". 

Deployit est une solution transverse qui offre à l’ensemble des acteurs (Dev & Ops) une solution unifiée pour déployer et configurer leurs applications sur l’ensemble de leurs environnements.

Dans ce workshop de 3 heures, nous verrons comment coupler Deployit à un moteur d’intégration continue (Jenkins) afin d’inclure l’activité "déploiement et Lire la suite de cet article …

Le 23 mai dernier s’est tenu dans les locaux de Soat, une soirée technique dont le thème était ”Conquérir le monde avec Windows Azure Mobile Services“. Pour l’occasion, les orateurs, Wilfried Woivré – MVP Azure et David Poulin – membre du pôle expert...

Canvas nous offre des possibilités de conceptions d'interfaces entièrement nouvelles : animations, interfaces, fractales… Tout est possible, tout est imaginable. Mais canvas reste une interface relativement bas-niveau, vue comme une boite noire par le DOM. Face à cette situation, il fallait trouver une solution pour gérer les DOM events. Elle s'appelle Heatmaps.

C'était il y a quelques semaines, à l'occasion d'un nouveau projet pour un client. L'objectif était la réalisation d'une interface complexe, très largement animée, avec des effets de transition riches. Très rapidement, nous avons écarté la solution CSS Transitions / Animations : trop coûteuse, trop lourde à mettre en œuvre pour se tourner plus volontiers vers . Avec ça, on devrait pouvoir y arriver.

Le POC

Faire du nu, from scratch, c'est comme de vouloir construire un bateau avec une boite d'allumettes en guise de matière première : ça va être long, ça va être difficile, et ça ne sera peut-être pas très droit à l'arrivée.

Heureusement il existe des librairies au-dessus de , qui commencent à arriver à maturité. Notre choix se porte sur Kinetic. Si vous ne connaissez pas encore cette formidable librairie, je pense qu'on vous en parlera rapidement. Elle ajoute un niveau d'abstraction à pour facilement dessiner des formes, les animer, leurs attacher des évènements… Un bel outil à ajouter dans votre trousseau de développeur front-end.

Ce projet d'interface est ambitieux, Kinetic va se révéler un outil précieux. Mais il reste un écueil de taille : l'interface doit être pleinement compatible et fonctionnelle sous IE8. Et là, c'est un peu comme si le monde s'ouvrait sous vos pieds. Demander à IE8 de supporter , c'est comme de demander à la tortue de la fable de voler pour aller plus vite. Elle ne vole pas la tortue, c'est comme ça. Il va falloir trouver une alternative. Il n'y en a pas beaucoup pour émuler un fonctionnement de : exCanvas et FlashCanvas. La première est trop instable. La seconde permet de remplacer par un flash et c'est une librairie JS qui va faire le bridge. La dernière version supporte 70% des fonctionnalités de . Les quelques informations glanées ici et là sont encourageantes, croisons les doigts, en avant pour le grand saut…

Plus dure sera la chute…

Nous commençons donc le travail de conception, nous utilisons intensivement les capacités de Kinetic, l'interface prend forme. Nous transposons ensuite la réalisation dans IE8 en utilisant le support FlashCanvas. Et là, nouveau drame : Kinetic est visiblement incompatible avec FlashCanvas dans l'usage que nous en faisons. Dans notre cas, impossible de le faire fonctionner, malgré ce que nous avions pu trouver ici et là comme ressources nous indiquant le contraire… Considérable déception, nous sommes tristesse. Pas le choix donc, il nous faut re-concevoir l'interface pour IE8 en nous passant du support de Kinetic et utiliser directement les fonctionnalités supportées par FlashCanvas.

C'est alors — Dieu, que cette histoire est riche en rebondissements — qu'une triste réalité nous frappe : ne sait pas attacher d'évènements DOM aux éléments qu'il dessine. Kinetic le faisait aisément pour nous, pas besoin de s'en soucier outre-mesure. Oui mais là, on est coincés : il va falloir trouver un moyen de gérer différents évènements (click, mousemove, mouseover…) sans aucun support natif disponible.

La solution de secours : Heatmaps !

Il faut que je vous mette en garde dès maintenant : cette solution tient du hack. C'est une bidouille comme on en fait depuis plus de 20 ans sur le web. Mais c'est une bidouille qui :

• a la bonté de fonctionner correctement ;
• a le bon goût d'être élégante à défaut d'être standard. Vous pouvez assez facilement en trouver les théories ici ou là sur le net, mais son implémentation peut sembler complexe : c'est là tout l'objectif de cet article, vous proposer une implémentation qualitative et détaillée du concept.

Démonstration

Reprenons le problème : j'ai une interface qui, dans le cas de ma démo, va être relativement simple. Elle va se composer d'un cercle qui devra réagir au survol de la souris pour changer son curseur, selon que celui-ci survole l'hémicycle droit ou l'hémicycle gauche. En surimpression en bas à droite, un carré recouvrira un quart de la zone et réagira au survol en remplissant une balise

indiquant les coordonnées courantes du curseur. De plus, l'hémicycle gauche devra modifier le message de la légende au clic (en changeant sa couleur). Rien de très exceptionnel, mais ces quelques éléments nous contraignent à gérer différents DOM events. Si vous voulez vous faire une idée du résultat, la démo est ci-dessous :

Premier objectif : détecter la zone de survol

Avant de pouvoir gérer les évènements, il va nous falloir détecter sur quel éléments ceux-ci doivent s'appliquer. De quoi disposons-nous avec pour détecter l'élément au dessus duquel notre curseur se trouve positionné ? À vrai dire, pas grand-chose : propose une unique méthode isPointInPath() qui renvoie un booléen selon que le point aux coordonnées indiquées est dans le path en cours de dessin.

Il est facile de trouver la position du curseur sur le canvas :

1. function pointerOffset(e) {
2. var offset = this.offset();
3. return [e.pageX - offset.left, e.pageY - offset.top];
4. }
5. $('#canvas').on('mousemove', function(e) {
6. mousePos = pointerOffset.call(this, e);
7. });

Télécharger

En attachant un évènement mousemove sur la balise #canvas, à chaque déplacement de la souris, on détecte sa position sur la page (e.page{X|Y}) auquel on soustrait la position de la balise sur la page (offset) pour obtenir les coordonnées du curseur à l'intérieur du canvas. On peut donc passer ces coordonnées à la méthode isPointInPath(). Problème : cette méthode ne fonctionne qu'à partir du moment où vous dessinez un élément sur votre canvas. Vous voilà donc obligé de redessiner l'intégralité de votre à chaque mouvement du curseur pour vérifier si le path que vous êtes en train de dessiner se trouve sous le curseur. Absurde et suicidaire en terme de performance…

Deuxième solution : utiliser une carte de correspondance de zones

isPointInPath() ne peut donc pas nous aider sur ce coup. La solution va venir des heatmaps, que j'appelle joliment « cartes de correspondances de zones » (c'est mignon, non ?). Il s'agit de dessiner une fois pour toute votre et de créer dans le même temps un double (maléfique), un second identique au premier dans ses formes mais qui utilisera des zones de couleurs aléatoirement définies pour remplir ses paths. Ce jumeau multicolore ne sera jamais injecté dans le DOM. Il va uniquement servir de référence. À chaque déplacement du curseur, il suffira de regarder, sur la heatmap la couleur se trouvant aux coordonnées correspondant au curseur sur le principal. On obtient de cette façon la zone survolée. Simple, efficace, rapide, performant.

Implémentons ce concept de façon élégante pour pouvoir réutiliser par la suite cet outil de façon agnostique (Don't Repeat Yourself et Keep It Smart and Simple)…

Définition des canvas

Première étape, créons les canvas à utiliser. Il nous en faut donc deux : un premier pour l'interface à afficher, un second pour la heatmap. Nous allons également devoir stocker les contextes des pour y accéder facilement, et les éléments que nous allons dessiner [1] .

1. var $canvas = $(').prependTo('body')
2. , $map = $('<canvas/>)
3. , CTX = {}
4. , ELEMENTS = {};

Télécharger

Toutes les actions affectant notre principal doivent être répercutées sur la heatmap associée. Nous allons donc concevoir différentes fonctions pour les manipuler simultanément. Commençons par les initialiser : nous leur fixons des dimensions et stockons les contextes.

1. function _initCanvas($el) {
2. $el.attr('width', 200)
3. .attr('height', 200);
4. return $el[0].getContext('2d');
5. }

Télécharger

Au passage, créons une fonction d'init qui va se charger de démarrer l'ensemble :

1. function init() {
2. CTX.canvas = _initCanvas($canvas);
3. CTX.map = _initCanvas($map);
4. }

Télécharger Dessine moi un mouton

Nos canvas sont donc disponibles, ainsi que leurs contextes. Ajoutons une méthode qui permettra de dessiner des formes (shapes) sur nos canvas :

1. function addElement(drawFunc) {
2. var r = Math.floor(Math.random()*256)
3. , g = Math.floor(Math.random()*256)
4. , b = Math.floor(Math.random()*256)
5. , uid = r + ':' + g + ':' + b
6. , args = Array.prototype.slice.call(arguments, 1);
7. drawFunc.apply(CTX.canvas, args);
8. CTX.map.fillStyle = 'rgb(' + r + ',' + g + ',' + b + ')';
9. drawFunc.apply(CTX.map, args);
10. }

Télécharger

Nous commençons par créer un identifiant construit sous la forme d'une chaîne RGB. Nous allons en faire un double usage : identifier unitairement un élément sur le , et remplir la zone correspondante sur la heatmap avec une couleur générée aléatoirement. Notre méthode addElement prend donc en argument une méthode permettant de dessiner une forme et l'applique d'abord sur notre $canvas principal, puis sur notre $map en ayant pris soin de modifier préalablement la couleur de remplissage avec la couleur RGB générée. La fonction de dessin appelée étant la même, les deux zones sur les deux correspondront à l'identique.

Petite astuce ici : la signature de la fonction addElement est de la forme addElement(drawFunc [, drawFunc_Arg1 [, drawFunc_Arg2 [, …]]]]). Les arguments devant être passés à la fonction de dessin le sont au moment où l'on applique la méthode sur le canvas : drawFunc.apply(CTX.canvas, Array.prototype.slice.call(arguments, 1));

De cette façon, les arguments sont passés directement à drawFunc (moins le premier argument, qui est drawFunc lui-même), et this dans la méthode devient le contexte du canvas sur lequel nous sommes en train d'agir.

Dessinons maintenant nos éléments (2 demi-cercles et un carré) en définissant des méthodes de dessin simple :

1. function drawSemicircle(startAngle) {
2. this.beginPath();
3. this.arc(100, 100, 80, (0.5 + startAngle) * Math.PI, (1.5 + startAngle) * Math.PI, false);
4. this.closePath();
5. this.fill();
6. }
7. function drawRect() {
8. this.beginPath();
9. this.rect(100, 100, 80, 80);
10. this.closePath();
11. this.fill();
12. }

Télécharger

Puis utilisons-les pour placer nos éléments après avoir initialisé les canvas :

1. var WSemicircle
2. , ESemicircle
3. , Rect;
4. // Initialisation des
5. init();
6. // Définition de la couleur des demi-cercles sur le canvas principal
7. CTX.canvas.fillStyle = 'green';
8. // Dessinons deux demi-cercles pour obtenir un cercle complet
9. // Notez que le deuxième argument est l'angle de départ (en radiant)
10. // qui va être passé en paramètre à la fonction `drawSemicircle()`.
11. WSemicircle = addElement(drawSemicircle, 0),
12. ESemicircle = addElement(drawSemicircle, 1);
13. // Changeons la couleur du canvas principal pour dessiner le carré
14. CTX.canvas.fillStyle = 'red';
15. Rect = addElement(drawRect);

Télécharger

Magie ! Nous obtenons un dans notre page, qui nous présente bien un cercle vert surmonté d'un carré rouge. Et nous avons également un second canvas qui n'apparaît pas dans la page (nous ne l'avons pas injecté dans le DOM) mais qui présente lui trois couleurs différentes pour chacun de ses éléments [2].

Je vous l'accorde, comme ça, ce n'est pas très spectaculaire. Attachons-nous maintenant à définir des évènements sur ces éléments…

Gestion des piles d'évènements

Pour gérer les piles d'évènements, nous allons implémenter un design pattern pub-sub simplifié. Nous allons créer un objet JS capable de stocker des évènements dans une pile, et de déclencher ces évènements lorsque nous appellerons un évènement donné [3].

Commençons par définir notre classe. Nos objets Event auront deux propriétés : la stack des évènements, et un flag isOver permettant de marquer l'élément comme en cours de survol.

1. function Event() {
2. // La pile d'évènements
3. this.eventsStack = {};
4. // le flag de traçage du survol
5. this.isOver = false;
6. }

Télécharger

Ajoutons lui une méthode on() permettant d'attacher (bind) un évènement à notre objet, c'est-à-dire d'ajouter une entrée dans la stack d'évènements :

1. Event.prototype.on = function (eventName, callback) {
2. // On ajoute une entrée correspondant au type d'évènement dans notre
3. // stack si celle-ci n'existe pas encore
4. if (this.eventsStack[eventName] === undefined)
5. this.eventsStack[eventName] = [];
6. // Ajoutons maintenant la fonction à appeler lors du déclenchement (fire)
7. // de l'évènement
8. this.eventsStack[eventName].push(callback);
9. // Retournons l'objet Event courant pour permettre un chaînage
10. // "à la jQuery" (comme disent les anglais)
11. return this;
12. };

Télécharger

Nous avons également besoin d'une méthode pour déclencher la pile d'événements :

1. Event.prototype.fire = function(eventName, evt) {
2. // Early-return : on sort de la méthode s'il n'y a aucun évènement à
3. // déclencher
4. if (this.eventsStack[eventName] === undefined) return;
5. // On appelle nos fonctions attachés à l'évènement au sein d'une boucle
6. // for parcourant itérativement notre pile d'évènement
7. for (var _i = 0, _l = this.eventsStack[eventName].length; _i < _l; _i++) {
8. this.eventsStack[eventName][_i].call(this, evt);
9. }
10. };

Télécharger

Nous avons à présent un système d'évènements prêt à fonctionner. Il faut les attacher aux éléments lorsqu'il sont dessinés sur le principal. Modifions donc notre fonction addElement pour lui ajouter à la toute fin :

1. function addElement(drawFunc) {
2. […]
3. // On crée un nouvel objet Event pour l'élément que nous venons
4. // de dessiner. Nous le stockons avec l'identifiant rgb-uid associé
5. // dans un hash pour le garder sous la main, et nous le retournons pour
6. // qu'il puisse être disponible pour y attacher des évènements via `on`.
7. return ELEMENTS[uid] = new Event();
8. }

Télécharger Attache-moi !

Nous disposons à présent d'un système d'évènements prêt à recevoir nos instructions. Allons-y, attachons, mes bons !

Souvenez-vous, nous avons créé trois éléments : WSemicircle, ESemicircle et Rect qui correspondent à nos trois formes. Depuis la dernière modification de la méthode addElement, ces variables contiennent désormais un gestionnaire d'évènements associé à l'élément dessiné par son rgb-uid. Nous pouvons donc directement attacher nos évènements grâce à la méthode on de notre objet Event.

1. var $legend = $('.legend');
2. WSemicircle
3. .on('mouseover', function(e) {
4. $canvas.css('cursor', 'w-resize');
5. $legend.html("You're upon the left part of the circle ←");
6. })
7. .on('mouseout', function(e) {
8. $canvas.css('cursor', 'auto');
9. $legend.empty();
10. })
11. .on('click', function(e) {
12. $legend.html("You've clicked the left part of the circle ;)");
13. });
14. ESemicircle
15. .on('mouseover', function(e) {
16. $canvas.css('cursor', 'e-resize');
17. $legend.html("You're upon the right part of the circle →");
18. })
19. .on('mouseout', function(e) {
20. $canvas.css('cursor', 'auto');
21. $legend.empty();
22. });
23. Rect
24. .on('mousemove', function(e) {
25. $legend.html("You're upon the square,
    with your cursor located at [" + e.pageX + ',' + e.pageY + "]");
26. })
27. .on('mouseout', function(e) {
28. $legend.empty();
29. });

Télécharger

Formidable ! Nous avons défini des évènements de type onClick, onMouseover, onMousemove… Mais pour le moment, rien ne nous permet de les déclencher. C'est la dernière partie qu'il nous reste à implémenter.

Fire !

Tâchons d'être pragmatiques (nous nous en sommes plutôt bien sortis jusqu'ici). Nous disposons d'éléments dessinés dans une balise . Ces éléments ne peuvent pas recevoir de DOM events, étant donné qu'ils ne font pas partie du DOM. En revanche, la balise dans laquelle ils sont placés constitue un nœud DOM bien valide. C'est donc elle qui va recevoir les évènements et les faire descendre jusqu'aux éléments dessinés.

Premier objectif : il nous faut détecter au-dessus de quel élément se trouve notre curseur pour savoir quelle pile d'évènement appeler. C'est ici que rentre en jeu notre heatmap : celle-ci étant le double parfait de notre canvas principal (à la couleur près), c'est elle que nous allons interroger. L'objectif est ici d'obtenir la couleur sous le pointeur au moment où nous lançons le callback d'évènement. Cette couleur (RGB) nous servant également d'identifiant (UID), nous saurons quelle pile appeler.

Écrivons donc une fonction capable de nous retourner la couleur du pixel situé sous le curseur (c'est-à-dire aux coordonnées du curseur) sur la heatmap. nous propose une méthode simple,

1. getImageData(x, y, width, height)

qui prend en paramètres les coordonnées du point de départ et la dimension de la zone à analyser. Ici, nous n'avons besoin que de la zone située sous le curseur, soit 1px * 1px.

1. // La fonction utilise this comme défini au contexte canvas à observer
2. // (nous lui passerons celui de la heatmap), et les coordonnées.
3. function getUID(x, y) {
4. var pixelData = this.getImageData(x, y, 1, 1).data;
5. // retourne une chaîne formatée comme l'identifiant RGB-UID
6. return pixelData[0] + ':' + pixelData[1] + ':' + pixelData[2];
7. }

Télécharger

Maintenant que nous sommes capable de détecter l'élément que nous survolons avec le curseur, et que nous obtenons son RGB-UID, il ne nous reste plus qu'à appeler la pile d'évènement associée si elle existe. C'est la balise parente qui va s'en charger. Pour nous simplifier la vie [4], nous définissons une méthode d'appel globale (un trigger) que nous allons par la suite attacher à l'ensemble des évènements à supporter sur le nœud .

1. function eventsTrigger(e) {
2. // nous stockons dans pix l'UID de l'élément actuellement survolé
3. var pix = getUID.apply(CTX.map, pointerOffset.call($canvas, e))
4. , eventName = e.type
5. , uid;
6. // Cas particulier : nous utilisons `mousemove` pour gérer également
7. // les évènements mouseover et mouseout.
8. if (eventName === 'mousemove') {
9. // Nous commençons par boucler sur l'ensemble des éléments dessinés
10. for (uid in ELEMENTS) {
11. // si l'élément n'est PAS sous le curseur ET que son flag
12. // `isOver` est à true, alors nous déclenchons l'évènement
13. // `mouseout`
14. if (pix !== uid && ELEMENTS[uid].isOver) {
15. ELEMENTS[uid].isOver = false;
16. ELEMENTS[uid].fire('mouseout', e);
17. }
18. }
19. // Nous vérifions ensuite si le flag de l'élément survolé est à false.
20. // Si oui, nous déclenchons `mouseover` et passons le flag à true.
21. if (!ELEMENTS[pix].isOver) {
22. ELEMENTS[pix].isOver = true;
23. ELEMENTS[pix].fire('mouseover', e);
24. }
25. }
26. // Cas général ensuite, nous déclenchons l'évènement associé
27. ELEMENTS[pix].fire(eventName, e);
28. }
29. // Nous attachons ensuite à tous les évènements que nous souhaitons
30. // supporter sur `$canvas` la fonction de trigger. Au passage, nous
31. // isolons les évènements dans des namespaces spécifiques pour ne
32. // pas polluer le scope global et facilement les détacher si besoin.
33. $canvas.on('mousemove.heatmap, click.heatmap', eventsTrigger);

Télécharger

Terminé ! Notre nœud DOM fait désormais redescendre (un reverse bubbling dirons-nous) les évènements à ses éléments dessinés. Nous disposons là d'un système pleinement fonctionnel. Je vous propose un petit café pour savourer la conclusion à ce pas à pas.

It's just JavaScript

Tout ça pouvait sembler extrêmement complexe au premier abord, et la notion de heatmap n'est pas forcément simple à comprendre à la première lecture. Mais en découpant intelligemment notre code, nous avons successivement conçu [5] :

• Un système de dessin dans en doublon : le nœud principal dans le DOM, et la heatmap avec une génération à la volée d'identifiants basés sur des couleurs aléatoires ;
• Un système de gestion d'évènements sous forme de callbacks de type Pub-Sub, simple et élégant ;
• Un système d'appel et de bubbling intelligent des évènement au sein de ces stacks d'évènement, qui s'avère suffisamment léger pour ne pas plomber les performances des interactions utilisateur au sein du DOM.

Tout ça en utilisant un peu d'astuce et la puissance de JavaScript puisque, finalement, ce n'est que du JavaScript.

Pour conclure l'anecdote, cette implémentation que nous venons de réaliser ensemble est celle qui nous a permis de supporter l'intégralité notre interface dans IE8 avec l'aide de FlashCanvas.

Malgré son caractère quelque peu à la marge (ce n'est pas le genre d'implémentation que l'on réalise tous les jours), tout ceci constitue un excellent exercice d'architecture et de modularisation du code. J'espère que vous aurez pu en tirez quelque bénéfice et vous amuser autant que j'ai pris plaisir à le concevoir.

Une petite note avant de terminer : même si toute l'implémentation décrite ici est fonctionnelle et efficace, elle ne constitue pas encore une vraie librairie pour gérer des heatmaps en canvas de façon autonome. Il faudrait pour ça encapsuler toute la logique dans un objet JS, en n'exposant que les méthodes nécessaires (comme addElement()). C'est un bon exercice que je vous laisse réaliser. Pour les plus pressés, l'implémentation finale sous la forme d'une lib générique est disponible ici :).

À vous de jouer maintenant !

[1] De façon générale, pensez à systématiquement mettre en cache les éléments dont vous aller vous servir fréquemment. Vous y gagnerez en performance, en stabilité, et limiterez les consommations de mémoire excessives et inutiles.

[2] Si vous voulez voir à quoi ça ressemble, allez-y, injectez-le dans la page. Rainbow power et poneys garantis !

[3] jQuery propose une implémentation très élégante du modèle Pub-Sub avec sa solution de Callbacks. Vous pouvez très bien vous en servir mais, dans le cas présent, j'ai voulu l'implémenter manuellement pour détailler correctement le fonctionnement des piles d'évènements (et puis y'a pas que jQuery dans la vie, hein).

[4] Vous avez vu comme j'aime ces petites fonctions pratiques qui font qu'on ne tape jamais deux fois la même chose ?

[5] Pour les curieux, l'intégralité de l'implémentation décrite ici est disponible à cette adresse : https://gist.github.com/madsgraphic... ; ainsi qu'une autre version plus aboutie sous forme de librairie framework-agnostic : https://gist.github.com/madsgraphic...

Être toujours plus rapide, innover et mettre rapidement votre produit sur le marché, avoir un retour à court terme sur son investissement – C’est le leitmotiv des startups et des entreprises du Web. C’est ici que le Lean Startup et le déploiement continu sont efficaces. C’est aussi la raison de l’adaptation rapide et majeure des pratiques agiles. Nous pouvons concevoir au plus vite et de manière itérative en prenant en compte au fil de l’eau de la création du produit le retour des clients. 

Mais est-ce que cela est reproductible chez toutes les entreprises ? Est-ce que la vitesse de mise sur le marché (que l’on nomme aussi le TTM) est le facteur le plus important pour les entreprises ? Il faut aussi maintenir cette vitesse dans le temps, maintenir les coûts et fournir un produit de qualité, mais il y a aussi d’autres facteurs tels que la sécurité, la maintenabilité. Il faut les intégrer à des systèmes existants de l’entreprise et parfois conserver la compatibilité avec les anciennes versions qui sont chez vos clients, etc. 

Lire la suite de cet article …

Sketch est une application dédiée aux graphistes et designers qui recherchent un outil épuré et relativement spécifique au web. C’est avant tout un logiciel de dessin vectoriel dont les fonctionnalités, que nous aborderons par la suite, seront particulièrement adaptées au wireframing et au design d’application. Il n’est disponible que sur OSX au prix relativement raisonnable de 49$.

Étant à l’origine utilisateur d’un environnement Windows avec pour principaux outils les indémodables Photoshop et Illustrator, il a fallu me convaincre que Sketch serait une évolution et non un poids dans ma façon de travailler.

Lire la suite...