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

1. JavaScript pour le
développeur Java
Christophe Jollivet

2. Christophe Jollivet
• Neurobiologiste
• Informaticien
• Homme de communauté
!
• @jollivetc

3. Sondages

4. Qui connait JavaScript ?

5. Autrement qu’un
copier-coller du web ?

6. Les autres, qui se dit
qu’il devrait apprendre
JavaScript ?

7. Pourquoi JavaScript ?

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. J’apprend JavaScript

14. «JavaScript is the only
language that people feel they
don’t need to learn to use it»
Doug Crockford

15. Java is to JavaScript

16. Java is to JavaScript
What ham is to hamster

17. http://blog.movereem.nl/images/javascript-the-good-parts-the-definitive-guide.jpg

19. m/
.co
et
n
ttp
h
lu
vo
.re
ks
oo
jsb
://

21. Tour de JavaScript

22. Types

23. Types
• Number, String, Boolean, undefined
• Object, function
• Faiblement typé

24. Number
• 64 bits floating point
• IEEE-754 (aka Double)
• Ecriture littérale
• 1.024e+3 === 1024
• Méthodes (toExponential, toFixed,
toPrecision...)

25. valeurs approximatives

26. valeurs approximatives
(0.1 + 0.2) + 0.3 === 0.1 + (0.2 + 0.3)

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

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

29. valeurs approximatives
(0.1 + 0.2) + 0.3 ALSE + (0.2 + 0.3)
=== 0.1
F
9007199254740992 ===E
RU 9007199254740992 + 1
T

30. Objet

31. Objet

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

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

34. 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

35. Déclaration objet

36. Déclaration objet

37. Déclaration objet

38. Déclaration objet

39. Déclaration objet

40. Déclaration objet

41. Déclaration objet
Classe anonyme

42. Déclaration d’objet

43. Déclaration d’objet

44. Déclaration d’objet

45. Déclaration d’objet

46. Accès aux valeurs

47. Objet et héritage

48. Création d’objet

49. Problème
unRectangle
longueur
largeur
surface
anotherRectangle
longueur
largeur
surface

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

51. 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

52. Création d’objet

53. Solution
unRectangle
anotherRectangle
longueur
longueur
largeur
largeur
surface
Prototype

54. Résolution de propriété
• Se fait en remontant la chaîne de prototype
• il est possible de surcharger une propriété

55. Extension
• Ajout d’une méthode dans un prototype
• la méthode est alors disponible pour toutes
les instances existantes et à venir

56. for in
• itérateur sur les propriétés de l’objet
Les propriétés du prototype sont listées

57. hasOwnProperty
• TRUE si la propriété est à l’objet et pas au
prototype
Attention si foo a une propriété ‘hasOwnProperty’

58. Introspection

59. Fonctions

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

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

62. Fonction
Méthode statique
utilitaire
Conserve une référence sur son
contexte de création

63. Arguments

64. Arguments

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

66. 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

67. Arguments

68. Arguments
varargs

69. apply
• Permet l’invocation d’une fonction en lui
passant un contexte et des paramètres

71. Apply

72. This

73. 4 patterns
• méthode
• fonction
• new
• apply

74. this et méthode
• pattern : bar.foo()
• this référence l’objet contenant la méthode
• binding à l’invocation

75. this et fonction
• pattern : foo()
• this est l’objet global, même si la fonction
est déclarée dans une méthode

76. this et fonction

77. this et fonction
Pollution de l’espace global

78. this et fonction

79. this et fonction

80. this et fonction

81. 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

82. this et new

83. this et new

84. this et new

85. this et apply
• pattern : foo.apply(bar, args);
• this est lié à bar

86. Apply

87. Coercition de type

88. Coercition de type

89. Coercition de type
• Forcer le type d’une variable

90. Coercition de type
• Forcer le type d’une variable
• == fait la coercition de type

91. Coercition de type
• Forcer le type d’une variable
• == fait la coercition de type
• === ne fait pas la coercition de type

92. Coercition de type
• '1' ==1
• '1'===1
TRUE
FALSE

93. Coercition de type

94. Coercition de type
• false == 'false'
FALSE

95. Coercition de type
• false == 'false'
• false == '0'
FALSE
TRUE

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

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

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

99. Coercition de type

100. Coercition de type
• if( foo === null || foo === undefined )

101. Coercition de type
• if( foo === null || foo === undefined )
• if( foo == null )

102. Coercition type (bonus)

103. Coercition type (bonus)
• foo=+foo

104. Coercition type (bonus)
• foo=+foo
• foo = parseInt(foo,10)

105. Coercition type (bonus)
• foo=+foo
• foo = parseInt(foo,10)
• foo = parseFloat(foo,10)

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

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

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

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

110. Coercition et transitivité

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

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

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

114. Coercition et transitivité
• 0 ==''
• 0 =='0'
• ''=='0'
TRUE
TRUE
FALSE

115. Piège

116. Truthy et Falsy

117. Truthy et Falsy
• false, "", 0, null, undefined, NaN, void sont
FALSY

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

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

120. Truthy et Falsy
• false, "", 0, null, undefined, NaN, void sont
FALSY
• Tous les autres sont TRUTHY
• même "0" et "FALSE"
• if( array.length )

121. 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 )

122. Valeur par défaut

123. Valeur par défaut
Attention si b vaut 0 car 0 est falsy

124. Appel sécurisé

127. Point virgule

