JavaScript pour le
développeur Java
Christophe Jollivet
Christophe Jollivet
• Neurobiologiste	

• Informaticien	

• Homme de communauté	

!

• @jollivetc
Sondages
Qui connait JavaScript ?
Autrement qu’un
copier-coller du web ?
Les autres, qui se dit
qu’il devrait apprendre
JavaScript ?
Pourquoi JavaScript ?
Atwood Law
• «Any application that can be written in
JavaScript, will eventually be written in
JavaScript»	


• http://www...
J’apprend JavaScript
«JavaScript is the only
language that people feel they
don’t need to learn to use it»	

Doug Crockford
Java is to JavaScript
Java is to JavaScript
What ham is to hamster
http://blog.movereem.nl/images/javascript-the-good-parts-the-definitive-guide.jpg
m/
.co
et
n

ttp
h

lu
vo
.re
ks
oo
jsb
://
Tour de JavaScript
Types
Types
• Number, String, Boolean, undefined	

• Object, function	

• Faiblement typé
Number
• 64 bits floating point	

• IEEE-754 (aka Double)	

• Ecriture littérale 	

• 1.024e+3 === 1024	

• Méthodes (toExp...
valeurs approximatives
valeurs approximatives
(0.1 + 0.2) + 0.3 === 0.1 + (0.2 + 0.3)
valeurs approximatives
(0.1 + 0.2) + 0.3 ALSE + (0.2 + 0.3)
=== 0.1

F
valeurs approximatives
(0.1 + 0.2) + 0.3 ALSE + (0.2 + 0.3)
=== 0.1

F

9007199254740992 === 9007199254740992 + 1
valeurs approximatives
(0.1 + 0.2) + 0.3 ALSE + (0.2 + 0.3)
=== 0.1

F

9007199254740992 ===E
RU 9007199254740992 + 1

T
Objet
Objet
Objet
• Container de propriétés avec un nom et une
valeur
Objet
• Container de propriétés avec un nom et une
valeur

• nom de propriété est une string y compris ""
Objet
• Container de propriétés avec un nom et une
valeur

• nom de propriété est une string y compris ""
• propriété est ...
Déclaration objet
Déclaration objet
Déclaration objet
Déclaration objet
Déclaration objet
Déclaration objet
Déclaration objet

Classe anonyme
Déclaration d’objet
Déclaration d’objet
Déclaration d’objet
Déclaration d’objet
Accès aux valeurs
Objet et héritage
Création d’objet
Problème
unRectangle
longueur
largeur
surface

anotherRectangle
longueur
largeur
surface
Problème
Occupation mémoire
unRectangle
longueur
largeur
surface

anotherRectangle
longueur
largeur
surface
Héritage par prototype
• Un objet hérite directement d’un autre
objet, il n’y a pas de notion de classe	


• On place les ...
Création d’objet
Solution
unRectangle

anotherRectangle

longueur

longueur

largeur

largeur

surface
Prototype
Résolution de propriété
• Se fait en remontant la chaîne de prototype	

• il est possible de surcharger une propriété
Extension
• Ajout d’une méthode dans un prototype	

• la méthode est alors disponible pour toutes
les instances existantes...
for in
• itérateur sur les propriétés de l’objet

Les propriétés du prototype sont listées
hasOwnProperty
• TRUE si la propriété est à l’objet et pas au
prototype

Attention si foo a une propriété ‘hasOwnProperty’
Introspection
Fonctions
Fonction

Conserve une référence sur son
contexte de création
Fonction

Conserve une référence sur son
contexte de création
Fonction

Méthode statique 	

utilitaire
Conserve une référence sur son
contexte de création
Arguments
Arguments
Arguments
•

Il n’y a pas d’erreur si le nombre d’arguments
et paramètres ne correspondent pas
Arguments
•

Il n’y a pas d’erreur si le nombre d’arguments
et paramètres ne correspondent pas

•

arguments contient la l...
Arguments
Arguments

varargs
apply

• Permet l’invocation d’une fonction en lui
passant un contexte et des paramètres
Apply
This
4 patterns
• méthode	

• fonction	

• new	

• apply
this et méthode
• pattern : bar.foo()	

• this référence l’objet contenant la méthode	

• binding à l’invocation
this et fonction
• pattern : foo()	

• this est l’objet global, même si la fonction
est déclarée dans une méthode
this et fonction
this et fonction

Pollution de l’espace global
this et fonction
this et fonction
this et fonction
this et new
• pattern : var bar = new Foo();	

• création d’un objet avec lien au prototype
de la fonction et this pointe ...
this et new
this et new
this et new
this et apply
• pattern : foo.apply(bar, args);	

• this est lié à bar
Apply
Coercition de type
Coercition de type
Coercition de type
• Forcer le type d’une variable
Coercition de type
• Forcer le type d’une variable
• == fait la coercition de type
Coercition de type
• Forcer le type d’une variable
• == fait la coercition de type
• === ne fait pas la coercition de type
Coercition de type
• '1' ==1
• '1'===1

TRUE
FALSE
Coercition de type
Coercition de type
• false == 'false'

FALSE
Coercition de type
• false == 'false'
• false == '0'

FALSE
TRUE
Coercition de type
• false == 'false'
• false == '0'
• " trn " == 0

FALSE
TRUE
TRUE
Coercition de type
• false == 'false'
• false == '0'
• " trn " == 0
• ",,," == new Array(4)

FALSE
TRUE
TRUE
TRUE
Coercition de type
• false == undefined
• false == null
• null == undefined

FALSE	

FALSE	

TRUE
Coercition de type
Coercition de type
• if( foo === null || foo === undefined )
Coercition de type
• if( foo === null || foo === undefined )
• if( foo == null )
Coercition type (bonus)
Coercition type (bonus)
• foo=+foo
Coercition type (bonus)
• foo=+foo
• foo = parseInt(foo,10)
Coercition type (bonus)
• foo=+foo
• foo = parseInt(foo,10)
• foo = parseFloat(foo,10)
Coercition type (bonus)
‘10.2a’

• foo=+foo
• foo = parseInt(foo,10)
• foo = parseFloat(foo,10)
Coercition type (bonus)
‘10.2a’

• foo=+foo
• foo = parseInt(foo,10)
• foo = parseFloat(foo,10)

NaN
Coercition type (bonus)
‘10.2a’

• foo=+foo
• foo = parseInt(foo,10)
• foo = parseFloat(foo,10)

NaN
10
Coercition type (bonus)
‘10.2a’

• foo=+foo
• foo = parseInt(foo,10)
• foo = parseFloat(foo,10)

NaN
10
10.2
Coercition et transitivité
Coercition et transitivité
• 0 ==''

TRUE
Coercition et transitivité
• 0 ==''
• 0 =='0'

TRUE
TRUE
Coercition et transitivité
• 0 ==''
• 0 =='0'
• ''=='0'

TRUE
TRUE
Coercition et transitivité
• 0 ==''
• 0 =='0'
• ''=='0'

TRUE
TRUE
FALSE
Piège
Truthy et Falsy
Truthy et Falsy
• false, "", 0, null, undefined, NaN, void sont
FALSY
Truthy et Falsy
• false, "", 0, null, undefined, NaN, void sont
FALSY

• Tous les autres sont TRUTHY
Truthy et Falsy
• false, "", 0, null, undefined, NaN, void sont
FALSY

• Tous les autres sont TRUTHY
• même "0" et "FALSE"
Truthy et Falsy
• false, "", 0, null, undefined, NaN, void sont
FALSY

• Tous les autres sont TRUTHY
• même "0" et "FALSE"
...
Truthy et Falsy
• false, "", 0, null, undefined, NaN, void sont
FALSY

• Tous les autres sont TRUTHY
• même "0" et "FALSE"
...
Valeur par défaut
Valeur par défaut

Attention si b vaut 0 car 0 est falsy
Appel sécurisé
Point virgule
Point virgule
• Séparation d’expression
Point virgule
• Séparation d’expression
• Pas toujours obligatoire
Point virgule
• Séparation d’expression
• Pas toujours obligatoire
• Pose problème dans la minification
Point virgule
• Séparation d’expression
• Pas toujours obligatoire
• Pose problème dans la minification
• Grand débat sur q...
Point virgule

https://github.com/twitter/bootstrap/issues/3057
Point virgule
Point virgule
Scope
Scope
Scope
• Syntaxe à « la C » avec bloc
Scope
• Syntaxe à « la C » avec bloc
• Le scope est la fonction
Scope
• Syntaxe à « la C » avec bloc
• Le scope est la fonction
• Déclaration de variable avec «var»
Scope
• Syntaxe à « la C » avec bloc
• Le scope est la fonction
• Déclaration de variable avec «var»
• /! déclaration auto...
Déclaration
Déclaration
Hoisting

• Déplace les déclarations en tête du bloc
Hoisting
Hoisting
Hoisting
Closure
• Une fonction objet contient : 	

• une fonction (nom, paramètres, body)	

• une référence à l’environnement où e...
Closure
Closure

•Pollution de Global	

•Risque de collision de nom	

•names est modifiable
Closure
Closure

•Lent car construction de names à chaque appel
Closure
Closure
Closure
Exception
throw
try catch finally
Séparation de code
namespace
• Séparation de code pour limiter les
collisions de nom	


• Masquer le fonctionnement de votre
librairie
Namespace

• Tout n’est pas dans un bloc	

• Tout est public
IIFE
• Immediatly Invoked Function Expression	

• Fonction exécutée au chargement du script
et qui renvoie un objet avec l...
IIFE
IIFE
IIFE
IIFE
Callback
Callback

• fonction donnée en paramètre pour des
opération asynchrone
callback
callback
callback
Promise
Callback
Pyramide of doom
Promise
• Objet avec une méthode then qui prend 3
paramètres	


• success callback	

• failure callback	

• progress callb...
Promise
• 3 états possibles	

• unfulfilled or pending	

• fulfilled or resolved	

• failed or rejected
Résumé
Résumé
• JavaScript s’apprend !	

• Scope / Hoisting	

• this (constructeur et callback)	

• Héritage par prototype	

• as...
Industrialisation ?
JS c’est lent
• Enormes progrès sur les VM (V8, Rhino,
XMonkey)
• Enormes progrès sur les VM (V8, Rhino,
XMonkey)

• compilateur JIT
• Enormes progrès sur les VM (V8, Rhino,
XMonkey)

• compilateur JIT
• Cible du transpiling
• Enormes progrès sur les VM (V8, Rhino,
XMonkey)

• compilateur JIT
• Cible du transpiling
• Coffeescript, Dart, GWT...
JS n’est pas maintenable
JS est artisanal
Build

Industrialisation
Tests

Audit
Structure
Modularisation
• AMD : Asynchronous Module Definition	

• Chargement asynchrone en parallèle dans
son propre scope	


• req...
Modularisation
Modularisation
Modularisation
Modularisation
Modularisation
Automatisation
NPM
• Node Package Module	

• installation d’outils et de plugins	

• Permet l’installation d’outils de façon
globale ou l...
Grunt
• The JavaScript Task Runner	

• 2 fichiers 	

• package.json -> dépendances et plugins	

• Gruntfile.js -> configurati...
Gruntfile.js
Gruntfile.js
package.json
Bower
• Provisionnement de dépendances pour la
webapp	


• Clone de repository Github
bower.json
Yeoman
• Scaffolding 	

• Intégration de Yo, Grunt et Bower	

• Générateur
Tests
Jasmine
Jasmine
Jasmine
Jasmine
Jasmine spies
Jasmine spies
Jasmine spies
Jasmine spies
Alternative
• Mocha.js	

• Qunit
Bonus
• Rapport de tests dans différents formats	

• Couverture de code
Chai.js
Sinon.js
• Mock, Spies.....	

• Fake sur XMLHttpRequest	

• Fake sur Timer
CasperJs
• Headless scriptable Webkit	

• Screenshot	

• Test recorder dans Chrome
CasperJs
Integration Continue
Job dédié
• commande shell	

• NodeJS Jenkins Plugin
Plugin Maven

• Lancement des outils en ligne de
commande
Aggregation résultats
• Reporter au format XUnit	

• Plugin Jenkins TAP
Framework
Frameworks
Frameworks
http://addyosmani.github.com/todomvc/
Frameworks
• Fonctionnalités diverses	

• binding	

• routing	

• templating	

• ......
Qualité
use strict
!

• En haut du script ou dans une fonction	

• Transforme en erreur certaines fautes	

• déclaration implicite...
JSLint / JSHint
• attention cela fait mal.	

• utiliser dès le début avant les mauvaises
habitudes !	


• en ligne ou en p...
Sonar
• Plugin pour le JavaScript	

• tests, coverage, métriques,
Tooling
IDE
IDE
• Difficile....
IDE
• Difficile....
• Il faut essayer
Console des navigateurs
• Debugging	

• Test en live
Questions ?
Creative Commons
Attribution — You must attribute the work in the
manner specified by the author or licensor (but not in
an...
JavaScript pour le développeur Java
JavaScript pour le développeur Java
JavaScript pour le développeur Java
JavaScript pour le développeur Java
JavaScript pour le développeur Java
JavaScript pour le développeur Java
JavaScript pour le développeur Java
JavaScript pour le développeur Java
JavaScript pour le développeur Java
JavaScript pour le développeur Java
JavaScript pour le développeur Java
JavaScript pour le développeur Java
JavaScript pour le développeur Java
JavaScript pour le développeur Java
JavaScript pour le développeur Java
JavaScript pour le développeur Java
JavaScript pour le développeur Java
JavaScript pour le développeur Java
JavaScript pour le développeur Java
JavaScript pour le développeur Java
JavaScript pour le développeur Java
JavaScript pour le développeur Java
Prochain SlideShare
Chargement dans…5
×

JavaScript pour le développeur Java

1 069 vues

Publié le

Version of my presentation about JavaScript for the Java Developer that was played at "Codeur en Seine" conference.

  • Soyez le premier à commenter

JavaScript pour le développeur Java

  1. 1. JavaScript pour le développeur Java Christophe Jollivet
  2. 2. Christophe Jollivet • Neurobiologiste • Informaticien • Homme de communauté ! • @jollivetc
  3. 3. Sondages
  4. 4. Qui connait JavaScript ?
  5. 5. Autrement qu’un copier-coller du web ?
  6. 6. Les autres, qui se dit qu’il devrait apprendre JavaScript ?
  7. 7. Pourquoi JavaScript ?
  8. 8. Atwood Law • «Any application that can be written in JavaScript, will eventually be written in JavaScript» • http://www.codinghorror.com/blog/ 2007/07/the-principle-of-least-power.html
  9. 9. J’apprend JavaScript
  10. 10. «JavaScript is the only language that people feel they don’t need to learn to use it» Doug Crockford
  11. 11. Java is to JavaScript
  12. 12. Java is to JavaScript What ham is to hamster
  13. 13. http://blog.movereem.nl/images/javascript-the-good-parts-the-definitive-guide.jpg
  14. 14. m/ .co et n ttp h lu vo .re ks oo jsb ://
  15. 15. Tour de JavaScript
  16. 16. Types
  17. 17. Types • Number, String, Boolean, undefined • Object, function • Faiblement typé
  18. 18. Number • 64 bits floating point • IEEE-754 (aka Double) • Ecriture littérale • 1.024e+3 === 1024 • Méthodes (toExponential, toFixed, toPrecision...)
  19. 19. valeurs approximatives
  20. 20. valeurs approximatives (0.1 + 0.2) + 0.3 === 0.1 + (0.2 + 0.3)
  21. 21. valeurs approximatives (0.1 + 0.2) + 0.3 ALSE + (0.2 + 0.3) === 0.1 F
  22. 22. valeurs approximatives (0.1 + 0.2) + 0.3 ALSE + (0.2 + 0.3) === 0.1 F 9007199254740992 === 9007199254740992 + 1
  23. 23. valeurs approximatives (0.1 + 0.2) + 0.3 ALSE + (0.2 + 0.3) === 0.1 F 9007199254740992 ===E RU 9007199254740992 + 1 T
  24. 24. Objet
  25. 25. Objet
  26. 26. Objet • Container de propriétés avec un nom et une valeur
  27. 27. Objet • Container de propriétés avec un nom et une valeur • nom de propriété est une string y compris ""
  28. 28. Objet • Container de propriétés avec un nom et une valeur • nom de propriété est une string y compris "" • propriété est n’importe quelle valeur sauf undefined
  29. 29. Déclaration objet
  30. 30. Déclaration objet
  31. 31. Déclaration objet
  32. 32. Déclaration objet
  33. 33. Déclaration objet
  34. 34. Déclaration objet
  35. 35. Déclaration objet Classe anonyme
  36. 36. Déclaration d’objet
  37. 37. Déclaration d’objet
  38. 38. Déclaration d’objet
  39. 39. Déclaration d’objet
  40. 40. Accès aux valeurs
  41. 41. Objet et héritage
  42. 42. Création d’objet
  43. 43. Problème unRectangle longueur largeur surface anotherRectangle longueur largeur surface
  44. 44. Problème Occupation mémoire unRectangle longueur largeur surface anotherRectangle longueur largeur surface
  45. 45. Héritage par prototype • Un objet hérite directement d’un autre objet, il n’y a pas de notion de classe • On place les propriétés communes dans le prototype pour la mémoire
  46. 46. Création d’objet
  47. 47. Solution unRectangle anotherRectangle longueur longueur largeur largeur surface Prototype
  48. 48. Résolution de propriété • Se fait en remontant la chaîne de prototype • il est possible de surcharger une propriété
  49. 49. Extension • Ajout d’une méthode dans un prototype • la méthode est alors disponible pour toutes les instances existantes et à venir
  50. 50. for in • itérateur sur les propriétés de l’objet Les propriétés du prototype sont listées
  51. 51. hasOwnProperty • TRUE si la propriété est à l’objet et pas au prototype Attention si foo a une propriété ‘hasOwnProperty’
  52. 52. Introspection
  53. 53. Fonctions
  54. 54. Fonction Conserve une référence sur son contexte de création
  55. 55. Fonction Conserve une référence sur son contexte de création
  56. 56. Fonction Méthode statique utilitaire Conserve une référence sur son contexte de création
  57. 57. Arguments
  58. 58. Arguments
  59. 59. Arguments • Il n’y a pas d’erreur si le nombre d’arguments et paramètres ne correspondent pas
  60. 60. Arguments • Il n’y a pas d’erreur si le nombre d’arguments et paramètres ne correspondent pas • arguments contient la liste des arguments
  61. 61. Arguments
  62. 62. Arguments varargs
  63. 63. apply • Permet l’invocation d’une fonction en lui passant un contexte et des paramètres
  64. 64. Apply
  65. 65. This
  66. 66. 4 patterns • méthode • fonction • new • apply
  67. 67. this et méthode • pattern : bar.foo() • this référence l’objet contenant la méthode • binding à l’invocation
  68. 68. this et fonction • pattern : foo() • this est l’objet global, même si la fonction est déclarée dans une méthode
  69. 69. this et fonction
  70. 70. this et fonction Pollution de l’espace global
  71. 71. this et fonction
  72. 72. this et fonction
  73. 73. this et fonction
  74. 74. this et new • pattern : var bar = new Foo(); • création d’un objet avec lien au prototype de la fonction et this pointe cet objet
  75. 75. this et new
  76. 76. this et new
  77. 77. this et new
  78. 78. this et apply • pattern : foo.apply(bar, args); • this est lié à bar
  79. 79. Apply
  80. 80. Coercition de type
  81. 81. Coercition de type
  82. 82. Coercition de type • Forcer le type d’une variable
  83. 83. Coercition de type • Forcer le type d’une variable • == fait la coercition de type
  84. 84. Coercition de type • Forcer le type d’une variable • == fait la coercition de type • === ne fait pas la coercition de type
  85. 85. Coercition de type • '1' ==1 • '1'===1 TRUE FALSE
  86. 86. Coercition de type
  87. 87. Coercition de type • false == 'false' FALSE
  88. 88. Coercition de type • false == 'false' • false == '0' FALSE TRUE
  89. 89. Coercition de type • false == 'false' • false == '0' • " trn " == 0 FALSE TRUE TRUE
  90. 90. Coercition de type • false == 'false' • false == '0' • " trn " == 0 • ",,," == new Array(4) FALSE TRUE TRUE TRUE
  91. 91. Coercition de type • false == undefined • false == null • null == undefined FALSE FALSE TRUE
  92. 92. Coercition de type
  93. 93. Coercition de type • if( foo === null || foo === undefined )
  94. 94. Coercition de type • if( foo === null || foo === undefined ) • if( foo == null )
  95. 95. Coercition type (bonus)
  96. 96. Coercition type (bonus) • foo=+foo
  97. 97. Coercition type (bonus) • foo=+foo • foo = parseInt(foo,10)
  98. 98. Coercition type (bonus) • foo=+foo • foo = parseInt(foo,10) • foo = parseFloat(foo,10)
  99. 99. Coercition type (bonus) ‘10.2a’ • foo=+foo • foo = parseInt(foo,10) • foo = parseFloat(foo,10)
  100. 100. Coercition type (bonus) ‘10.2a’ • foo=+foo • foo = parseInt(foo,10) • foo = parseFloat(foo,10) NaN
  101. 101. Coercition type (bonus) ‘10.2a’ • foo=+foo • foo = parseInt(foo,10) • foo = parseFloat(foo,10) NaN 10
  102. 102. Coercition type (bonus) ‘10.2a’ • foo=+foo • foo = parseInt(foo,10) • foo = parseFloat(foo,10) NaN 10 10.2
  103. 103. Coercition et transitivité
  104. 104. Coercition et transitivité • 0 =='' TRUE
  105. 105. Coercition et transitivité • 0 =='' • 0 =='0' TRUE TRUE
  106. 106. Coercition et transitivité • 0 =='' • 0 =='0' • ''=='0' TRUE TRUE
  107. 107. Coercition et transitivité • 0 =='' • 0 =='0' • ''=='0' TRUE TRUE FALSE
  108. 108. Piège
  109. 109. Truthy et Falsy
  110. 110. Truthy et Falsy • false, "", 0, null, undefined, NaN, void sont FALSY
  111. 111. Truthy et Falsy • false, "", 0, null, undefined, NaN, void sont FALSY • Tous les autres sont TRUTHY
  112. 112. Truthy et Falsy • false, "", 0, null, undefined, NaN, void sont FALSY • Tous les autres sont TRUTHY • même "0" et "FALSE"
  113. 113. Truthy et Falsy • false, "", 0, null, undefined, NaN, void sont FALSY • Tous les autres sont TRUTHY • même "0" et "FALSE" • if( array.length )
  114. 114. Truthy et Falsy • false, "", 0, null, undefined, NaN, void sont FALSY • Tous les autres sont TRUTHY • même "0" et "FALSE" • if( array.length ) • if( string )
  115. 115. Valeur par défaut
  116. 116. Valeur par défaut Attention si b vaut 0 car 0 est falsy
  117. 117. Appel sécurisé
  118. 118. Point virgule
  119. 119. Point virgule • Séparation d’expression
  120. 120. Point virgule • Séparation d’expression • Pas toujours obligatoire
  121. 121. Point virgule • Séparation d’expression • Pas toujours obligatoire • Pose problème dans la minification
  122. 122. Point virgule • Séparation d’expression • Pas toujours obligatoire • Pose problème dans la minification • Grand débat sur quand il est nécessaire
  123. 123. Point virgule https://github.com/twitter/bootstrap/issues/3057
  124. 124. Point virgule
  125. 125. Point virgule
  126. 126. Scope
  127. 127. Scope
  128. 128. Scope • Syntaxe à « la C » avec bloc
  129. 129. Scope • Syntaxe à « la C » avec bloc • Le scope est la fonction
  130. 130. Scope • Syntaxe à « la C » avec bloc • Le scope est la fonction • Déclaration de variable avec «var»
  131. 131. Scope • Syntaxe à « la C » avec bloc • Le scope est la fonction • Déclaration de variable avec «var» • /! déclaration automatique
  132. 132. Déclaration
  133. 133. Déclaration
  134. 134. Hoisting • Déplace les déclarations en tête du bloc
  135. 135. Hoisting
  136. 136. Hoisting
  137. 137. Hoisting
  138. 138. Closure • Une fonction objet contient : • une fonction (nom, paramètres, body) • une référence à l’environnement où elle a été créée (contexte)
  139. 139. Closure
  140. 140. Closure •Pollution de Global •Risque de collision de nom •names est modifiable
  141. 141. Closure
  142. 142. Closure •Lent car construction de names à chaque appel
  143. 143. Closure
  144. 144. Closure
  145. 145. Closure
  146. 146. Exception
  147. 147. throw
  148. 148. try catch finally
  149. 149. Séparation de code
  150. 150. namespace • Séparation de code pour limiter les collisions de nom • Masquer le fonctionnement de votre librairie
  151. 151. Namespace • Tout n’est pas dans un bloc • Tout est public
  152. 152. IIFE • Immediatly Invoked Function Expression • Fonction exécutée au chargement du script et qui renvoie un objet avec les fonctions/ variables utiles.
  153. 153. IIFE
  154. 154. IIFE
  155. 155. IIFE
  156. 156. IIFE
  157. 157. Callback
  158. 158. Callback • fonction donnée en paramètre pour des opération asynchrone
  159. 159. callback
  160. 160. callback
  161. 161. callback
  162. 162. Promise
  163. 163. Callback
  164. 164. Pyramide of doom
  165. 165. Promise • Objet avec une méthode then qui prend 3 paramètres • success callback • failure callback • progress callback (pas obligatoire)
  166. 166. Promise • 3 états possibles • unfulfilled or pending • fulfilled or resolved • failed or rejected
  167. 167. Résumé
  168. 168. Résumé • JavaScript s’apprend ! • Scope / Hoisting • this (constructeur et callback) • Héritage par prototype • asynchrone
  169. 169. Industrialisation ?
  170. 170. JS c’est lent
  171. 171. • Enormes progrès sur les VM (V8, Rhino, XMonkey)
  172. 172. • Enormes progrès sur les VM (V8, Rhino, XMonkey) • compilateur JIT
  173. 173. • Enormes progrès sur les VM (V8, Rhino, XMonkey) • compilateur JIT • Cible du transpiling
  174. 174. • Enormes progrès sur les VM (V8, Rhino, XMonkey) • compilateur JIT • Cible du transpiling • Coffeescript, Dart, GWT...
  175. 175. JS n’est pas maintenable
  176. 176. JS est artisanal
  177. 177. Build Industrialisation Tests Audit
  178. 178. Structure
  179. 179. Modularisation • AMD : Asynchronous Module Definition • Chargement asynchrone en parallèle dans son propre scope • requirejs, Dojo, JQuery, Curl, Backdraft
  180. 180. Modularisation
  181. 181. Modularisation
  182. 182. Modularisation
  183. 183. Modularisation
  184. 184. Modularisation
  185. 185. Automatisation
  186. 186. NPM • Node Package Module • installation d’outils et de plugins • Permet l’installation d’outils de façon globale ou locale
  187. 187. Grunt • The JavaScript Task Runner • 2 fichiers • package.json -> dépendances et plugins • Gruntfile.js -> configuration
  188. 188. Gruntfile.js
  189. 189. Gruntfile.js
  190. 190. package.json
  191. 191. Bower • Provisionnement de dépendances pour la webapp • Clone de repository Github
  192. 192. bower.json
  193. 193. Yeoman • Scaffolding • Intégration de Yo, Grunt et Bower • Générateur
  194. 194. Tests
  195. 195. Jasmine
  196. 196. Jasmine
  197. 197. Jasmine
  198. 198. Jasmine
  199. 199. Jasmine spies
  200. 200. Jasmine spies
  201. 201. Jasmine spies
  202. 202. Jasmine spies
  203. 203. Alternative • Mocha.js • Qunit
  204. 204. Bonus • Rapport de tests dans différents formats • Couverture de code
  205. 205. Chai.js
  206. 206. Sinon.js • Mock, Spies..... • Fake sur XMLHttpRequest • Fake sur Timer
  207. 207. CasperJs • Headless scriptable Webkit • Screenshot • Test recorder dans Chrome
  208. 208. CasperJs
  209. 209. Integration Continue
  210. 210. Job dédié • commande shell • NodeJS Jenkins Plugin
  211. 211. Plugin Maven • Lancement des outils en ligne de commande
  212. 212. Aggregation résultats • Reporter au format XUnit • Plugin Jenkins TAP
  213. 213. Framework
  214. 214. Frameworks
  215. 215. Frameworks
  216. 216. http://addyosmani.github.com/todomvc/
  217. 217. Frameworks • Fonctionnalités diverses • binding • routing • templating • ......
  218. 218. Qualité
  219. 219. use strict ! • En haut du script ou dans une fonction • Transforme en erreur certaines fautes • déclaration implicite de variable • syntaxe octale • double propriété
  220. 220. JSLint / JSHint • attention cela fait mal. • utiliser dès le début avant les mauvaises habitudes ! • en ligne ou en plugin
  221. 221. Sonar • Plugin pour le JavaScript • tests, coverage, métriques,
  222. 222. Tooling
  223. 223. IDE
  224. 224. IDE • Difficile....
  225. 225. IDE • Difficile.... • Il faut essayer
  226. 226. Console des navigateurs • Debugging • Test en live
  227. 227. Questions ?
  228. 228. Creative Commons Attribution — You must attribute the work in the manner specified by the author or licensor (but not in any way that suggests that they endorse you or your use of the work). ! Noncommercial — You may not use this work for commercial purposes. ! Share Alike — If you alter, transform, or build upon this work, you may distribute the resulting work only under the same or similar license to this one.

×