Version majeure, jQuery 1.5 révolutionne ses méthodes asynchrones

[danielhagnoul]

jQuery 1.5 disponible en version finale
Le framework JavaScript révolutionne ses méthodes asynchrones

Introduction de Idelways


L'équipe de développement de JQuery vient d'annoncer la disponibilité en version finale de la version 1.5.

Il s'agit d'une version majeure qui apporte son lot de nouveautés, qui améliore les performances et qui, par l'introduction de la nouvelle l'API Deferred, révolutionne les méthodes asynchrones du populaire framework JavaScript.

Le module Ajax a également subi une réécriture complète. Un grand nombre de lacunes du module ont été corrigées et la cohérence entre les méthodes de l'API améliorée.

Autre nouveauté notable, l'introduction de $.sub() qui crée une nouvelle copie de jQuery dont les propriétés et méthodes peuvent être modifiées sans affecter l'objet jQuery original.

Pour comprendre le fonctionnement et l'utilisation des nouveautés de cette version, lire ci-après, l'étude réalisée en collaboration entre danielhagnoul et gwinyam de la rubrique Développement Web de Développez.com.

Pour tester cette version, il suffit d'inclure un appel au jQuery Code Server dans votre page web :

Code :

<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.min.js"></script>

Voir : Comment installer la bibliothèque jQuery ?


@danielhagnoul : Sur une page web, seul l'utilisateur doit décider de l'enchaînement des actions, c'est pourquoi la qualité du code asynchrone d'une bibliothèque JavaScript est primordiale pour offrir au développeur un maximum de possibilités et de performances.

En provenance du vocabulaire de la programmation concurrente, nous parlerons désormais de promesses (Promises) et d'objets différés (Deferred Objets).

L'API Deferred de jQuery est basée sur le concept de promesses qui fournissent une interface générique pour la réalisation d'une action asynchrone.

Les promesses permettent :

• de traiter séparément les actions entreprises lors d'un appel asynchrone, comme on le ferait pour un appel synchrone,
• d'appeler une fonction avec les arguments voulus sans s'inquiéter de savoir s'il s'agit d'un appel synchrone ou asynchrone, car les complications générées par l'appel asynchrone sont prises en charge par la promesse.

@gwinyam : Au passage, l’équipe de développement en a profité pour améliorer sérieusement les performances sur les méthodes .children(), .prev() et .next().


Deferred

@gwinyam : jQuery.Deferred est un objet chaînable qui permet d’enregistrer de nombreuses fonctions de type callback, les appeler et transmettre l’information de réussite ou d’échec de toute fonction, qu’elle soit synchrone ou asynchrone.

Un objet Deferred est initialisé dans l’état “non-résolu”. Tout callback ajouté par .then(), .done() ou .fail() sera exécuté ultérieurement.

Appeler la fonction .resolve() ou .resolveWith() passe l’objet Deferred à l’état “résolu” et exécute immédiatement les callbacks définis.

L’appel à la fonction .reject() ou à .rejectWith() passe l’objet à l’état “rejeté” et exécute les callbacks correspondants.

Une fois entré dans un de ces deux états, il y reste.

Des fonctions de callbacks peuvent être ajoutées qui seront alors immédiatement exécutées selon si elles sont ajoutées avec .then(), .done() ou .fail().

Appeler une seconde fois les fonctions .resolve(), .resoleWith(), .reject() ou .rejectWith() n’aura aucun effet et ne provoquera donc pas une seconde exécution des fonctions callbacks liées.

Dans les nombreux cas où l’API de jQuery retourne un objet Deferred, tels que $.ajax() ou $.when, vous n’aurez à utiliser que les fonctions .then(), .done() et .fail() pour ajouter des callbacks à la file du Deferred. L’API interne de jQuery se chargera elle-même d’appeler les fonctions .resolve() et .reject(), exécutant par la même les callbacks appropriés.

L’objet Deferred dispose également de deux autres méthodes permettant le contrôle de son statut et qui renvoient un booléen : .isResolved() et .isRejected(). La première permet de savoir si l’objet est dans l’état “résolu”, la seconde dans l’état “rejeté”.

AJAX

@danielhagnoul : Le module AJAX a subi une réécriture complète, elle permet de corriger un grand nombre de lacunes qui existaient dans l'ancien système Ajax avec un niveau plus élevé de cohérence des méthodes de l'API.

Le premier changement que vous verrez dans le composant AJAX est sans doute la nouvelle signature: $.ajax ([url], [options]). Cette écriture permet de récupérer une URL avec les options par défaut plus facilement. Bien sûr, ce n'est que la pointe de l'iceberg, car $.ajax() a été réécrit entièrement pour fournir de nouvelles fonctionnalités.

$.ajax (ou $.get, $.post, etc) retourne maintenant un objet jXHR qui assure la cohérence de l'objet XMLHttpRequest sur toutes les plateformes et vous permet d'effectuer des tâches précédemment impossibles comme l'abandon de demandes JSONP.

