SlideShare une entreprise Scribd logo
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 Silverlight




http://www.flickr.com/photos/turatti/4368132629/sizes/m/in/photostream/
http://www.flickr.com/photos/bugmonkey/2844115494/sizes/z/in/photostream/
Pourquoi et comment j'ai appris JavaScript
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.codinghorror.com/blog/
  2007/07/the-principle-of-least-power.html
JS mûr ?
JS c’est lent
Pourquoi et comment j'ai appris JavaScript
• 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
Pourquoi et comment j'ai appris JavaScript
Pourquoi et comment j'ai appris JavaScript
• Module Pattern
• AMD
Où est mon
framework ?
Framework
Framework
Client
Framework
Client         Serveur



                     Vert.X
Framework
Client               Serveur



                           Vert.X

   Base de données
Framework
Client               Serveur



                           Vert.X

   Base de données         Desktop
http://addyosmani.github.com/todomvc/
Pourquoi et comment j'ai appris JavaScript
Pourquoi et comment j'ai appris JavaScript
• One language to rule them all
• One language to rule them all
• Write once run anywhere ?
JS est artisanal
Industrialisation
Industrialisation
Build
Industrialisation
Build

                Tests
Industrialisation
Build

                Tests




Audit
Comment ?
Ouverture code
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
«JavaScript is the only
language that people feel they
don’t need to learn to use it»
Doug Crockford
Pourquoi et comment j'ai appris JavaScript
et .com/
                   evol   un
             ok s.r
     : //jsbo
h 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 :
  évaluation 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)
• 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( array.length )
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 automatique
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ège




Si pas de new -> this du constructeur est «global»,
           pas d’erreur ou de warning !
Problème
unRectangle      anotherRectangle

longueur             longueur
  largeur         largeur

  surface              surface
Problème
  Occupation mémoire
unRectangle      anotherRectangle

longueur             longueur
  largeur         largeur

  surface              surface
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
Création d’objet
Solution
unRectangle              anotherRectangle

longueur                     longueur
  largeur                 largeur


               surface

              Prototype
Point virgule
Point virgule
Conclusions


• JS est mûr pour l’entreprise
• JS a ses particularités : apprenez le!
Questions ?
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.

Contenu connexe

Tendances

Nouveautés JavaScript dans le monde Microsoft
Nouveautés JavaScript dans le monde MicrosoftNouveautés JavaScript dans le monde Microsoft
Nouveautés JavaScript dans le monde Microsoft
davrous
 
Cours1
Cours1Cours1
Cours1
jppellet82
 
Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013
Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013
Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013
Julien Jakubowski
 
Swift, opportunités et perspectives du dernier langage d'Apple
Swift, opportunités et perspectives du dernier langage d'AppleSwift, opportunités et perspectives du dernier langage d'Apple
Swift, opportunités et perspectives du dernier langage d'Apple
Damien GOSSET
 
Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !
VISEO
 
Javascript pour les Développeurs WEB
Javascript pour les Développeurs WEBJavascript pour les Développeurs WEB
Javascript pour les Développeurs WEB
Abbes Rharrab
 
Une introduction à Javascript et ECMAScript 6
Une introduction à Javascript et ECMAScript 6Une introduction à Javascript et ECMAScript 6
Une introduction à Javascript et ECMAScript 6
Jean-Baptiste Vigneron
 
Présentation JavaScript
Présentation JavaScriptPrésentation JavaScript
Présentation JavaScript
tarkan_
 
Votre mission ? Découvrir Haskell et le mettre en prod
Votre mission ? Découvrir Haskell et le mettre en prodVotre mission ? Découvrir Haskell et le mettre en prod
Votre mission ? Découvrir Haskell et le mettre en prod
Céline Louvet
 
TypeScript for dummies
TypeScript for dummiesTypeScript for dummies
TypeScript for dummies
Microsoft
 
Formation VBA Excel
Formation VBA ExcelFormation VBA Excel
Formation VBA Excel
Olivier Le Goaër
 

Tendances (11)

Nouveautés JavaScript dans le monde Microsoft
Nouveautés JavaScript dans le monde MicrosoftNouveautés JavaScript dans le monde Microsoft
Nouveautés JavaScript dans le monde Microsoft
 
Cours1
Cours1Cours1
Cours1
 
Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013
Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013
Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013
 
Swift, opportunités et perspectives du dernier langage d'Apple
Swift, opportunités et perspectives du dernier langage d'AppleSwift, opportunités et perspectives du dernier langage d'Apple
Swift, opportunités et perspectives du dernier langage d'Apple
 
Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !
 
Javascript pour les Développeurs WEB
Javascript pour les Développeurs WEBJavascript pour les Développeurs WEB
Javascript pour les Développeurs WEB
 
Une introduction à Javascript et ECMAScript 6
Une introduction à Javascript et ECMAScript 6Une introduction à Javascript et ECMAScript 6
Une introduction à Javascript et ECMAScript 6
 
