JavaScript pour le développeur Java

1 782 vues

Publié le

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.

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 782
Sur SlideShare
0
Issues des intégrations
0
Intégrations
502
Actions
Partages
0
Téléchargements
154
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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. Histoire
  10. 10. Histoire
  11. 11. Histoire
  12. 12. Histoire
  13. 13. Histoire
  14. 14. Histoire
  15. 15. • Erreur en ligne XXX
  16. 16. • Erreur en ligne XXX • Cela fait un moment que c’est le bazar mais là je ne m’en sors plus
  17. 17. La révélation
  18. 18. La révélation • Projets en HTML 5 • De vrais développeurs JavaScript • Des ateliers
  19. 19. J’apprend JavaScript
  20. 20. «JavaScript is the only language that people feel they don’t need to learn to use it» Doug Crockford
  21. 21. Java is to JavaScript
  22. 22. Java is to JavaScript What ham is to hamster
  23. 23. http://blog.movereem.nl/images/javascript-the-good-parts-the-definitive-guide.jpg
  24. 24. http://jsbooks.revolunet.com/
  25. 25. Tour de JavaScript
  26. 26. Types
  27. 27. Types • Number, String, Boolean, undefined • Object, function • Faiblement typé
  28. 28. Number • 64 bits floating point • IEEE-754 (aka Double) • Ecriture littérale • 1.024e+3 === 1024 • Méthodes (toExponential, toFixed, toPrecision...)
  29. 29. valeurs approximatives
  30. 30. valeurs approximatives (0.1 + 0.2) + 0.3 === 0.1 + (0.2 + 0.3)
  31. 31. valeurs approximatives (0.1 + 0.2) + 0.3 === 0.1 + (0.2 + 0.3) FALSE
  32. 32. valeurs approximatives 9007199254740992 === 9007199254740992 + 1 (0.1 + 0.2) + 0.3 === 0.1 + (0.2 + 0.3) FALSE
  33. 33. valeurs approximatives 9007199254740992 === 9007199254740992 + 1 TRUE (0.1 + 0.2) + 0.3 === 0.1 + (0.2 + 0.3) FALSE
  34. 34. Objet
  35. 35. Objet
  36. 36. Objet • Container de propriétés avec un nom et une valeur
  37. 37. Objet • Container de propriétés avec un nom et une valeur • nom de propriété est une string y compris ""
  38. 38. 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
  39. 39. Déclaration objet
  40. 40. Déclaration objet
  41. 41. Déclaration objet
  42. 42. Déclaration objet
  43. 43. Déclaration objet
  44. 44. Déclaration objet
  45. 45. Déclaration d’objet
  46. 46. Déclaration d’objet
  47. 47. Déclaration d’objet
  48. 48. Accès aux valeurs
  49. 49. Introspection
  50. 50. Objet et héritage
  51. 51. Création d’objet
  52. 52. Problème surface surface longueur largeur longueur largeur unRectangle anotherRectangle
  53. 53. Problème surface surface longueur largeur longueur largeur unRectangle anotherRectangle Occupation mémoire
  54. 54. 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
  55. 55. Création d’objet
  56. 56. Solution longueur largeur longueur largeur unRectangle anotherRectangle surface Prototype
  57. 57. Extension • Ajout d’une méthode dans un prototype • la méthode est alors disponible pour toutes les instances existantes et à venir
  58. 58. Résolution de propriété • Se fait en remontant la chaîne de prototype • il est possible de surcharger une propriété
  59. 59. for in • itérateur sur les propriétés de l’objet Les propriétés du prototype sont listées
  60. 60. hasOwnProperty • TRUE si la propriété est à l’objet et pas au prototype Attention si foo a une propriété ‘hasOwnProperty’
  61. 61. Fonctions
  62. 62. Fonction Conserve une référence sur son contexte de création
  63. 63. Fonction Conserve une référence sur son contexte de création
  64. 64. Arguments
  65. 65. Arguments
  66. 66. Arguments • Il n’y a pas d’erreur si le nombre d’arguments et paramètres ne correspondent pas
  67. 67. 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
  68. 68. Arguments
  69. 69. Arguments varargs
  70. 70. apply • Permet l’invocation d’une fonction en lui passant un contexte et des paramètres
  71. 71. Apply
  72. 72. This
  73. 73. 4 patterns • méthode • fonction • new • apply
  74. 74. this et méthode • pattern : bar.foo() • this référence l’objet contenant la méthode • binding à l’invocation
  75. 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. 76. this et fonction
  77. 77. this et fonction Pollution de l’espace global
  78. 78. this et fonction
  79. 79. this et fonction
  80. 80. this et fonction
  81. 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. 82. this et new
  83. 83. this et new
  84. 84. this et new
  85. 85. this et apply • pattern : foo.apply(bar, args); • this est lié à bar
  86. 86. Apply
  87. 87. Coercition de type
  88. 88. Coercition de type
  89. 89. Coercition de type • Forcer le type d’une variable
  90. 90. Coercition de type • Forcer le type d’une variable • == fait la coercition de type
  91. 91. Coercition de type • Forcer le type d’une variable • == fait la coercition de type • === ne fait pas la coercition de type
  92. 92. Coercition de type • '1' ==1 TRUE • '1'===1 FALSE
  93. 93. Coercition de type
  94. 94. Coercition de type • false == 'false' FALSE
  95. 95. Coercition de type • false == 'false' FALSE • false == '0' TRUE
  96. 96. Coercition de type • false == 'false' FALSE • false == '0' TRUE • " trn " == 0 TRUE
  97. 97. Coercition de type • false == 'false' FALSE • false == '0' TRUE • " trn " == 0 TRUE • ",,," == new Array(4) TRUE
  98. 98. Coercition de type • false == undefined FALSE • false == null FALSE • null == undefined TRUE
  99. 99. Coercition de type
  100. 100. Coercition de type • if( foo === null || foo === undefined )
  101. 101. Coercition de type • if( foo === null || foo === undefined ) • if( foo == null )
  102. 102. Coercition type (bonus)
  103. 103. Coercition type (bonus) • foo=+foo
  104. 104. Coercition type (bonus) • foo=+foo • foo = parseInt(foo,10)
  105. 105. Coercition type (bonus) • foo=+foo • foo = parseInt(foo,10) • foo = parseFloat(foo,10)
  106. 106. Coercition type (bonus) • foo=+foo • foo = parseInt(foo,10) • foo = parseFloat(foo,10) ‘10.2a’
  107. 107. Coercition type (bonus) • foo=+foo • foo = parseInt(foo,10) • foo = parseFloat(foo,10) ‘10.2a’ NaN
  108. 108. Coercition type (bonus) • foo=+foo • foo = parseInt(foo,10) • foo = parseFloat(foo,10) ‘10.2a’ NaN 10
  109. 109. Coercition type (bonus) • foo=+foo • foo = parseInt(foo,10) • foo = parseFloat(foo,10) ‘10.2a’ NaN 10 10.2
  110. 110. Coercition et transitivité
  111. 111. Coercition et transitivité • 0 =='' TRUE
  112. 112. Coercition et transitivité • 0 =='' TRUE • 0 =='0' TRUE
  113. 113. Coercition et transitivité • 0 =='' TRUE • 0 =='0' TRUE • ''=='0'
  114. 114. Coercition et transitivité • 0 =='' TRUE • 0 =='0' TRUE • ''=='0' FALSE
  115. 115. Piège
  116. 116. Truthy et Falsy
  117. 117. Truthy et Falsy • false, "", 0, null, undefined, NaN, void sont FALSY
  118. 118. Truthy et Falsy • false, "", 0, null, undefined, NaN, void sont FALSY • Tous les autres sont TRUTHY
  119. 119. Truthy et Falsy • false, "", 0, null, undefined, NaN, void sont FALSY • Tous les autres sont TRUTHY • même "0" et "FALSE"
  120. 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. 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. 122. Valeur par défaut
  123. 123. Valeur par défaut Attention si b vaut 0 car 0 est falsy
  124. 124. Appel sécurisé
  125. 125. Point virgule
  126. 126. Point virgule • Séparation d’expression
  127. 127. Point virgule • Séparation d’expression • Pas toujours obligatoire
  128. 128. Point virgule • Séparation d’expression • Pas toujours obligatoire • Pose problème dans la minification
  129. 129. Point virgule • Séparation d’expression • Pas toujours obligatoire • Pose problème dans la minification • Grand débat sur quand il est nécessaire
  130. 130. Point virgule https://github.com/twitter/bootstrap/issues/3057
  131. 131. Point virgule
  132. 132. Point virgule
  133. 133. Scope
  134. 134. Scope
  135. 135. Scope • Syntaxe à « la C » avec bloc
  136. 136. Scope • Syntaxe à « la C » avec bloc • Le scope est la fonction
  137. 137. Scope • Syntaxe à « la C » avec bloc • Le scope est la fonction • Déclaration de variable avec «var»
  138. 138. Scope • Syntaxe à « la C » avec bloc • Le scope est la fonction • Déclaration de variable avec «var» • /! déclaration automatique
  139. 139. Déclaration
  140. 140. Déclaration
  141. 141. Hoisting • Déplace les déclarations en tête du bloc
  142. 142. Hoisting
  143. 143. Hoisting
  144. 144. Closure • Une fonction objet contient : • une fonction (nom, paramètres, body) • une référence à l’environnement où elle a été créée (contexte)
  145. 145. Closure
  146. 146. Closure •Pollution de Global •Risque de collision de nom •names est modifiable
  147. 147. Closure
  148. 148. Closure •Lent car construction de names à chaque appel
  149. 149. Closure
  150. 150. Closure
  151. 151. Closure
  152. 152. Exception
  153. 153. throw
  154. 154. try catch finally
  155. 155. Séparation de code
  156. 156. namespace • Séparation de code pour limiter les collisions de nom • Masquer le fonctionnement de votre librairie
  157. 157. Namespace •Tout n’est pas dans un bloc •Tout est public
  158. 158. IIFE • Immediatly Invoked Function Expression • Fonction exécutée au chargement du script et qui renvoie un objet avec les fonctions/ variables utiles.
  159. 159. IIFE
  160. 160. IIFE
  161. 161. IIFE
  162. 162. IIFE
  163. 163. Callback
  164. 164. Callback • fonction donnée en paramètre pour des opération asynchrone
  165. 165. callback
  166. 166. callback
  167. 167. callback
  168. 168. Promise
  169. 169. Callback
  170. 170. Pyramide of doom
  171. 171. Promise • Objet avec une méthode then qui prend 3 paramètres • success callback • failure callback • progress callback (pas obligatoire)
  172. 172. Promise • 3 états possibles • unfulfilled or pending • fulfilled or resolved • failed or rejected
  173. 173. Résumé
  174. 174. Résumé • JavaScript s’apprend ! • Scope / Hoisting • this (constructeur et callback) • Héritage par prototype
  175. 175. Industrialisation ?
  176. 176. JS c’est lent
  177. 177. • Enormes progrès sur lesVM (V8, Rhino, XMonkey)
  178. 178. • Enormes progrès sur lesVM (V8, Rhino, XMonkey) • compilateur JIT
  179. 179. • Enormes progrès sur lesVM (V8, Rhino, XMonkey) • compilateur JIT • Cible du transpiling
  180. 180. • Enormes progrès sur lesVM (V8, Rhino, XMonkey) • compilateur JIT • Cible du transpiling • Coffeescript, Dart, GWT...
  181. 181. JS n’est pas maintenable
  182. 182. Framework
  183. 183. Framework Client
  184. 184. Framework Client Vert.X Serveur
  185. 185. Framework Client Vert.X Serveur Base de données
  186. 186. Framework Client Vert.X Serveur Base de données Desktop
  187. 187. • One language to rule them all
  188. 188. • One language to rule them all • Write once run anywhere ?
  189. 189. JS est artisanal
  190. 190. Industrialisation Tests
  191. 191. Industrialisation Build Tests
  192. 192. Industrialisation Build Audit Tests
  193. 193. Structure
  194. 194. Modularisation • AMD :Asynchronous Module Definition • Chargement asynchrone en parallèle dans son propre scope • requirejs, Dojo, JQuery, Curl, Backdraft
  195. 195. Modularisation
  196. 196. Modularisation
  197. 197. Modularisation
  198. 198. Modularisation
  199. 199. Modularisation
  200. 200. Grunt • Ant + Ivy du JavaScript • 2 fichiers • package.json -> dépendances et plugins • grunt.js -> configuration
  201. 201. grunt.js
  202. 202. package.json
  203. 203. NPM • Node Package Manager • provisionneur de dépendances
  204. 204. Bower • Provisionnement de dépendances pour la webapp
  205. 205. Yeoman • Scaffolding • Intégration deYo, Grunt et Bower • Générateur
  206. 206. Tests
  207. 207. Jasmine
  208. 208. Jasmine
  209. 209. Jasmine
  210. 210. Jasmine
  211. 211. Jasmine spies
  212. 212. Jasmine spies
  213. 213. Jasmine spies
  214. 214. Jasmine spies
  215. 215. Alternative • Mocha.js • Qunit
  216. 216. Bonus • Rapport de tests dans différents formats • Couverture de code
  217. 217. Chai.js
  218. 218. Sinon.js • Mock, Spies..... • Fake sur XMLHttpRequest • Fake sur Timer
  219. 219. CasperJs • Headless scriptable Webkit • Screenshot • Test recorder dans Chrome
  220. 220. CasperJs
  221. 221. Integration Continue
  222. 222. Job dédié • commande shell
  223. 223. Plugin Maven • Lancement des outils en ligne de commande
  224. 224. Aggregation résultats • Reporter au format XUnit • Plugin Jenkins TAP
  225. 225. Framework
  226. 226. Frameworks
  227. 227. Frameworks
  228. 228. http://addyosmani.github.com/todomvc/
  229. 229. Frameworks • Fonctionnalités diverses • binding • routing • templating • ......
  230. 230. Frameworks • Backbone • KnockoutJS • AngularJS • ember.js • Meteor • chfo
  231. 231. Qualité
  232. 232. 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é
  233. 233. JSLint / JSHint • attention cela fait mal. • utiliser dès le début avant les mauvaises habitudes ! • en ligne ou en plugin
  234. 234. Sonar • Plugin pour le JavaScript • tests, coverage, métriques,
  235. 235. Tooling
  236. 236. IDE
  237. 237. IDE • Difficile....
  238. 238. IDE • Difficile.... • Il faut essayer
  239. 239. Console des navigateurs • Debugging • Test en live
  240. 240. Questions ?
  241. 241. 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.

×