Malheureusement, des problèmes de performance se sont rapidement manifestés, l’animation était loin d’être fluide dans certains cas. Nous avons donc examiné la classe et voici la partie du code qui a attiré notre attention :

startZoom: function(){
	this.position = this.small.getPosition();
	this.timer = this.zoom.periodical(10, this);
	this.big.fade('in');
},
 
//....
 
zoom: function(){
	if(!this.dstPos) return;
	var steps = this.options.smooth;
	var current = {
		left: this.big.getStyle('left').toInt(),
		top: this.big.getStyle('top').toInt()
	};
	var dst = {
		left: parseInt((this.dstPos.x - this.position.x) * (1 - this.bigSize.width/this.smallSize.width)),
		top: parseInt((this.dstPos.y - this.position.y) * (1 - this.bigSize.height/this.smallSize.height))
	};
	var now = {
		left: current.left - (current.left - dst.left)/steps,
		top: current.top - (current.top - dst.top)/steps
	};
	this.big.setStyles(now);
}

La méthode zoom() est exécutée tous les centièmes de secondes avec à chaque fois deux appels à getStyle(), une opération plutôt exigeante en ressource,  sur lesquels est appliqué toInt(). Nous avons donc modifié le script de façon à limiter le nombre d’opérations effectuées dans la méthode zoom().

startZoom: function(){
	this.position = this.small.getPosition();
 
	/** precalculations **/
	this.ratio = {
		x : 1 - this.bigSize.width / this.smallSize.width,
		y : 1 - this.bigSize.height / this.smallSize.height
	};
	this.current = {
		left: this.big.getStyle('left').toInt(),
		top: this.big.getStyle('top').toInt()
	};
 
	this.timer = this.zoom.periodical(10, this);
	this.big.fade('in');
},
 
//.....
 
zoom: function(){
	if(!this.dstPos) return;
	var steps = this.options.smooth;
 
	var current = this.current;
 
	var dst = {
		left: parseInt((this.dstPos.x - this.position.x) * this.ratio.x),
		top: parseInt((this.dstPos.y - this.position.y) * this.ratio.y)
	};
 
	this.current.left-= (current.left - dst.left) / steps;
	this.current.top-= (current.top - dst.top) / steps;
 
	this.big.setStyles(this.current);
}

Pour estimer l’impact des modifications, nous avons utilisé cette incontournable extension Firefox qu’est Firebug. Si comme moi vous travaillez régulièrement sur des scripts JS, il est probable que vous connaissez déjà l’objet console ainsi que sa méthode log() qui permet d’afficher la valeur d’une ou plusieurs variables. Les fonctions à utiliser dans notre cas sont console.time(string) et console.timeEnd(string). La première initialise un timer identifié par la chaîne de caractères donnée, tandis que la seconde permet de le stopper et d’en afficher la valeur. Nous avons procédé comme suit : mis les calculs effectués dans la méthode zoom() dans une boucle avec 10000 itérations, initialisé le timer avant la boucle et affiché sa valeur après. Au final, la fonction originale prenait entre 500 et 600ms pour s’effectuer sur Firefox avec Firebug activé, la version modifiée seulement entre 9 et 12ms. Nos modifications ont été intégrées dans la version 1.8 de la classe disponible sur la forge MooTools.

Autres fonctions utiles pour optimiser votre code, généralement lorsque vous ne parvenez pas à identifier le bottleneck du script : console.trace(), console.profile(string), console.profileEnd() et console.count(string). Voir l’API Console sur le wiki de Firebug.

Inside StatusNet: How Identi.ca Works, par Evan Prodromou : Une conférence intéressante sur la plus populaire plateforme de microblogging opensource par son lead developper. La première partie (« The problem ») fait un peu office de discours politique, mais les deux suivantes (« The requirements » et « The architecture ») apportent tout ce que l’on peu attendre de ce genre de conférence, à savoir une explication très claire de la philosophie et de la réalisation technique des aspects les plus importants du système.

MooTools as a General Purpose Application Framework, par Christoph Pojer : Une présentation rapide du framework javascript MooTools et de ses principaux projets satellites.

Building High Performance Web Applications with the Dojo Toolkit, par Dylan Schiemann : Une présentation d’un autre framework javascript, bien plus poussée que la précédente, mais malheureusement trop théorique. Je doute sincèrement que cela donne envie à qui que ce soit d’utiliser le framework. Néanmoins une conférence bien menée et instructive.

Blaming the unknown, a constructive approach to technology, par Guiseppe Maxia : Une très courte présentation rappelant quelques principes de base servie avec humour, quelques phrases chocs (« Once upon a time I did not make mistakes. Then, I grew up. And found them. ») et un chaleureux éloge à cette vertu qu’est la curiosité.