Les objets XHR originaux sont cachés à l'utilisateur au profit d'un nouvel objet spécifiquement jQuery. Cet objet (jXHR) fournit les propriétés et les méthodes pour définir et obtenir des en-têtes, les demandes d'annulation, l'état de la transaction, les réponses au format XML et texte. Mais contrairement à l'objet XHR original, il agit également comme une "promesse" (Promises).

Une "promesse" (promises) permet d'ajouter des fonctions de rappels (callback) pour gérer le succès et l'erreur d'une transaction même après son exécution.

Ajax est maintenant beaucoup plus extensible — ce qui vous permet d'attacher toutes sortes de gestionnaires de données, de filtres et de transports.

$.ajax() dispose de trois moyens d'étendre ses fonctionnalités pour l'envoi, la réception et la gestion des requêtes AJAX:

Prefilters : Généralisé les fonctions de rappels (callback) du type beforeSend pour gérer des options personnalisées ou modifier celles qui existent déjà.

Converters : Généralisé les fonctions de rappels (callback) du type dataFilter que l'on appelle en réponse à un type de données particulier en cours de réception qui diffère de ce qui était attendu.

Transports : Nouveau dans 1.5, ils sont utilisées en interne pour émettre des requêtes par $.ajax()

Ces changements devraient conduire à la création de nouveaux plugins.

$.sub()

@danielhagnoul : $.sub() crée une nouvelle copie de jQuery dont les propriétés et méthodes peuvent être modifiées sans affecter l'objet jQuery original.

Divers

@danielhagnoul : Pour la compression du code, l'équipe a choisi d'abandonner “Google Closure Compiler” au profit de “UglifyJS”.

Cette version corrige 83 bugs et ferme 460 tickets.

Liste des navigateurs compatible avec la suite de tests, 4437 tests, de jQuery 1.5, :

• Safari 5.0.3 / 4.0.5 / 3.2.3 / 3.1.2
• Opera 11,01 / 11 / 10,63 / 10,54 / 10,10 / 9,64
• IE 6 / 7 / 8
• Firefox 4.0b9 / 3.6.13 / 3.5.11 / 3.0.19 / 2.0.0.20
• Chrome 8.0.552.215 / 8.0.552.237 / 9.0.597.67 Beta / 10.0.642.2 Dev

Feuille de route (roadmap) :

• 2011-01-31 : jQuery 1.5 : la version finale.
• 2011-02-XX : jQuery 1.5.1 : la première version de maintenance.
• 2011-04-xx : sortie de la feuille de route officielle pour jQuery 1.6

Bibliographie

• http://blog.jquery.com/
• http://api.jquery.com/category/version/1.5/
• http://en.wikipedia.org/wiki/Promise_(programming)
• http://fr.wikipedia.org/wiki/Programmation_concurrente
• http://plugins.jquery.com/project/deferred
• https://github.com/sifu/jquery-deferred
• http://jaubourg.net/?tag=deferred
• http://dojotoolkit.org/api/1.5/dojo/1.2/dojo.Deferred
• http://www.sitepen.com/blog/2010/05/...-deferred-1-5/
• http://api.jquery.com/jQuery.sub/
• http://api.jquery.com/category/deferred-object/

[grunk]

Les Deferred object on l'air vraiment sympa notamment associé à when(). Ca va sacrément simplifier le code.

Au niveau de la réecriture du module Ajax , le problème de fuite mémoire à t'il été résolu ?

[gwinyam]

Les rédacteurs de la doc officielle ne sont pas trop en accord avec toi, ça ne va pas alléger le code, par contre, pour la gestion des appels/retours, il est clair et net que ça sera beaucoup plus propre et clair.

Pour ce qui est de la fuite mémoire, t'as un numéro de ticket sous la main? Je me souviens vaguement d'une histoire dans ce genre mais j'ai vu passer tellement d'infos, de bugs corrigés ces derniers temps que je suis dans le flou.

[grunk]

Envoyé par gwinyam

pour la gestion des appels/retours, il est clair et net que ça sera beaucoup plus propre et clair.

C'est ce que je voulais dire par simplifier le code

Envoyé par gwinyam

Pour ce qui est de la fuite mémoire, t'as un numéro de ticket sous la main? Je me souviens vaguement d'une histoire dans ce genre mais j'ai vu passer tellement d'infos, de bugs corrigés ces derniers temps que je suis dans le flou.

J'ai retrouvé un ticket qui abordais le sujet : http://bugs.jquery.com/ticket/6242

Il précise que le code n'existe plus donc que forcément le bug non plus. Reste à voir à l'usage si c'est bien le cas.

[gwinyam]

De toute façon, il y aura bien un autre bug un jour ou l'autre. On est bien placés pour savoir qu'il y aura toujours un nouveau bug quelque part.

Pour info, j'ai publié un tuto sur mon site à propos de .sub() : http://www.mathieurobin.com/2011/02/...te-jquery-1-5/

Je le mettrai sur Developpez ce weekend.

[danielhagnoul]

Bonsoir

AJAX, exemple d'utilisation : http://www.developpez.net/forums/d10...s/#post5756167

Cet exemple contient une remarque importante sur les problèmes causés par : Cross-Origin Resource Sharing

