Keynote de Damien Bruyndonckx, présenté le 19 juin 2014 à la Feweb

1. D a m i e n B r u y n d o n c k x
19 Juin 2014
5 things you might
not know about
jQuery

2. Damien Bruyndonckx
• Coordinateur eLearning à l’Ihecs
• Adobe Education Leader
• Adobe Certified Instructor
2
• Author for Packt Publishing
• Freelance instructor and
consultant
• Sound Engineer

3. Titre de cette présentation
Une fonctionnalité de jQuery méconnue
•Elle ouvre la porte à des fonctions
avancées.
•Elle permet de comprendre le
fonctionnement de nombreuses
autres fonctionnalités.
3

4. D a m i e n B r u y n d o n c k x
19 Juin 2014
1 thing you might not
know about jQuery…
…and the many things it allows you to do!

5. jQuery Deferreds
5

6. Agenda
•Comprendre les jQuery Deferreds
•Exemple simple
•les deferreds dans le reste de la
bibliothèque
6

7. 1 thing you might not know about jQuery… and
the many things it allows you to do!
19 Juin 2014
Comprendre les
deferrds

8. Au restaurant
1. Plus de place au resto!
2. Le serveur vous encode
3. Le serveur vous donne un
récepteur
4. Vous allez vous promener
5. Quand une table est prête, le
serveur envoie un signal au
récepteur
6. Le récepteur vibre…
retournez au restaurant!
8

9. Traduction Deferreds
1. Plus de place au resto!
2. Le serveur crée un Deferred
3. Le serveur vous retourne une
promesse
4. D’autres actions ont lieu
5. Quand une table est prête, le
serveur résout la promesse
6. Le récepteur vibre… exécutez
des actions en réponse à la
résolution de la promesse
9

10. Caractéristiques d’un deferred
• Toujours lié à une promesse.
• Représente une transaction dont on ne
connaît ni le résultat ni la durée.
• C’est celui crée le Deferred qui peut
résoudre ou rejeter la promesse.
• Le détenteur de la promesse exécute une
(des) action(s) en réaction au
changement de statut de la promesse.
10

11. 1 thing you might not know about jQuery… and
the many things it allows you to do!
19 Juin 2014
Exemple simple

12. API - Création d’un deferred
var deferred = $.Deferred()!
return deferred.promise()
12
Par défaut, les Deferreds ainsi créés ont
un statut “pending”

13. API - Résoudre, rejeter, notifier
deferred.resolve()!
deferred.reject()!
deferred.notify()
13
.done()!
.fail()!
.progress()!
.always()!
.then()
Permet de faire évoluer le statut du deferred
• pending -> resolved
• pending -> rejected
Une fois résolu ou rejeté, un deferred ne peut plus
redevenir “pending”

14. API - Callbacks multiples
Les fonctions de rappel sont exécutées
dans l’ordre où elles ont été attachées.
14
something()!
! .done(…).done(…)!
! .fail(…).fail(…)

15. Demo 1
•Timers revisités
•Renvoyer des données
15

16. API - grouper les promesses
when(deferred1, deferred2, ..,
deferredn).done().fail().always()
16
.done() = appelé si tous les Deferreds sont “resolved”
.fail() = appelé si un des Deferreds est “rejected”
.always() = appelé quand plus aucun Deferred n’est
“pending”

17. Demo 2
•Grouper les promesses avec when()
•Utilisation de then()
17

18. 1 thing you might not know about jQuery… and
the many things it allows you to do!
19 Juin 2014
Les deferreds dans
la bibliothèque -
AJAX

19. AJAX
•Depuis jQuery 1.5 AJAX utilise les
Deferreds et les promesses
•Ancienne API toujours valable
•Toutes les fonctionnalités des
Deferreds disponibles dans Ajax
19

20. Demo 3
•Réécrire Ajax à la façon Deferreds
•Grouper les requêtes Ajax avec
When()
20

21. 1 thing you might not know about jQuery… and
the many things it allows you to do!
19 Juin 2014
Les deferreds dans
la bibliothèque -
Animations

22. Animations
Chaque objet jQuery est un Deferred et
implémente les promesses!!
22
$(‘div’).promise()
•La promesse est résolue quand toutes
les animations sur l’(les)objet(s)
sélectionné(s) sont terminées

23. Animations
Possibilité d’écrire des callbacks façon
Deferreds sur les éléments animés!
23
$(‘div’).fadeIn(200, function(){doSomething})
est équivalent à
$(‘div’).fadeIn(200).promise().done(function()
{doSomething})

24. Animations
•Possibilité de grouper des animations
avec when()
➡possibilité de réagir à l’issue d’un groupe
d’animations.
•Possibilité de grouper des animations
avec when()
24

25. Démo 4
•Fonction de rappel sur les animations
façon Deferreds
•Grouper les animations avec when()
25

26. MErci
Damien Bruyndonckx
26
@damienbkx
www.dbr-taining.eu
damien.bruyndonckx@gmail.com