class Test
{
	private $private = 1;
	protected $protected = 1;
	public $public = 1;
	const constante = 1;
}
 
$object = new Test();
echo http_build_query($object);

Résultat :

public=1

Le résultat est bien celui attendu, les propriétés private et protected sont bien exclue puisque hors du scope général. Maintenant, imaginons que pour une raison ou une autre vous désiriez que l’objet lui même renvoie la chaîne de requête qui lui correspond :

class Test
{
	private $private = 1;
	protected $protected = 1;
	public $public = 1;
	const constante = 1;
 
	static public $stat = 1;
 
	public function query()
	{
		return http_build_query($this);
	}
}
 
$object = new Test();
echo $object->query();

Résultat :

private=1&protected=1&public=1

La fonction http_build_query() exécutée dans le scope de l’objet a accès à toutes ses propriétés quelque soit leur visibilité. Je ne sais pas s’il s’agit là d’un bug ou du comportement voulu par les développeurs de PHP, mais en pratique ce n’est vraisemblablement pas ce que l’on aurait désiré obtenir. Faisons un dernier test avec une classe parent et un classe enfant :

class TestParent
{
	private $parentPrivate = 1;
	protected $parentProtected = 1;
	public $parentPublic = 1;
}
 
class Test extends TestParent
{
	private $private = 1;
	protected $protected = 1;
	public $public = 1;
	const constante = 1;
 
	static public $stat = 1;
 
	public function query()
	{
		return http_build_query($this);
	}
}
 
class TestChild extends Test
{
	private $childPrivate = 1;
	protected $childProtected = 1;
	public $childPublic = 1;
}
 
$object = new TestChild();
echo $object->query();

Résultat :

childProtected=1&childPublic=1&private=1&protected=1&public=1&parentProtected=1&parentPublic=1

Les propriétés public et protected définies dans les classes parents et enfants sont reprises, ainsi que toutes les propriétés définies dans la classe déclarant la méthode faisant appel à http_build_query. Rien d’étonnant là dedans au vu des résultats précédents, mais ce comportement peut être dangereux si l’on n’en a pas conscience.

Conclusion : Gardez à l’esprit que http_build_query utilise le scope courant et, par mesure de précaution, éviter de l’utiliser avec directement avec des objets. De mon point de vue, implémenter une méthode qui permette à l’objet de retourner un array contenant les propriétés devant être présentes dans la requête est sans doute la meilleure solution vu que cela permettra de réellement profiter des possibilités offerte par la POO.

• Pas d’appel bloquant à du json en plein milieu du chargement de la page
• Pas de complexité à gérer au niveau du serveur (ni appel curl, ni gestion de cache)
• Liberté totale quant au style à appliquer au widget
• Liberté totale quant au informations affichées et mises en lien
• Indépendance par rapport à la plateforme de microblogging
• Personnalisation aisée des liens permettant d’utiliser des services tiers
• Protection contre les injections HTML / cross-scripting

Par défaut, la plugin peut être utilisé avec Twitter et tout service basé sur la plateforme StatusNet (anciennement Laconica) comme par exemple Identi.ca et Emote.in, mais l’ajout de nouveaux services peut aisément être effectué. Nous aurions apprécié pouvoir ajouter Jaiku à la liste des services supportés, mais celui-ci souffre actuellement d’un bug (issue 30) empêchant toute utilisation via javascript. Une correction a bien été effectuée au niveau du JaikuEngine mais ne semble pas avoir été appliquée sur le site. Il va sans dire que nous ajouterons la possibilité d’utiliser ce service à microB dès que cela sera possible. Les services Qaiku et Emote.in devraient eux être ajoutée dans la prochaine version du plugin.

L’utilisation de la classe prend tout son sens lorsque vous désirez utiliser des services tiers pour les tags et utilisateurs. microB a en effet été conçu de façon à rendre ce genre de modification réalisable en une seule ligne de code. Dans l’exemple suivant, nous utilisons Twubs.com et Tweeps.info pour lier les tags et utilisateurs :

microB.services.twitter.hashUrl = 'http://twubs.com/{hash}';
microB.services.twitter.userUrl = 'http://tweeps.info/profile/{user}';

Liens

• Téléchargement sur mootools/forge
• Documentation sur github
• Démo basique

Todo

• Ajouter le support des listes sur Twitter
• Ajouter le support des groupes sur identi.ca
• Ajouter le support de Qaiku et Emote.in

Known issues

• Un problème mineur d’affichage de certains caractères spéciaux lié à l’encodage inconsistant du Json du côté de Twitter (voir cette issue).