JavaScript en entreprise       Christophe Jollivet
Christophe Jollivet• Neurobiologiste• Informaticien• Homme de communauté• @jollivetc
Sondages
Qui connait JavaScript ?
Autrement qu’uncopier-coller du web ?
Les autres, qui se ditqu’il devrait apprendre       JavaScript ?
Pourquoi JavaScript ?
Atwood Law• «Any application that can be written in  JavaScript, will eventually be written in  JavaScript»• http://www.co...
JS c’est lent
• Enormes progrès sur les VM (V8, Rhino,  XMonkey)
• Enormes progrès sur les VM (V8, Rhino,  XMonkey)• compilateur JIT
• Enormes progrès sur les VM (V8, Rhino,  XMonkey)• compilateur JIT• Cible du transpiling
• Enormes progrès sur les VM (V8, Rhino,  XMonkey)• compilateur JIT• Cible du transpiling • Coffeescript, Dart, GWT...
Histoire
Histoire
Histoire
Histoire
Histoire
Histoire
• Erreur en ligne XXX
• Erreur en ligne XXX• Cela fait un moment que c’est le bazar mais  là je ne m’en sors plus
La révélation
La révélation• Projet en HTML 5• De vrais développeurs JavaScript• Des ateliers
J’apprend JavaScript
«JavaScript is the onlylanguage that people feel theydon’t need to learn to use it»Doug Crockford
http://blog.movereem.nl/images/javascript-the-good-parts-the-definitive-guide.jpg
et .com/                     lun             oks.revo     : //jsboh ttp
Sommaire•   Type•   Objets et héritage•   Fonctions•   Callback•   this•   Coercition•   Scope•   Closure•   Exception•   ...
Types
Types• Number, String, Boolean, undefined• Object, function• Faiblement typé
Number• 64 bits floating point• IEEE-754 (aka Double)• Ecriture littérale • 1.024e+3 === 1024• Méthodes (toExponential, toF...
valeurs approxymatives
valeurs approxymatives (0.1 + 0.2) + 0.3 === 0.1 + (0.2 + 0.3)
valeurs approxymatives (0.1 + 0.2) + 0.3 ALSE + (0.2 + 0.3)                   === 0.1               F
valeurs approxymatives      (0.1 + 0.2) + 0.3 ALSE + (0.2 + 0.3)                        === 0.1                    F900719...
valeurs approxymatives      (0.1 + 0.2) + 0.3 ALSE + (0.2 + 0.3)                        === 0.1                    F900719...
Objet
Objet
Objet• Container de propriétés avec un nom et une  valeur
Objet• Container de propriétés avec un nom et une  valeur• nom de propriété est une string y compris ""
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’i...
Déclaration objet
Déclaration objet
Déclaration objet
Déclaration objet
Déclaration objet
Déclaration objet
Déclaration d’objet
Déclaration d’objet
Déclaration d’objet
Accès aux valeurs
Objet et héritage
Création d’objet
ProblèmeunRectangle      anotherRectanglelongueur             longueur  largeur         largeur  surface              surf...
Problème  Occupation mémoireunRectangle      anotherRectanglelongueur             longueur  largeur         largeur  surfa...
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 prop...
Création d’objet
SolutionunRectangle              anotherRectanglelongueur                     longueur  largeur                 largeur   ...
Résolution de          propriété• Se fait en remontant la chaîne de prototype• il est possible de surcharger une propriété
for in• itérateur sur les propriétés de l’objet  Les propriétés du prototype sont listées
hasOwnProperty  • TRUE si la propriétés est à l’objet et pas au     prototypeAttention si foo a une propriété ‘hasOwnPrope...
Introspection
Fonctions
FonctionConserve une référence sur son    contexte de création
FonctionConserve une référence sur son    contexte de création
Arguments
Arguments
Arguments•   Il n’y a pas d’erreur si le nombre d’arguments    et paramètres ne correspondent pas
Arguments•   Il n’y a pas d’erreur si le nombre d’arguments    et paramètres ne correspondent pas•   arguments contient la...
Arguments
Arguments       varargs
apply• Permet l’invocation d’une fonction en lui  passant un contexte et des paramètres
Apply
Callback
Callback• fonction donnée en paramètre pour des  opération asynchrone
callback
callback
callback
This
4 patterns• méthode• fonction• new• apply
this et méthode• pattern : bar.foo()• this référence l’objet contenant la méthode• binding à l’invocation
this et fonction• pattern : foo()• this est l’objet global, même si la fonction  est déclarée dans une méthode
this et fonction
this et fonctionPollution de l’espace global
this et fonction
this et fonction
this et fonction
this et new• pattern : var bar = new Foo();• création d’un objet avec lien au prototype  de la fonction et this pointe cet...
this et new
this et new
this et new
this et apply• pattern : foo.apply(bar, args);• this est lié à bar
Apply
Coercition de type
Coercition de type
Coercition de type• Forcer le type d’une variable
Coercition de type• Forcer le type d’une variable• == fait la coercition de type
Coercition de type• Forcer le type d’une variable• == fait la coercition de type• === ne fait pas la coercition de type
Coercition de type• 1 ==1   TRUE• 1===1   FALSE
Coercition de type
Coercition de type• false == false   FALSE
Coercition de type• false == false   FALSE• false == 0       TRUE
Coercition de type• false == false   FALSE• false == 0       TRUE• " trn " == 0    TRUE
Coercition de type• false == false        FALSE• false == 0            TRUE• " trn " == 0         TRUE• ",,," == new Array...
Coercition de type• false == undefined   FALSE• false == null       FALSE• null == undefined    TRUE
Coercition de type
Coercition de type• if( foo === null || foo === undefined )
Coercition de type• if( foo === null || foo === undefined )• if( foo == null )
Coercition type   (bonus)
Coercition type        (bonus)• foo=+foo
Coercition type         (bonus)• foo=+foo• foo = parseInt(foo,10)
Coercition type         (bonus)• foo=+foo• foo = parseInt(foo,10)• foo = parseFloat(foo,10)
Coercition type         (bonus)                             ‘10.2a’• foo=+foo• foo = parseInt(foo,10)• foo = parseFloat(fo...
Coercition type         (bonus)                             ‘10.2a’• foo=+foo                   NaN• foo = parseInt(foo,10...
Coercition type         (bonus)                             ‘10.2a’• foo=+foo                   NaN• foo = parseInt(foo,10...
Coercition type         (bonus)                             ‘10.2a’• foo=+foo                   NaN• foo = parseInt(foo,10...
Coercition et transitivité
Coercition et       transitivité• 0 ==   TRUE
Coercition et       transitivité• 0 ==    TRUE• 0 ==0   TRUE
Coercition et       transitivité• 0 ==    TRUE• 0 ==0   TRUE• ==0
Coercition et       transitivité• 0 ==    TRUE• 0 ==0   TRUE• ==0   FALSE
Piège
Truthy et Falsy
Truthy et Falsy• false, "", 0, null, undefined, NaN, void sont  FALSY
Truthy et Falsy• false, "", 0, null, undefined, NaN, void sont  FALSY• Tous les autres sont TRUTHY
Truthy et Falsy• false, "", 0, null, undefined, NaN, void sont  FALSY• Tous les autres sont TRUTHY • même "0" et "FALSE"
Truthy et Falsy• false, "", 0, null, undefined, NaN, void sont  FALSY• Tous les autres sont TRUTHY • même "0" et "FALSE"• i...
Truthy et Falsy• false, "", 0, null, undefined, NaN, void sont  FALSY• Tous les autres sont TRUTHY • même "0" et "FALSE"• i...
Valeur par défaut
Valeur par défautAttention si b vaut 0 car 0 est falsy
Appel sécurisé
Point virgule
Point virgule• Séparation d’expression
Point virgule• Séparation d’expression• Pas toujours obligatoire
Point virgule• Séparation d’expression• Pas toujours obligatoire• Pose problème dans la minification
Point virgule• Séparation d’expression• Pas toujours obligatoire• Pose problème dans la minification• Grand débat sur quand...
Point virgulehttps://github.com/twitter/bootstrap/issues/3057
Point virgule
Point virgule
Scope
Scope
Scope• Syntaxe à « la C » avec bloc
Scope• Syntaxe à « la C » avec bloc• Le scope est la fonction
Scope• Syntaxe à « la C » avec bloc• Le scope est la fonction• Déclaration de variable avec «var»
Scope• Syntaxe à « la C » avec bloc• Le scope est la fonction• Déclaration de variable avec «var»• /! déclaration automati...
Déclaration
Déclaration
Hoisting• Déplace les déclarations en tête du bloc
Hoisting
Hoisting
Closure• Une fonction objet contient : • une fonction (nom, paramètres, body) • une référence à l’environnement où elle a ...
Closure
Closure•Pollution de Global•Risque de collision de nom•names est modifiable
Closure
Closure•Lent car construction de names à chaque appel
Closure
Closure
Closure
Exception
throw
try catch finally
Séparation de code
namespace• Séparation de code pour limiter les  collisions de nom• Masquer le fonctionnement de votre  librairie
Namespace• Tout n’est pas dans un bloc• Tout est public
IIFE• Immediatly Invoked Function Expression• Fonction exécutée au chargement du script  et qui renvoie un objet avec les ...
IIFE
IIFE
IIFE
IIFE
Promise
Callback
Pyramide of doom
Promise• Objet avec une méthode then qui prend 3  paramètres • success callback • failure callback • progress callback (pa...
Promise• 3 états possibles • unfulfilled or pending • fulfilled or resolved • failed or rejected
Promise
Résumé
Résumé• JavaScript s’apprend !• Scope / Hoisting• this (constructeur et callback)• Héritage par prototype
Industrialisation ?
JS n’est pas maintenable
Framework
FrameworkClient
FrameworkClient         Serveur                     Vert.X
FrameworkClient               Serveur                           Vert.X   Base de données
FrameworkClient               Serveur                           Vert.X   Base de données         Desktop
• One language to rule them all
• One language to rule them all• Write once run anywhere ?
JS est artisanal
Industrialisation        Tests
IndustrialisationBuild                Tests
IndustrialisationBuild                TestsAudit
Structure
Modularisation• AMD : Asynchronous Module Definition• Chargement asynchrone en parallèle dans  son propre scope• requirejs,...
Modularisation
Modularisation
Modularisation
Modularisation
Modularisation
Grunt• Ant + Ivy du JavaScript• 2 fichiers • package.json -> dépendances et plugins • grunt.js -> configuration
NPM• Node Package Manager• provisionneur de dépendances
Bower• Provisionnement de dépendances pour la  webapp
Yeoman• Scaffolding• Intégration de Yo, Grunt et Bower• Générateur
Tests
Jasmine
Jasmine
Jasmine
Jasmine
Jasmine spies
Jasmine spies
Jasmine spies
Jasmine spies
Alternative• Mocha.js• Qunit
Bonus• Rapport de tests dans différents formats• Couverture de code
Chai.js
Sinon.js• Mock, Spies.....• Fake sur XMLHttpRequest• Fake sur Timer
CasperJs• Headless scriptable Webkit• Screenshot• Test recorder dans Chrome
CasperJs
Framework
Frameworks
Frameworks
http://addyosmani.github.com/todomvc/
Frameworks• Fonctionnalités diverses • binding • routing • templating • ......
Frameworks• Backbone• KnockoutJS• AngularJS• ember.js• Meteor
Qualité
use strict• En haut du script ou dans une fonction• Transforme en erreur certaines fautes • déclaration implicite de varia...
JSLint• attention cela fait mal.• utiliser dès le début avant les mauvaises  habitudes !• en ligne ou en plugin
Sonar• Plugin pour le JavaScript• tests, coverage, métriques,
Tooling
IDE
IDE• Difficile....
IDE• Difficile....• Il faut essayer
Console des          navigateurs• Debugging• Test en live
Questions ?
Creative CommonsAttribution — You must attribute the work in themanner specified by the author or licensor (but not inany w...
Javascript pour le développeur Java
Javascript pour le développeur Java
Javascript pour le développeur Java
Javascript pour le développeur Java
Javascript pour le développeur Java
Javascript pour le développeur Java
Javascript pour le développeur Java
Javascript pour le développeur Java
Javascript pour le développeur Java
Javascript pour le développeur Java
Javascript pour le développeur Java
Javascript pour le développeur Java
Javascript pour le développeur Java
Javascript pour le développeur Java
Javascript pour le développeur Java
Javascript pour le développeur Java
Prochain SlideShare
Chargement dans…5
×

Javascript pour le développeur Java

669 vues

Publié le

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.

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

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
669
Sur SlideShare
0
Issues des intégrations
0
Intégrations
47
Actions
Partages
0
Téléchargements
27
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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.

×