Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Pourquoi et comment j’ai appris JavaScript       Christophe Jollivet          @jollivetc
Christophe Jollivet• Neurobiologiste• Informaticien• Homme de communauté• @jollivetc
http://img42.xooimage.com/views/f/6/7/attention-troll-64ac0b.jpg/
JavaScript ?
JavaScript ?
JavaScript ?
JavaScript ?
JavaScript ?
• Erreur en ligne XXX• Cela fait un moment que c’est le bazar mais  là je ne m’en sors plus
Pourquoi ?
Flex et Silverlight
Flex et Silverlighthttp://www.flickr.com/photos/turatti/4368132629/sizes/m/in/photostream/
http://www.flickr.com/photos/bugmonkey/2844115494/sizes/z/in/photostream/
multi écrans• Responsive design• Attention à l’ergonomie
Atwood Law• «Any application that can be written in  JavaScript, will eventually be written in  JavaScript»• http://www.co...
JS mûr ?
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...
JS n’est pas maintenable
• Module Pattern• AMD
Où est monframework ?
Framework
FrameworkClient
FrameworkClient         Serveur                     Vert.X
FrameworkClient               Serveur                           Vert.X   Base de données
FrameworkClient               Serveur                           Vert.X   Base de données         Desktop
http://addyosmani.github.com/todomvc/
• One language to rule them all
• One language to rule them all• Write once run anywhere ?
JS est artisanal
Industrialisation
IndustrialisationBuild
IndustrialisationBuild                Tests
IndustrialisationBuild                TestsAudit
Comment ?
Ouverture code
«JavaScript is the onlylanguage that people feel theydon’t need to learn to use it»Doug Crockford
et .com/                   evol   un             ok s.r     : //jsboh ttp
http://blog.movereem.nl/images/javascript-the-good-parts-the-definitive-guide.jpg
Bases JavaScript et       WTF
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)• foo=+foo• foo = parseInt(foo, 10)• foo = parseFloat(foo, 10)• foo = parseInt(foo)
Truthy et Falsy
Truthy et Falsy• "foo" ou 1 sont TRUE
Truthy et Falsy• "foo" ou 1 sont TRUE• "", 0, null, undefined, NaN, void sont FALSE
Truthy et Falsy• "foo" ou 1 sont TRUE• "", 0, null, undefined, NaN, void sont FALSE• if( array.length>0 ) équivalent à  if(...
Valeur par défaut
Appel sécurisé
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
Création d’objet    Forme littérale
Création d’objet    Constructeur
Création d’objet      Piège
Création d’objet                     PiègeSi pas de new -> this du constructeur est «global»,           pas d’erreur ou de...
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 obje...
Création d’objet
SolutionunRectangle              anotherRectanglelongueur                     longueur  largeur                 largeur   ...
Point virgule
Point virgule
Conclusions• JS est mûr pour l’entreprise• JS a ses particularités : apprenez le!
Questions ?
Creative CommonsAttribution — You must attribute the work in themanner specified by the author or licensor (but not inany w...
Pourquoi et comment j'ai appris JavaScript
Pourquoi et comment j'ai appris JavaScript
Pourquoi et comment j'ai appris JavaScript
Pourquoi et comment j'ai appris JavaScript
Pourquoi et comment j'ai appris JavaScript
Pourquoi et comment j'ai appris JavaScript
Pourquoi et comment j'ai appris JavaScript
Pourquoi et comment j'ai appris JavaScript
Pourquoi et comment j'ai appris JavaScript
Pourquoi et comment j'ai appris JavaScript
Pourquoi et comment j'ai appris JavaScript
Prochain SlideShare
Chargement dans…5
×

Pourquoi et comment j'ai appris JavaScript

1 806 vues

Publié le

Slide de mon Quickie au JugSummerCamp 2012 sur pourquoi et comment un ancien détracteur de JavaScript s'est mis à faire en faire, mais surtout à pris le temps de l'apprendre.

Publié dans : Technologie
  • Soyez le premier à commenter

Pourquoi et comment j'ai appris JavaScript

  1. 1. Pourquoi et comment j’ai appris JavaScript Christophe Jollivet @jollivetc
  2. 2. Christophe Jollivet• Neurobiologiste• Informaticien• Homme de communauté• @jollivetc
  3. 3. http://img42.xooimage.com/views/f/6/7/attention-troll-64ac0b.jpg/
  4. 4. JavaScript ?
  5. 5. JavaScript ?
  6. 6. JavaScript ?
  7. 7. JavaScript ?
  8. 8. JavaScript ?
  9. 9. • Erreur en ligne XXX• Cela fait un moment que c’est le bazar mais là je ne m’en sors plus
  10. 10. Pourquoi ?
  11. 11. Flex et Silverlight
  12. 12. Flex et Silverlighthttp://www.flickr.com/photos/turatti/4368132629/sizes/m/in/photostream/
  13. 13. http://www.flickr.com/photos/bugmonkey/2844115494/sizes/z/in/photostream/
  14. 14. multi écrans• Responsive design• Attention à l’ergonomie
  15. 15. 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
  16. 16. JS mûr ?
  17. 17. JS c’est lent
  18. 18. • Enormes progrès sur les VM (V8, Rhino, XMonkey)
  19. 19. • Enormes progrès sur les VM (V8, Rhino, XMonkey)• compilateur JIT
  20. 20. • Enormes progrès sur les VM (V8, Rhino, XMonkey)• compilateur JIT• Cible du transpiling
  21. 21. • Enormes progrès sur les VM (V8, Rhino, XMonkey)• compilateur JIT• Cible du transpiling • Coffeescript, Dart, GWT...
  22. 22. JS n’est pas maintenable
  23. 23. • Module Pattern• AMD
  24. 24. Où est monframework ?
  25. 25. Framework
  26. 26. FrameworkClient
  27. 27. FrameworkClient Serveur Vert.X
  28. 28. FrameworkClient Serveur Vert.X Base de données
  29. 29. FrameworkClient Serveur Vert.X Base de données Desktop
  30. 30. http://addyosmani.github.com/todomvc/
  31. 31. • One language to rule them all
  32. 32. • One language to rule them all• Write once run anywhere ?
  33. 33. JS est artisanal
  34. 34. Industrialisation
  35. 35. IndustrialisationBuild
  36. 36. IndustrialisationBuild Tests
  37. 37. IndustrialisationBuild TestsAudit
  38. 38. Comment ?
  39. 39. Ouverture code
  40. 40. «JavaScript is the onlylanguage that people feel theydon’t need to learn to use it»Doug Crockford
  41. 41. et .com/ evol un ok s.r : //jsboh ttp
  42. 42. http://blog.movereem.nl/images/javascript-the-good-parts-the-definitive-guide.jpg
  43. 43. Bases JavaScript et WTF
  44. 44. Coercition de type
  45. 45. Coercition de type• Forcer le type d’une variable
  46. 46. Coercition de type• Forcer le type d’une variable• == fait la coercition de type
  47. 47. Coercition de type• Forcer le type d’une variable• == fait la coercition de type• === ne fait pas la coercition de type : évaluation de type
  48. 48. Coercition de type• 1 ==1 TRUE• 1===1 FALSE
  49. 49. Coercition de type
  50. 50. Coercition de type• false == false FALSE
  51. 51. Coercition de type• false == false FALSE• false == 0 TRUE
  52. 52. Coercition de type• false == false FALSE• false == 0 TRUE• " trn " == 0 TRUE
  53. 53. Coercition de type• false == false FALSE• false == 0 TRUE• " trn " == 0 TRUE• ",,," == new Array(4) TRUE
  54. 54. Coercition de type• false == undefined FALSE• false == null FALSE• null == undefined TRUE
  55. 55. Coercition de type
  56. 56. Coercition de type• if( foo === null || foo === undefined )
  57. 57. Coercition de type• if( foo === null || foo === undefined )• if( foo == null )
  58. 58. Coercition type (bonus)
  59. 59. Coercition type (bonus)• foo=+foo
  60. 60. Coercition type (bonus)• foo=+foo• foo = parseInt(foo, 10)
  61. 61. Coercition type (bonus)• foo=+foo• foo = parseInt(foo, 10)• foo = parseFloat(foo, 10)
  62. 62. Coercition type (bonus)• foo=+foo• foo = parseInt(foo, 10)• foo = parseFloat(foo, 10)• foo = parseInt(foo)
  63. 63. Truthy et Falsy
  64. 64. Truthy et Falsy• "foo" ou 1 sont TRUE
  65. 65. Truthy et Falsy• "foo" ou 1 sont TRUE• "", 0, null, undefined, NaN, void sont FALSE
  66. 66. Truthy et Falsy• "foo" ou 1 sont TRUE• "", 0, null, undefined, NaN, void sont FALSE• if( array.length>0 ) équivalent à if( array.length )
  67. 67. Valeur par défaut
  68. 68. Appel sécurisé
  69. 69. Scope
  70. 70. Scope• Syntaxe à « la C » avec bloc
  71. 71. Scope• Syntaxe à « la C » avec bloc• Le scope est la fonction
  72. 72. Scope• Syntaxe à « la C » avec bloc• Le scope est la fonction• Déclaration de variable avec «var»
  73. 73. Scope• Syntaxe à « la C » avec bloc• Le scope est la fonction• Déclaration de variable avec «var»• /! déclaration automatique
  74. 74. Déclaration
  75. 75. Déclaration
  76. 76. Création d’objet Forme littérale
  77. 77. Création d’objet Constructeur
  78. 78. Création d’objet Piège
  79. 79. Création d’objet PiègeSi pas de new -> this du constructeur est «global», pas d’erreur ou de warning !
  80. 80. ProblèmeunRectangle anotherRectanglelongueur longueur largeur largeur surface surface
  81. 81. Problème Occupation mémoireunRectangle anotherRectanglelongueur longueur largeur largeur surface surface
  82. 82. 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 objets communs dans le prototype pour la mémoire
  83. 83. Création d’objet
  84. 84. SolutionunRectangle anotherRectanglelongueur longueur largeur largeur surface Prototype
  85. 85. Point virgule
  86. 86. Point virgule
  87. 87. Conclusions• JS est mûr pour l’entreprise• JS a ses particularités : apprenez le!
  88. 88. Questions ?
  89. 89. 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.

×