Présentation JavaScript
Présentation JavaScriptPrésentation JavaScript
Présentation JavaScript
 
Votre mission ? Découvrir Haskell et le mettre en prod
Votre mission ? Découvrir Haskell et le mettre en prodVotre mission ? Découvrir Haskell et le mettre en prod
Votre mission ? Découvrir Haskell et le mettre en prod
 
TypeScript for dummies
TypeScript for dummiesTypeScript for dummies
TypeScript for dummies
 
Formation VBA Excel
Formation VBA ExcelFormation VBA Excel
Formation VBA Excel
 

Similaire à Pourquoi et comment j'ai appris JavaScript

Améliorer l'implémentation du feature flipping
Améliorer l'implémentation du feature flippingAméliorer l'implémentation du feature flipping
Améliorer l'implémentation du feature flipping
Dorra BARTAGUIZ
 
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objetsL'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
Thomas Bassetto
 
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshopConfoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Frédéric Harper
 
YLT paris js - mars 2015
YLT paris js - mars 2015YLT paris js - mars 2015
YLT paris js - mars 2015
gaelmetais
 
Bbd dans le flow nov.2012
Bbd dans le flow nov.2012Bbd dans le flow nov.2012
Bbd dans le flow nov.2012
guillaumeagilr
 
Chouette! Encore un bug! Agile Tour 2012
Chouette! Encore un bug! Agile Tour 2012Chouette! Encore un bug! Agile Tour 2012
Chouette! Encore un bug! Agile Tour 2012
AgileCoach.net
 
Trucs et astuces sur le dévelopment Android
Trucs et astuces sur le dévelopment AndroidTrucs et astuces sur le dévelopment Android
Trucs et astuces sur le dévelopment Android
Thierry-Dimitri Roy
 
Industrialiser le contrat dans un projet PHP
Industrialiser le contrat dans un projet PHPIndustrialiser le contrat dans un projet PHP
Industrialiser le contrat dans un projet PHP
halleck45
 
GetText / Rails - FR
GetText / Rails - FRGetText / Rails - FR
GetText / Rails - FR
Sylvain Abélard
 
GetText / Rails
GetText / RailsGetText / Rails
GetText / Rails
Sylvain Abélard
 
Usine Logicielle 2013
Usine Logicielle 2013Usine Logicielle 2013
Usine Logicielle 2013
Stéphane Liétard
 
Sortir de l’ère des héros - HumanTalks Paris Mars 2017
Sortir de l’ère des héros - HumanTalks Paris Mars 2017Sortir de l’ère des héros - HumanTalks Paris Mars 2017
Sortir de l’ère des héros - HumanTalks Paris Mars 2017
Jean-Pierre Lambert
 
Tirer parti des périphériques mobiles dans une application web : qui a dit qu...
Tirer parti des périphériques mobiles dans une application web : qui a dit qu...Tirer parti des périphériques mobiles dans une application web : qui a dit qu...
Tirer parti des périphériques mobiles dans une application web : qui a dit qu...
Christophe Porteneuve
 
Le Nouvel Ops XebiCon'15
Le Nouvel Ops XebiCon'15Le Nouvel Ops XebiCon'15
Le Nouvel Ops XebiCon'15
Séven Le Mesle
 
TDD/BDD: ou comment j’ai appris à ne plus m’en faire avec les tests (et la doc)
TDD/BDD: ou comment j’ai appris à ne plus m’en faire avec les tests (et la doc)TDD/BDD: ou comment j’ai appris à ne plus m’en faire avec les tests (et la doc)
TDD/BDD: ou comment j’ai appris à ne plus m’en faire avec les tests (et la doc)
French Scrum User Group
 
Un site web responsive en une heure
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heure
Raphaël Goetter
 
Formation JavaScript - Guide de démarrage rapide
Formation JavaScript - Guide de démarrage rapideFormation JavaScript - Guide de démarrage rapide
Formation JavaScript - Guide de démarrage rapide
Tarek Jellali
 
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveauxMobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Frédéric Harper
 
DDD FOR POs.pdf
DDD FOR POs.pdfDDD FOR POs.pdf
DDD FOR POs.pdf
Guillaume Saint Etienne
 
Développement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs WebDéveloppement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs Web
Yoann Gotthilf
 

Similaire à Pourquoi et comment j'ai appris JavaScript (20)

Améliorer l'implémentation du feature flipping
Améliorer l'implémentation du feature flippingAméliorer l'implémentation du feature flipping
Améliorer l'implémentation du feature flipping
 
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objetsL'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
 
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshopConfoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
 
YLT paris js - mars 2015
YLT paris js - mars 2015YLT paris js - mars 2015
YLT paris js - mars 2015
 
Bbd dans le flow nov.2012
Bbd dans le flow nov.2012Bbd dans le flow nov.2012
Bbd dans le flow nov.2012
 
Chouette! Encore un bug! Agile Tour 2012
Chouette! Encore un bug! Agile Tour 2012Chouette! Encore un bug! Agile Tour 2012
Chouette! Encore un bug! Agile Tour 2012
 
