Javascript pour le développeur Java

810 views

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
810
On SlideShare
0
From Embeds
0
Number of Embeds
47
Actions
Shares
0
Downloads
38
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Javascript pour le développeur Java

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

×