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
Upcoming SlideShare
Loading in …5
×

Pourquoi et comment j'ai appris JavaScript

1,582 views

Published on

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.

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

No Downloads
Views
Total views
1,582
On SlideShare
0
From Embeds
0
Number of Embeds
370
Actions
Shares
0
Downloads
26
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Atwood est un confondateur de StackOverflow avec Joel Spolky\n\nDERNIER POINT sortir de la zone de confort\n\n
  • \n
  • \n
  • SpiderMonkey et maintenant IonMonkey dans Firefox\n
  • SpiderMonkey et maintenant IonMonkey dans Firefox\n
  • SpiderMonkey et maintenant IonMonkey dans Firefox\n
  • SpiderMonkey et maintenant IonMonkey dans Firefox\n
  • \n
  • \n
  • \n
  • AMD = Asynchronous Module Definition\n
  • \n
  • Un peu plus plus tard sur Frameworks Client\n
  • Un peu plus plus tard sur Frameworks Client\n
  • Un peu plus plus tard sur Frameworks Client\n
  • Un peu plus plus tard sur Frameworks Client\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Build font aussi le bootstrap\nProfiling tools inclus dans les navigateurs\n
  • Build font aussi le bootstrap\nProfiling tools inclus dans les navigateurs\n
  • Build font aussi le bootstrap\nProfiling tools inclus dans les navigateurs\n
  • \n
  • J’apprend et pour cela je lis du code\n
  • \n
  • \n
  • \n
  • Javascript est utilisable du scientifique au non développeur. Pas besoin de compilateur, on le mets dans un page HTML et l’affiche directement.\nMauvaise réputation a cause de l’API DOM qui varie entre les navigateurs. Les libs JS simplifie le truc\n
  • \n
  • good parts 176 p\ndefinitive guide 1100 p\n\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Attention dernier si «011» valeur 9\n
  • Attention dernier si «011» valeur 9\n
  • Attention dernier si «011» valeur 9\n
  • Attention dernier si «011» valeur 9\n
  • Attention null et undefined sont falsy mais null==false ou undefined == false sont false\n
  • Attention null et undefined sont falsy mais null==false ou undefined == false sont false\n
  • Attention null et undefined sont falsy mais null==false ou undefined == false sont false\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • noté le changement de couleur dans IntelliJ\n
  • \n
  • \n
  • Rectangle est en fond orange parce que IntelliJ a vu le constructeur sans new.\n
  • \n
  • \n
  • \n
  • \n
  • Quand le compilateur croise erreur cherche retour à la ligne et tente insertion point virgule\n
  • \n
  • \n
  • \n
  • \n
  • 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.

    ×