Trucs et astuces sur le dévelopment Android
Trucs et astuces sur le dévelopment AndroidTrucs et astuces sur le dévelopment Android
Trucs et astuces sur le dévelopment Android
 
Industrialiser le contrat dans un projet PHP
Industrialiser le contrat dans un projet PHPIndustrialiser le contrat dans un projet PHP
Industrialiser le contrat dans un projet PHP
 
GetText / Rails - FR
GetText / Rails - FRGetText / Rails - FR
GetText / Rails - FR
 
GetText / Rails
GetText / RailsGetText / Rails
GetText / Rails
 
Usine Logicielle 2013
Usine Logicielle 2013Usine Logicielle 2013
Usine Logicielle 2013
 
Sortir de l’ère des héros - HumanTalks Paris Mars 2017
Sortir de l’ère des héros - HumanTalks Paris Mars 2017Sortir de l’ère des héros - HumanTalks Paris Mars 2017
Sortir de l’ère des héros - HumanTalks Paris Mars 2017
 
Tirer parti des périphériques mobiles dans une application web : qui a dit qu...
Tirer parti des périphériques mobiles dans une application web : qui a dit qu...Tirer parti des périphériques mobiles dans une application web : qui a dit qu...
Tirer parti des périphériques mobiles dans une application web : qui a dit qu...
 
Le Nouvel Ops XebiCon'15
Le Nouvel Ops XebiCon'15Le Nouvel Ops XebiCon'15
Le Nouvel Ops XebiCon'15
 
TDD/BDD: ou comment j’ai appris à ne plus m’en faire avec les tests (et la doc)
TDD/BDD: ou comment j’ai appris à ne plus m’en faire avec les tests (et la doc)TDD/BDD: ou comment j’ai appris à ne plus m’en faire avec les tests (et la doc)
TDD/BDD: ou comment j’ai appris à ne plus m’en faire avec les tests (et la doc)
 
Un site web responsive en une heure
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heure
 
Formation JavaScript - Guide de démarrage rapide
Formation JavaScript - Guide de démarrage rapideFormation JavaScript - Guide de démarrage rapide
Formation JavaScript - Guide de démarrage rapide
 
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveauxMobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
 
DDD FOR POs.pdf
DDD FOR POs.pdfDDD FOR POs.pdf
DDD FOR POs.pdf
 
Développement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs WebDéveloppement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs Web
 

Pourquoi et comment j'ai appris JavaScript

Notes de l'éditeur

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. Atwood est un confondateur de StackOverflow avec Joel Spolky\n\nDERNIER POINT sortir de la zone de confort\n\n
  15. \n
  16. \n
  17. SpiderMonkey et maintenant IonMonkey dans Firefox\n
  18. SpiderMonkey et maintenant IonMonkey dans Firefox\n
  19. SpiderMonkey et maintenant IonMonkey dans Firefox\n
  20. SpiderMonkey et maintenant IonMonkey dans Firefox\n
  21. \n
  22. \n
  23. \n
  24. AMD = Asynchronous Module Definition\n
  25. \n
  26. Un peu plus plus tard sur Frameworks Client\n
  27. Un peu plus plus tard sur Frameworks Client\n
  28. Un peu plus plus tard sur Frameworks Client\n
  29. Un peu plus plus tard sur Frameworks Client\n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. Build font aussi le bootstrap\nProfiling tools inclus dans les navigateurs\n
  36. Build font aussi le bootstrap\nProfiling tools inclus dans les navigateurs\n
  37. Build font aussi le bootstrap\nProfiling tools inclus dans les navigateurs\n
  38. \n
  39. J’apprend et pour cela je lis du code\n
  40. \n
  41. \n
  42. \n
  43. 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
  44. \n
  45. good parts 176 p\ndefinitive guide 1100 p\n\n\n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n
  53. \n
  54. \n
  55. \n
  56. \n
  57. \n
  58. Attention dernier si «011» valeur 9\n
  59. Attention dernier si «011» valeur 9\n
  60. Attention dernier si «011» valeur 9\n
  61. Attention dernier si «011» valeur 9\n
  62. Attention null et undefined sont falsy mais null==false ou undefined == false sont false\n
  63. Attention null et undefined sont falsy mais null==false ou undefined == false sont false\n
  64. Attention null et undefined sont falsy mais null==false ou undefined == false sont false\n
  65. \n
  66. \n
  67. \n
  68. \n
  69. \n
  70. \n
  71. \n
  72. noté le changement de couleur dans IntelliJ\n
  73. \n
  74. \n
  75. Rectangle est en fond orange parce que IntelliJ a vu le constructeur sans new.\n
  76. \n
  77. \n
  78. \n
  79. \n
  80. Quand le compilateur croise erreur cherche retour à la ligne et tente insertion point virgule\n
  81. \n
  82. \n
  83. \n
  84. \n