Présentation faite au Nantes JUG et au FinistJUG au mois d'avril 2013. Présentation du langage et des frameworks/outils du point de vue du développeur Java.

1. JavaScript en entreprise
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. JS c’est lent

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

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

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

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

15. Histoire

16. Histoire

17. Histoire

18. Histoire

19. Histoire

20. Histoire

22. • Erreur en ligne XXX

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

24. La révélation

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

26. J’apprend JavaScript

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

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

34. et .com/
lun
oks.revo
: //jsbo
h ttp

36. Sommaire
• Type
• Objets et héritage
• Fonctions
• Callback
• this
• Coercition
• Scope
• Closure
• Exception
• Séparation de code
• Promise

37. Types

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

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

40. valeurs approxymatives

41. valeurs approxymatives
(0.1 + 0.2) + 0.3 === 0.1 + (0.2 + 0.3)

42. valeurs approxymatives
(0.1 + 0.2) + 0.3 ALSE + (0.2 + 0.3)
=== 0.1
F

43. valeurs approxymatives
(0.1 + 0.2) + 0.3 ALSE + (0.2 + 0.3)
=== 0.1
F
9007199254740992 === 9007199254740992 + 1

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

45. Objet

46. Objet

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

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

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

50. Déclaration objet

51. Déclaration objet

52. Déclaration objet

53. Déclaration objet

54. Déclaration objet

55. Déclaration objet

56. Déclaration d’objet

57. Déclaration d’objet

58. Déclaration d’objet

59. Accès aux valeurs

60. Objet et héritage

61. Création d’objet

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

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

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

65. Création d’objet

66. Solution
unRectangle anotherRectangle
longueur longueur
largeur largeur
surface
Prototype

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

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

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

70. Introspection

71. Fonctions

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

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

74. Arguments

75. Arguments

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

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

78. Arguments

79. Arguments
varargs

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

82. Apply

83. Callback

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

85. callback

86. callback

87. callback

88. This

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

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

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

92. this et fonction

93. this et fonction
Pollution de l’espace global

94. this et fonction

95. this et fonction

96. this et fonction

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

98. this et new

99. this et new

100. this et new

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

102. Apply

103. Coercition de type

104. Coercition de type

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

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

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

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

109. Coercition de type

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

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

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

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

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

115. Coercition de type

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

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

118. Coercition type
(bonus)

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

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

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

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

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

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

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

126. Coercition et
transitivité

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

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

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

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

131. Piège

132. Truthy et Falsy

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

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

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

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

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

138. Valeur par défaut

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

140. Appel sécurisé

143. Point virgule

144. Point virgule
• Séparation d’expression

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

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

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

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

149. Point virgule

150. Point virgule

151. Scope

152. Scope

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

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

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

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

157. Déclaration

158. Déclaration

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

160. Hoisting

161. Hoisting

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

163. Closure

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

165. Closure

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

167. Closure

168. Closure

169. Closure

170. Exception

171. throw

172. try catch finally

173. Séparation de code

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

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

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

177. IIFE

178. IIFE

179. IIFE

180. IIFE

181. Promise

182. Callback

183. Pyramide of doom

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

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

187. Promise

188. Résumé

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

190. Industrialisation ?

191. JS n’est pas maintenable

194. Framework

195. Framework
Client

196. Framework
Client Serveur
Vert.X

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

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

200. • One language to rule them all

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

202. JS est artisanal

203. Industrialisation
Tests

204. Industrialisation
Build
Tests

205. Industrialisation
Build
Tests
Audit

206. Structure

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

208. Modularisation

209. Modularisation

210. Modularisation

211. Modularisation

212. Modularisation

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

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

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

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

217. Tests

218. Jasmine

219. Jasmine

220. Jasmine

221. Jasmine

222. Jasmine spies

223. Jasmine spies

224. Jasmine spies

225. Jasmine spies

226. Alternative
• Mocha.js
• Qunit

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

228. Chai.js

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

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

231. CasperJs

232. Framework

233. Frameworks

234. Frameworks

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

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

238. Frameworks
• Backbone
• KnockoutJS
• AngularJS
• ember.js
• Meteor

239. Qualité

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

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

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

243. Tooling

244. IDE

245. IDE
• Difficile....

246. IDE
• Difficile....
• Il faut essayer

247. Console des
navigateurs
• Debugging
• Test en live

248. Questions ?

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