Nouvelle version de ma présentation sur JavaScript avec un point de vue du développeur Java. On commence par voir le langage en comparant avec Java puis on voit les aspects industrialisation du développement avec la qualité et l'automatisation des builds.

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

10. Histoire

11. Histoire

12. Histoire

13. Histoire

14. Histoire

16. • Erreur en ligne XXX

17. • Erreur en ligne XXX
• Cela fait un moment que c’est le bazar mais
là je ne m’en sors plus

18. La révélation

19. La révélation
• Projets en HTML 5
• De vrais développeurs JavaScript
• Des ateliers

20. J’apprend JavaScript

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

26. Java is to JavaScript

27. Java is to JavaScript
What ham is to hamster

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

30. http://jsbooks.revolunet.com/

32. Tour de JavaScript

33. Types

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

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

36. valeurs approximatives

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

38. valeurs approximatives
(0.1 + 0.2) + 0.3 === 0.1 + (0.2 + 0.3)
FALSE

39. valeurs approximatives
9007199254740992 === 9007199254740992 + 1
(0.1 + 0.2) + 0.3 === 0.1 + (0.2 + 0.3)
FALSE

40. valeurs approximatives
9007199254740992 === 9007199254740992 + 1
TRUE
(0.1 + 0.2) + 0.3 === 0.1 + (0.2 + 0.3)
FALSE

41. Objet

42. Objet

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

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

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

46. Déclaration objet

47. Déclaration objet

48. Déclaration objet

49. Déclaration objet

50. Déclaration objet

51. Déclaration objet

52. Déclaration d’objet

53. Déclaration d’objet

54. Déclaration d’objet

55. Accès aux valeurs

56. Introspection

57. Objet et héritage

58. Création d’objet

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

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

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

62. Création d’objet

63. Solution
longueur
largeur
longueur
largeur
unRectangle anotherRectangle
surface
Prototype

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

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

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

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

68. Fonctions

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

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

71. Arguments

72. Arguments

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

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

75. Arguments

76. Arguments
varargs

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

79. Apply

80. This

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

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

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

84. this et fonction

85. this et fonction
Pollution de l’espace global

86. this et fonction

87. this et fonction

88. this et fonction

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

90. this et new

91. this et new

92. this et new

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

94. Apply

95. Coercition de type

96. Coercition de type

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

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

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

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

101. Coercition de type

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

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

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

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

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

107. Coercition de type

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

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

110. Coercition type
(bonus)

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

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

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

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

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

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

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

118. Coercition et
transitivité

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

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

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

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

123. Piège

124. Truthy et Falsy

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

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

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

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

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

130. Valeur par défaut

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

132. Appel sécurisé

135. Point virgule

136. Point virgule
• Séparation d’expression

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

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

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

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

141. Point virgule

142. Point virgule

143. Scope

144. Scope

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

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

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

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

149. Déclaration

150. Déclaration

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

152. Hoisting

153. Hoisting

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

155. Closure

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

157. Closure

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

159. Closure

160. Closure

161. Closure

162. Exception

163. throw

164. try catch finally

165. Séparation de code

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

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

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

169. IIFE

170. IIFE

171. IIFE

172. IIFE

173. Callback

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

175. callback

176. callback

177. callback

178. Promise

179. Callback

181. Pyramide of doom

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

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

192. Résumé

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

194. Industrialisation ?

195. JS c’est lent

197. • Enormes progrès sur lesVM (V8, Rhino,
XMonkey)

198. • Enormes progrès sur lesVM (V8, Rhino,
XMonkey)
• compilateur JIT

199. • Enormes progrès sur lesVM (V8, Rhino,
XMonkey)
• compilateur JIT
• Cible du transpiling

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

201. JS n’est pas maintenable

205. Framework

206. Framework
Client

207. Framework
Client
Vert.X
Serveur

208. Framework
Client
Vert.X
Serveur
Base de données

209. Framework
Client
Vert.X
Serveur
Base de données Desktop

211. • One language to rule them all

212. • One language to rule them all
• Write once run anywhere ?

213. JS est artisanal

214. Industrialisation
Tests

215. Industrialisation
Build
Tests

216. Industrialisation
Build
Audit
Tests

217. Structure

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

219. Modularisation

220. Modularisation

221. Modularisation

222. Modularisation

223. Modularisation

224. Grunt
• Ant + Ivy du JavaScript
• 2 fichiers
• package.json -> dépendances et plugins
• grunt.js -> configuration

225. grunt.js

226. package.json

227. NPM
• Node Package Manager
• provisionneur de dépendances

228. Bower
• Provisionnement de dépendances pour la
webapp

229. Yeoman
• Scaffolding
• Intégration deYo, Grunt et Bower
• Générateur

230. Tests

231. Jasmine

232. Jasmine

233. Jasmine

234. Jasmine

235. Jasmine spies

236. Jasmine spies

237. Jasmine spies

238. Jasmine spies

239. Alternative
• Mocha.js
• Qunit

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

241. Chai.js

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

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

244. CasperJs

245. Integration Continue

246. Job dédié
• commande shell

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

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

249. Framework

250. Frameworks

251. Frameworks

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

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

255. Frameworks
• Backbone
• KnockoutJS
• AngularJS
• ember.js
• Meteor
• chfo

256. Qualité

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

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

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

260. Tooling

261. IDE

262. IDE
• Difficile....

263. IDE
• Difficile....
• Il faut essayer

264. Console des
navigateurs
• Debugging
• Test en live

265. Questions ?

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