128. Point virgule
• Séparation d’expression

129. Point virgule
• Séparation d’expression
• Pas toujours obligatoire

130. Point virgule
• Séparation d’expression
• Pas toujours obligatoire
• Pose problème dans la minification

131. Point virgule
• Séparation d’expression
• Pas toujours obligatoire
• Pose problème dans la minification
• Grand débat sur quand il est nécessaire

132. Point virgule
https://github.com/twitter/bootstrap/issues/3057

133. Point virgule

134. Point virgule

135. Scope

136. Scope

137. Scope
• Syntaxe à « la C » avec bloc

138. Scope
• Syntaxe à « la C » avec bloc
• Le scope est la fonction

139. Scope
• Syntaxe à « la C » avec bloc
• Le scope est la fonction
• Déclaration de variable avec «var»

140. Scope
• Syntaxe à « la C » avec bloc
• Le scope est la fonction
• Déclaration de variable avec «var»
• /! déclaration automatique

141. Déclaration

142. Déclaration

143. Hoisting
• Déplace les déclarations en tête du bloc

144. Hoisting

145. Hoisting

146. Hoisting

147. Closure
• Une fonction objet contient :
• une fonction (nom, paramètres, body)
• une référence à l’environnement où elle a
été créée (contexte)

148. Closure

149. Closure
•Pollution de Global
•Risque de collision de nom
•names est modifiable

150. Closure

151. Closure
•Lent car construction de names à chaque appel

152. Closure

153. Closure

154. Closure

155. Exception

156. throw

157. try catch finally

158. Séparation de code

159. namespace
• Séparation de code pour limiter les
collisions de nom
• Masquer le fonctionnement de votre
librairie

160. Namespace
• Tout n’est pas dans un bloc
• Tout est public

161. IIFE
• Immediatly Invoked Function Expression
• Fonction exécutée au chargement du script
et qui renvoie un objet avec les fonctions/
variables utiles.

162. IIFE

163. IIFE

164. IIFE

165. IIFE

166. Callback

167. Callback
• fonction donnée en paramètre pour des
opération asynchrone

168. callback

169. callback

170. callback

171. Promise

172. Callback

174. Pyramide of doom

177. Promise
• Objet avec une méthode then qui prend 3
paramètres
• success callback
• failure callback
• progress callback (pas obligatoire)

178. Promise
• 3 états possibles
• unfulfilled or pending
• fulfilled or resolved
• failed or rejected

185. Résumé

186. Résumé
• JavaScript s’apprend !
• Scope / Hoisting
• this (constructeur et callback)
• Héritage par prototype
• asynchrone

187. Industrialisation ?

188. JS c’est lent

190. • Enormes progrès sur les VM (V8, Rhino,
XMonkey)

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

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

193. • Enormes progrès sur les VM (V8, Rhino,
XMonkey)
• compilateur JIT
• Cible du transpiling
• Coffeescript, Dart, GWT...

194. JS n’est pas maintenable

198. JS est artisanal

199. Build
Industrialisation
Tests
Audit

200. Structure

201. Modularisation
• AMD : Asynchronous Module Definition
• Chargement asynchrone en parallèle dans
son propre scope
• requirejs, Dojo, JQuery, Curl, Backdraft

202. Modularisation

203. Modularisation

204. Modularisation

205. Modularisation

206. Modularisation

207. Automatisation

208. NPM
• Node Package Module
• installation d’outils et de plugins
• Permet l’installation d’outils de façon
globale ou locale

209. Grunt
• The JavaScript Task Runner
• 2 fichiers
• package.json -> dépendances et plugins
• Gruntfile.js -> configuration

210. Gruntfile.js

211. Gruntfile.js

212. package.json

213. Bower
• Provisionnement de dépendances pour la
webapp
• Clone de repository Github

214. bower.json

215. Yeoman
• Scaffolding
• Intégration de Yo, Grunt et Bower
• Générateur

216. Tests

217. Jasmine

218. Jasmine

219. Jasmine

220. Jasmine

221. Jasmine spies

222. Jasmine spies

223. Jasmine spies

224. Jasmine spies

225. Alternative
• Mocha.js
• Qunit

226. Bonus
• Rapport de tests dans différents formats
• Couverture de code

227. Chai.js

228. Sinon.js
• Mock, Spies.....
• Fake sur XMLHttpRequest
• Fake sur Timer

229. CasperJs
• Headless scriptable Webkit
• Screenshot
• Test recorder dans Chrome

230. CasperJs

231. Integration Continue

232. Job dédié
• commande shell
• NodeJS Jenkins Plugin

233. Plugin Maven
• Lancement des outils en ligne de
commande

234. Aggregation résultats
• Reporter au format XUnit
• Plugin Jenkins TAP

235. Framework

236. Frameworks

237. Frameworks

238. http://addyosmani.github.com/todomvc/

239. Frameworks
• Fonctionnalités diverses
• binding
• routing
• templating
• ......

240. Qualité

241. 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é

242. JSLint / JSHint
• attention cela fait mal.
• utiliser dès le début avant les mauvaises
habitudes !
• en ligne ou en plugin

243. Sonar
• Plugin pour le JavaScript
• tests, coverage, métriques,

244. Tooling

245. IDE

246. IDE
• Difficile....

247. IDE
• Difficile....
• Il faut essayer

248. Console des navigateurs
• Debugging
• Test en live

249. Questions ?

250. 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.