johanBleuzen

Quand on recherche midori sur internet, on tombe sur beaucoup de résultats différents, car le terme midori correspond à un navigateur web, un alcool à base de melon et surtout un petit framework JavaScript. Ce framework est bien moins connu que tous les autres librairies comme jQuery, Prototype ou Mootools pour ne citer que ces trois, mais il a l’avantage d’être très léger et modulable…

Présentation générale

En travaillant sur un autre projet, ou la taille des données transférés est primordial, j'ai pris le parti de me passer d'une librairie JavaScript pour utiliser du JavaScript pure. Mais j'ai vite déchanté lorsqu'il a fallut tester mes petites fonctionnalités sur IE. J'ai donc cherché un framework JavaScript léger, modulable et qui fonctionne avec tous les navigateurs.

Le framework Midori est celui qui me semblait le plus adapté après mes recherches, le framework que l'on télécharge sur le site pèse 53ko, une fois minifié il pèse 37ko et gzippé il ne pèse plus que 12ko. C'est le poids du framework lorsque l'on utilise toutes les fonctionnalités de la librairie, mais on peut encore diminuer le poids en supprimant les modules que l'on utilise pas...

Modularité

Midori est livré avec 10 modules, chaque module correspond à une fonctionnalité, voici un petit listing de ces modules et de ce qu'ils font :

• midori : le module "core" du framework, il contient les fonctionnalités de base pour chaque framework et c'est le seul module obligatoire,
• midoriAjax : un module pour effectuer des requêtes Ajax,
• midoriAutoComplete : un module qui fournit un système d'auto-completion,
• midoriDragAndDrop : un module pour gérer le drag and drop,
• midoriFX : un module qui contient quelques effets graphiques,
• midoriHistory : un module qui permet de gérer un pseudo historique des états d'une page web,
• midoriInlineEdit : un module pour éditer en "inline" du contenu sur une page,
• midoriPopUp : un module pour afficher un menu popup (un menu, pas une fenêtre),
• midoriTab : un module qui permet de gérer un système d'onglet,
• midoriTableSelection : un module pour faciliter la sélection dans un tableau.

Il est fort probable que vous n'ayez pas besoin de tous ces modules pour votre projet. Pour supprimer un module, il suffit donc d'éditer le source du projet et simplement de supprimer le module et ainsi de gagner du poids sur la taille du framework. C'est aussi simple que cela et rend le framework adaptable à chaque besoin.

Utilisation

L'utilisation du framework n'est pas compliquée et tout comme jQuery, il est possible d'éxecuter le code directement à la fin du chargement de la page :

midori.addEventListener(window, 'ready', function (e) {
	// Code à executer
});

On peut sélectionner un élément en spécifiant un #ID dans la page très simplement :

midori.get("#mon-element-avec-ID");

Une fois cet élément récupéré, on travaille avec du JavaScript "classique", on ne manipule pas un objet comme on le ferai avec jQuery.

En revanche, sélectionner plusieurs éléments et leur affecter un traitement, c'est un peu plus compliqué et verbeux, bien que cela ne soit pas spécialement difficile

midori.get('.ma-classe-avec-beaucoup-doccurrences').apply(function (o) {
	midori.addEventListener(o, 'click', function (e) {
		alert("clique spotted");	
	});
});

Dans cet exemple, on sélectionne tous les éléments selon la classe spécifiée et on leur affecte le traitement lors d'un clique, avec jQuery, ce traitement se serait fait en une seule ligne.

Pour utiliser un autre module, il suffit simplement de préfixer la méthode par le module que l'on va utiliser. Par exemple pour utiliser la fonction "scrollTo" du module "midoriFX", il faudra utiliser le code suivant :

midoriFX.scrollTo("#ID-de-l-endroit-a-scroller");

Conclusion

Midori est une alternative sympathique pour des projets ou l'on a pas besoin de toute la puissance de jQuery ou d'un autre framework qui ont un poids conséquent, lorsque les traitements que l'on veut implémenter sont assez simples, midori peut amplement suffire. Cependant, il est important de noter qu'il est impératif d'avoir des connaissances de JavaScript de bases pour les traitements qui ne sont pas implémentés par Midori.

Néanmoins, voici quelques petits points noirs de cette librairie :

• Pas eu de releases depuis quelques mois la dernière date de juin 2010,
• Pas d'informations sur les tests navigateurs effectués,
• Peu de visibilité sur le futur.

Lien : Site officiel Téléchargement : midorir.js