[gwinyam]

Bonjour à tous,

J'ai publié ce matin sur mon blog un tuto à propos de Deferred : http://www.mathieurobin.com/2011/02/...te-jquery-1-5/

J'essaierai au possible de le mettre sur Developpez ce weekend en même temps que celui sur .sub().

[danielhagnoul]

$.sub()

Crée une copie de l'objet jQuery. Les propriétés et les méthodes de la copie peuvent être modifiées sans affecter l'original.

Notez bien que toutes les méthodes de la copie pointent toujours vers l'objet original. La gestion des événements se fait toujours à travers l'original, de même pour la gestion des données (data). Les requêtes Ajax et les événements se dérouleront toujours par l'intermédiaire de l'objet jQuery original.

Il y a deux cas d'utilisation spécifiques pour lesquels $.sub() a été créé :

• fournir un moyen facile pour modifier les méthodes jQuery sans détruire complètement les méthodes d'origine,
• donner un moyen pour faciliter l'encapsulation et pour définir un espace de noms pour les plugins jQuery.

On travaille à l'intérieur d'une clôture jQuery.sub().
Voir : Clôturez jQuery !

Exemples d'utilisation de jQuery.sub()

[nico78200]

Pour la partie sur la méthode ajax(), pensez vous que mon problème pour poster un array soit lié?

Voir ici:

http://www.developpez.net/forums/d10...eys-variables/

Nico

[gtraxx]

sa à l'air vraiment bien mais les anciens scripts (surtout JSON) de la version 1.4.4 ne tourne plus chez moi.
En plus pas moyen de savoir pourquoi, y a-t-il des changements à faire lors d'une simple requête json sous cette version ?
Je vais ouvrir un thread pour l'occasion
Une fois le problème résolu j'adapterai alors avec les nouvelles fonctionnalités

[gwinyam]

Une requête JSON? Du genre getJson? Comme dit précédemment, tout le module Ajax a été revu pour amélioration de performances, amélioration de la gestion des retours etc...

[gtraxx]

L'erreur étais simple, jvalidate provoquais le plantage de mes requêtes mais heureusement que j'ai trouvé cette info sur le site de jQuery sinon je chercherai encore
Bon maintenant va falloir joué avec l'API
Des tutos sur l'extension de la partie ajax ?
concernant crossDomain, statusCode,et surtout when et then

[gwinyam]

Je sais que t'as eu ta solution, c'est moi qui t'ait répondu sur ton sujet dédié

Pas de tuto sur la partie Ajax en tout cas de mon côté. Regarde du côté de la FAQ jQuery, danielHagnoul a mis une QR des plus intéressantes à ce sujet, ici : http://www.developpez.net/forums/d89...y/#post5761066

[gtraxx]

Juste pour bien comprendre :
jqXHR c'est quoi comme paramètre exactement ?
On voit sur l'exemple de danielhagnoul:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
$.getJSON('dateJSON.js', function(data, textStatus, jqXHR) {
	console.log(data, textStatus, jqXHR);
 
	// succès de la transaction, on doit traité le contenu de data
 
}).error(function(jqXHR, textStatus, errorThrown){
	console.log(jqXHR, textStatus, errorThrown);
 
	// échec de la transaction, gérer la catastrophe
 
}).complete(function(jqXHR, textStatus){
	console.log(jqXHR, textStatus);
 
	// la transaction s'est terminée par un succès ou par un échec
});

Désole j'ai l'attitude blond
Pour revenir à l'exemple, l'utilisation de getJSON avec jquery 1.4 équivaut à:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$.ajax({
		url: 'dateJSON.js',
		dataType: 'json',
		type: "get",
		async: true,
		cache:false,
                error: function(){
                       alert("theres an error with AJAX");
                },
		beforeSend: function(){},
		success: function(j) {}
});

Sans pour autant jouir des nouveautés sa va de soit, pour ma part j'ai tester statusCode:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
$.ajax({
		url: 'dateJSON.js',
		dataType: 'json',
		type: "get",
		statusCode: {
			0: function() {
				console.error("jQuery Error");
			},
			401: function() {
				console.warn("access denied");
			},
			404: function() {
				console.warn("object not found");
			},
			403: function() {
				console.warn("request forbidden");
			},
			408: function() {
				console.warn("server timed out waiting for request");
			},
			500: function() {
				console.error("Internal Server Error");
			}
		},
		async: true,
		cache:false,
                error: function(){
                       alert("theres an error with AJAX");
                },
		beforeSend: function(){},
		success: function(j) {}
});

Mais bon je préfère bien comprendre la nouvelle API pour avoir de meilleur résultat et informations de requête, plus de possibilité .
Ce qui serai intéressant c'est de palier à ce problème :

Si le fichier JSON contient une erreur de syntaxe, la demande échoue généralement sans signaler aucune erreur.

Ce qui manque c'est l'analyse du JSON et le retour d'une erreur de syntaxe éventuelle

[danielhagnoul]

La version 1.5.1 est disponible !

Voir : http://www.developpez.net/forums/d10...-1-disponible/