JavaScript pour le
développeur Java
Christophe Jollivet
Christophe Jollivet
• Neurobiologiste
• Informaticien
• Homme de communauté
• @jollivetc
Sondages
Qui connait JavaScript ?
Autrement qu’un
copier-coller du web ?
Les autres, qui se dit
qu’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...
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
• Projets en HTML 5
• De vrais développeurs JavaScript
• Des ateliers
J’apprend JavaScript
«JavaScript is the only
language that people feel they
don’t need to learn to use it»
Doug Crockford
Java is to JavaScript
Java is to JavaScript
What ham is to hamster
http://blog.movereem.nl/images/javascript-the-good-parts-the-definitive-guide.jpg
http://jsbooks.revolunet.com/
Tour de JavaScript
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,...
valeurs approximatives
valeurs approximatives
(0.1 + 0.2) + 0.3 === 0.1 + (0.2 + 0.3)
valeurs approximatives
(0.1 + 0.2) + 0.3 === 0.1 + (0.2 + 0.3)
FALSE
valeurs approximatives
9007199254740992 === 9007199254740992 + 1
(0.1 + 0.2) + 0.3 === 0.1 + (0.2 + 0.3)
FALSE
valeurs approximatives
9007199254740992 === 9007199254740992 + 1
TRUE
(0.1 + 0.2) + 0.3 === 0.1 + (0.2 + 0.3)
FALSE
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...
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
Introspection
Objet et héritage
Création d’objet
Problème
surface surface
longueur
largeur
longueur
largeur
unRectangle anotherRectangle
Problème
surface surface
longueur
largeur
longueur
largeur
unRectangle anotherRectangle
Occupation mémoire
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 pro...
Création d’objet
Solution
longueur
largeur
longueur
largeur
unRectangle anotherRectangle
surface
Prototype
Extension
• Ajout d’une méthode dans un prototype
• la méthode est alors disponible pour
toutes les instances existantes e...
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é est à l’objet et pas au
prototype
Attention si foo a une propriété ‘hasOwnProperty’
Fonctions
Fonction
Conserve une référence sur son
contexte de création
Fonction
Conserve 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 list...
Arguments
Arguments
varargs
apply
• Permet l’invocation d’une fonction en lui
passant un contexte et des paramètres
Apply
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 fonction
Pollution 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 ce...
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(4) TRUE
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)
• foo=+foo
• foo = parseInt(foo,10)
• foo = parseFloat(foo,10)
‘10.2a’
Coercition type
(bonus)
• foo=+foo
• foo = parseInt(foo,10)
• foo = parseFloat(foo,10)
‘10.2a’
NaN
Coercition type
(bonus)
• foo=+foo
• foo = parseInt(foo,10)
• foo = parseFloat(foo,10)
‘10.2a’
NaN
10
Coercition type
(bonus)
• foo=+foo
• foo = parseInt(foo,10)
• foo = parseFloat(foo,10)
‘10.2a’
NaN
10
10.2
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"
•...
Truthy et Falsy
• false, "", 0, null, undefined, NaN, void sont
FALSY
• Tous les autres sont TRUTHY
• même "0" et "FALSE"
•...
Valeur par défaut
Valeur par défaut
Attention 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 q...
Point virgule
https://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 auto...
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
Callback
Callback
• fonction donnée en paramètre pour des
opération asynchrone
callback
callback
callback
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
Résumé
Résumé
• JavaScript s’apprend !
• Scope / Hoisting
• this (constructeur et callback)
• Héritage par prototype
Industrialisation ?
JS c’est lent
• Enormes progrès sur lesVM (V8, Rhino,
XMonkey)
• Enormes progrès sur lesVM (V8, Rhino,
XMonkey)
• compilateur JIT
• Enormes progrès sur lesVM (V8, Rhino,
XMonkey)
• compilateur JIT
• Cible du transpiling
• Enormes progrès sur lesVM (V8, Rhino,
XMonkey)
• compilateur JIT
• Cible du transpiling
• Coffeescript, Dart, GWT...
JS n’est pas maintenable
Framework
Framework
Client
Framework
Client
Vert.X
Serveur
Framework
Client
Vert.X
Serveur
Base de données
Framework
Client
Vert.X
Serveur
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
Industrialisation
Build
Tests
Industrialisation
Build
Audit
Tests
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
grunt.js
package.json
NPM
• Node Package Manager
• provisionneur de dépendances
Bower
• Provisionnement de dépendances pour la
webapp
Yeoman
• Scaffolding
• Intégration deYo, 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
Integration Continue
Job dédié
• commande shell
Plugin Maven
• Lancement des outils en ligne de
commande
Aggregation résultats
• Reporter au format XUnit
• Plugin Jenkins TAP
Framework
Frameworks
Frameworks
http://addyosmani.github.com/todomvc/
Frameworks
• Fonctionnalités diverses
• binding
• routing
• templating
• ......
Frameworks
• Backbone
• KnockoutJS
• AngularJS
• ember.js
• Meteor
• chfo
Qualité
use strict
• En haut du script ou dans une fonction
• Transforme en erreur certaines fautes
• déclaration implicite de var...
JSLint / JSHint
• 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 Commons
Attribution —You must attribute the work in the
manner specified by the author or licensor (but not in
any...
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
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

1 557 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 557
Sur SlideShare
0
Issues des intégrations
0
Intégrations
458
Actions
Partages
0
Téléchargements
129
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.

×