JavaScript pour le développeur Java

250
JavaScript pour le développeur Java Christophe Jollivet

description

Version of my presentation about JavaScript for the Java Developer that was played at "Codeur en Seine" conference.

Transcript of JavaScript pour le développeur Java

Page 1: JavaScript pour le développeur Java

JavaScript pour le développeur Java

Christophe Jollivet

Page 2: JavaScript pour le développeur Java

Christophe Jollivet

• Neurobiologiste

• Informaticien

• Homme de communauté

!

• @jollivetc

Page 3: JavaScript pour le développeur Java

Sondages

Page 4: JavaScript pour le développeur Java

Qui connait JavaScript ?

Page 5: JavaScript pour le développeur Java

Autrement qu’un copier-coller du web ?

Page 6: JavaScript pour le développeur Java

Les autres, qui se dit qu’il devrait apprendre

JavaScript ?

Page 7: JavaScript pour le développeur Java

Pourquoi JavaScript ?

Page 8: JavaScript pour le développeur Java

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

Page 9: JavaScript pour le développeur Java

J’apprend JavaScript

Page 10: JavaScript pour le développeur Java
Page 11: JavaScript pour le développeur Java
Page 12: JavaScript pour le développeur Java
Page 13: JavaScript pour le développeur Java
Page 14: JavaScript pour le développeur Java

«JavaScript is the only language that people feel they don’t need to learn to use it»

Doug Crockford

Page 15: JavaScript pour le développeur Java

Java is to JavaScript

Page 16: JavaScript pour le développeur Java

Java is to JavaScript

What ham is to hamster

Page 17: JavaScript pour le développeur Java

http://blog.movereem.nl/images/javascript-the-good-parts-the-definitive-guide.jpg

Page 18: JavaScript pour le développeur Java
Page 19: JavaScript pour le développeur Java

http://jsbooks.revolunet.com/

Page 20: JavaScript pour le développeur Java
Page 21: JavaScript pour le développeur Java

Tour de JavaScript

Page 22: JavaScript pour le développeur Java

Types

Page 23: JavaScript pour le développeur Java

Types

• Number, String, Boolean, undefined

• Object, function

• Faiblement typé

Page 24: JavaScript pour le développeur Java

Number

• 64 bits floating point

• IEEE-754 (aka Double)

• Ecriture littérale

• 1.024e+3 === 1024

• Méthodes (toExponential, toFixed, toPrecision...)

Page 25: JavaScript pour le développeur Java

valeurs approximatives

Page 26: JavaScript pour le développeur Java

valeurs approximatives

(0.1 + 0.2) + 0.3 === 0.1 + (0.2 + 0.3)

Page 27: JavaScript pour le développeur Java

valeurs approximatives

(0.1 + 0.2) + 0.3 === 0.1 + (0.2 + 0.3)FALSE

Page 28: JavaScript pour le développeur Java

valeurs approximatives

9007199254740992 === 9007199254740992 + 1

(0.1 + 0.2) + 0.3 === 0.1 + (0.2 + 0.3)FALSE

Page 29: JavaScript pour le développeur Java

valeurs approximatives

9007199254740992 === 9007199254740992 + 1TRUE

(0.1 + 0.2) + 0.3 === 0.1 + (0.2 + 0.3)FALSE

Page 30: JavaScript pour le développeur Java

Objet

Page 31: JavaScript pour le développeur Java

Objet

Page 32: JavaScript pour le développeur Java

Objet

• Container de propriétés avec un nom et une valeur

Page 33: JavaScript pour le développeur Java

Objet

• Container de propriétés avec un nom et une valeur

• nom de propriété est une string y compris ""

Page 34: JavaScript pour le développeur Java

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

Page 35: JavaScript pour le développeur Java

Déclaration objet

Page 36: JavaScript pour le développeur Java

Déclaration objet

Page 37: JavaScript pour le développeur Java

Déclaration objet

Page 38: JavaScript pour le développeur Java

Déclaration objet

Page 39: JavaScript pour le développeur Java

Déclaration objet

Page 40: JavaScript pour le développeur Java

Déclaration objet

Page 41: JavaScript pour le développeur Java

Déclaration objet

Classe anonyme

Page 42: JavaScript pour le développeur Java

Déclaration d’objet

Page 43: JavaScript pour le développeur Java

Déclaration d’objet

Page 44: JavaScript pour le développeur Java

Déclaration d’objet

Page 45: JavaScript pour le développeur Java

Déclaration d’objet

Page 46: JavaScript pour le développeur Java

Accès aux valeurs

Page 47: JavaScript pour le développeur Java

Objet et héritage

Page 48: JavaScript pour le développeur Java

Création d’objet

Page 49: JavaScript pour le développeur Java

Problème

surface surface

longueur

largeur

longueur

largeur

unRectangle anotherRectangle

Page 50: JavaScript pour le développeur Java

Problème

surface surface

longueur

largeur

longueur

largeur

unRectangle anotherRectangle

Occupation mémoire

Page 51: JavaScript pour le développeur Java

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

Page 52: JavaScript pour le développeur Java

Création d’objet

Page 53: JavaScript pour le développeur Java

Solution

longueur

largeur

longueur

largeur

unRectangle anotherRectangle

surface

Prototype

Page 54: JavaScript pour le développeur Java

Résolution de propriété

• Se fait en remontant la chaîne de prototype

• il est possible de surcharger une propriété

Page 55: JavaScript pour le développeur Java

Extension• Ajout d’une méthode dans un prototype

• la méthode est alors disponible pour toutes les instances existantes et à venir

Page 56: JavaScript pour le développeur Java

for in

• itérateur sur les propriétés de l’objet

Les propriétés du prototype sont listées

Page 57: JavaScript pour le développeur Java

hasOwnProperty

• TRUE si la propriété est à l’objet et pas au prototype

Attention si foo a une propriété ‘hasOwnProperty’

Page 58: JavaScript pour le développeur Java

Introspection

Page 59: JavaScript pour le développeur Java

Fonctions

Page 60: JavaScript pour le développeur Java

Fonction

Conserve une référence sur son contexte de création

Page 61: JavaScript pour le développeur Java

Fonction

Conserve une référence sur son contexte de création

Page 62: JavaScript pour le développeur Java

Fonction

Conserve une référence sur son contexte de création

Méthode statique utilitaire

Page 63: JavaScript pour le développeur Java

Arguments

Page 64: JavaScript pour le développeur Java

Arguments

Page 65: JavaScript pour le développeur Java

Arguments

• Il n’y a pas d’erreur si le nombre d’arguments et paramètres ne correspondent pas

Page 66: JavaScript pour le développeur Java

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

Page 67: JavaScript pour le développeur Java

Arguments

Page 68: JavaScript pour le développeur Java

Arguments

varargs

Page 69: JavaScript pour le développeur Java

apply

• Permet l’invocation d’une fonction en lui passant un contexte et des paramètres

Page 70: JavaScript pour le développeur Java
Page 71: JavaScript pour le développeur Java

Apply

Page 72: JavaScript pour le développeur Java

This

Page 73: JavaScript pour le développeur Java

4 patterns

• méthode

• fonction

• new

• apply

Page 74: JavaScript pour le développeur Java

this et méthode

• pattern : bar.foo()

• this référence l’objet contenant la méthode

• binding à l’invocation

Page 75: JavaScript pour le développeur Java

this et fonction

• pattern : foo()

• this est l’objet global, même si la fonction est déclarée dans une méthode

Page 76: JavaScript pour le développeur Java

this et fonction

Page 77: JavaScript pour le développeur Java

this et fonction

Pollution de l’espace global

Page 78: JavaScript pour le développeur Java

this et fonction

Page 79: JavaScript pour le développeur Java

this et fonction

Page 80: JavaScript pour le développeur Java

this et fonction

Page 81: JavaScript pour le développeur Java

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

Page 82: JavaScript pour le développeur Java

this et new

Page 83: JavaScript pour le développeur Java

this et new

Page 84: JavaScript pour le développeur Java

this et new

Page 85: JavaScript pour le développeur Java

this et apply

• pattern : foo.apply(bar, args);

• this est lié à bar

Page 86: JavaScript pour le développeur Java

Apply

Page 87: JavaScript pour le développeur Java

Coercition de type

Page 88: JavaScript pour le développeur Java

Coercition de type

Page 89: JavaScript pour le développeur Java

Coercition de type

• Forcer le type d’une variable

Page 90: JavaScript pour le développeur Java

Coercition de type

• Forcer le type d’une variable

• == fait la coercition de type

Page 91: JavaScript pour le développeur Java

Coercition de type

• Forcer le type d’une variable

• == fait la coercition de type

• === ne fait pas la coercition de type

Page 92: JavaScript pour le développeur Java

Coercition de type

• '1' ==1 TRUE

• '1'===1 FALSE

Page 93: JavaScript pour le développeur Java

Coercition de type

Page 94: JavaScript pour le développeur Java

Coercition de type

• false == 'false' FALSE

Page 95: JavaScript pour le développeur Java

Coercition de type

• false == 'false' FALSE

• false == '0' TRUE

Page 96: JavaScript pour le développeur Java

Coercition de type

• false == 'false' FALSE

• false == '0' TRUE

• " \t\r\n " == 0 TRUE

Page 97: JavaScript pour le développeur Java

Coercition de type

• false == 'false' FALSE

• false == '0' TRUE

• " \t\r\n " == 0 TRUE

• ",,," == new Array(4) TRUE

Page 98: JavaScript pour le développeur Java

Coercition de type

• false == undefined FALSE

• false == null FALSE

• null == undefined TRUE

Page 99: JavaScript pour le développeur Java

Coercition de type

Page 100: JavaScript pour le développeur Java

Coercition de type

• if( foo === null || foo === undefined )

Page 101: JavaScript pour le développeur Java

Coercition de type

• if( foo === null || foo === undefined )

• if( foo == null )

Page 102: JavaScript pour le développeur Java

Coercition type (bonus)

Page 103: JavaScript pour le développeur Java

Coercition type (bonus)

• foo=+foo

Page 104: JavaScript pour le développeur Java

Coercition type (bonus)

• foo=+foo

• foo = parseInt(foo,10)

Page 105: JavaScript pour le développeur Java

Coercition type (bonus)

• foo=+foo

• foo = parseInt(foo,10)

• foo = parseFloat(foo,10)

Page 106: JavaScript pour le développeur Java

Coercition type (bonus)

• foo=+foo

• foo = parseInt(foo,10)

• foo = parseFloat(foo,10)

‘10.2a’

Page 107: JavaScript pour le développeur Java

Coercition type (bonus)

• foo=+foo

• foo = parseInt(foo,10)

• foo = parseFloat(foo,10)

‘10.2a’

NaN

Page 108: JavaScript pour le développeur Java

Coercition type (bonus)

• foo=+foo

• foo = parseInt(foo,10)

• foo = parseFloat(foo,10)

‘10.2a’

NaN

10

Page 109: JavaScript pour le développeur Java

Coercition type (bonus)

• foo=+foo

• foo = parseInt(foo,10)

• foo = parseFloat(foo,10)

‘10.2a’

NaN

10

10.2

Page 110: JavaScript pour le développeur Java

Coercition et transitivité

Page 111: JavaScript pour le développeur Java

Coercition et transitivité

• 0 =='' TRUE

Page 112: JavaScript pour le développeur Java

Coercition et transitivité

• 0 =='' TRUE

• 0 =='0' TRUE

Page 113: JavaScript pour le développeur Java

Coercition et transitivité

• 0 =='' TRUE

• 0 =='0' TRUE

• ''=='0'

Page 114: JavaScript pour le développeur Java

Coercition et transitivité

• 0 =='' TRUE

• 0 =='0' TRUE

• ''=='0' FALSE

Page 115: JavaScript pour le développeur Java

Piège

Page 116: JavaScript pour le développeur Java

Truthy et Falsy

Page 117: JavaScript pour le développeur Java

Truthy et Falsy

• false, "", 0, null, undefined, NaN, void sont FALSY

Page 118: JavaScript pour le développeur Java

Truthy et Falsy

• false, "", 0, null, undefined, NaN, void sont FALSY

• Tous les autres sont TRUTHY

Page 119: JavaScript pour le développeur Java

Truthy et Falsy

• false, "", 0, null, undefined, NaN, void sont FALSY

• Tous les autres sont TRUTHY

• même "0" et "FALSE"

Page 120: JavaScript pour le développeur Java

Truthy et Falsy

• false, "", 0, null, undefined, NaN, void sont FALSY

• Tous les autres sont TRUTHY

• même "0" et "FALSE"

• if( array.length )

Page 121: JavaScript pour le développeur Java

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 )

Page 122: JavaScript pour le développeur Java

Valeur par défaut

Page 123: JavaScript pour le développeur Java

Valeur par défaut

Attention si b vaut 0 car 0 est falsy

Page 124: JavaScript pour le développeur Java

Appel sécurisé

Page 125: JavaScript pour le développeur Java
Page 126: JavaScript pour le développeur Java
Page 127: JavaScript pour le développeur Java

Point virgule

Page 128: JavaScript pour le développeur Java

Point virgule

• Séparation d’expression

Page 129: JavaScript pour le développeur Java

Point virgule

• Séparation d’expression

• Pas toujours obligatoire

Page 130: JavaScript pour le développeur Java

Point virgule

• Séparation d’expression

• Pas toujours obligatoire

• Pose problème dans la minification

Page 131: JavaScript pour le développeur Java

Point virgule

• Séparation d’expression

• Pas toujours obligatoire

• Pose problème dans la minification

• Grand débat sur quand il est nécessaire

Page 132: JavaScript pour le développeur Java

Point virgule

https://github.com/twitter/bootstrap/issues/3057

Page 133: JavaScript pour le développeur Java

Point virgule

Page 134: JavaScript pour le développeur Java

Point virgule

Page 135: JavaScript pour le développeur Java

Scope

Page 136: JavaScript pour le développeur Java

Scope

Page 137: JavaScript pour le développeur Java

Scope

• Syntaxe à « la C » avec bloc

Page 138: JavaScript pour le développeur Java

Scope

• Syntaxe à « la C » avec bloc

• Le scope est la fonction

Page 139: JavaScript pour le développeur Java

Scope

• Syntaxe à « la C » avec bloc

• Le scope est la fonction

• Déclaration de variable avec «var»

Page 140: JavaScript pour le développeur Java

Scope

• Syntaxe à « la C » avec bloc

• Le scope est la fonction

• Déclaration de variable avec «var»

• /!\ déclaration automatique

Page 141: JavaScript pour le développeur Java

Déclaration

Page 142: JavaScript pour le développeur Java

Déclaration

Page 143: JavaScript pour le développeur Java

Hoisting

• Déplace les déclarations en tête du bloc

Page 144: JavaScript pour le développeur Java

Hoisting

Page 145: JavaScript pour le développeur Java

Hoisting

Page 146: JavaScript pour le développeur Java

Hoisting

Page 147: JavaScript pour le développeur Java

Closure

• Une fonction objet contient :

• une fonction (nom, paramètres, body)

• une référence à l’environnement où elle a été créée (contexte)

Page 148: JavaScript pour le développeur Java

Closure

Page 149: JavaScript pour le développeur Java

Closure

•Pollution de Global •Risque de collision de nom •names est modifiable

Page 150: JavaScript pour le développeur Java

Closure

Page 151: JavaScript pour le développeur Java

Closure

•Lent car construction de names à chaque appel

Page 152: JavaScript pour le développeur Java

Closure

Page 153: JavaScript pour le développeur Java

Closure

Page 154: JavaScript pour le développeur Java

Closure

Page 155: JavaScript pour le développeur Java

Exception

Page 156: JavaScript pour le développeur Java

throw

Page 157: JavaScript pour le développeur Java

try catch finally

Page 158: JavaScript pour le développeur Java

Séparation de code

Page 159: JavaScript pour le développeur Java

namespace

• Séparation de code pour limiter les collisions de nom

• Masquer le fonctionnement de votre librairie

Page 160: JavaScript pour le développeur Java

Namespace

• Tout n’est pas dans un bloc • Tout est public

Page 161: JavaScript pour le développeur Java

IIFE

• Immediatly Invoked Function Expression

• Fonction exécutée au chargement du script et qui renvoie un objet avec les fonctions/variables utiles.

Page 162: JavaScript pour le développeur Java

IIFE

Page 163: JavaScript pour le développeur Java

IIFE

Page 164: JavaScript pour le développeur Java

IIFE

Page 165: JavaScript pour le développeur Java

IIFE

Page 166: JavaScript pour le développeur Java

Callback

Page 167: JavaScript pour le développeur Java

Callback

• fonction donnée en paramètre pour des opération asynchrone

Page 168: JavaScript pour le développeur Java

callback

Page 169: JavaScript pour le développeur Java

callback

Page 170: JavaScript pour le développeur Java

callback

Page 171: JavaScript pour le développeur Java

Promise

Page 172: JavaScript pour le développeur Java

Callback

Page 173: JavaScript pour le développeur Java
Page 174: JavaScript pour le développeur Java

Pyramide of doom

Page 175: JavaScript pour le développeur Java
Page 176: JavaScript pour le développeur Java
Page 177: JavaScript pour le développeur Java

Promise

• Objet avec une méthode then qui prend 3 paramètres

• success callback

• failure callback

• progress callback (pas obligatoire)

Page 178: JavaScript pour le développeur Java

Promise

• 3 états possibles

• unfulfilled or pending

• fulfilled or resolved

• failed or rejected

Page 179: JavaScript pour le développeur Java
Page 180: JavaScript pour le développeur Java
Page 181: JavaScript pour le développeur Java
Page 182: JavaScript pour le développeur Java
Page 183: JavaScript pour le développeur Java
Page 184: JavaScript pour le développeur Java
Page 185: JavaScript pour le développeur Java

Résumé

Page 186: JavaScript pour le développeur Java

Résumé

• JavaScript s’apprend !

• Scope / Hoisting

• this (constructeur et callback)

• Héritage par prototype

• asynchrone

Page 187: JavaScript pour le développeur Java

Industrialisation ?

Page 188: JavaScript pour le développeur Java

JS c’est lent

Page 189: JavaScript pour le développeur Java
Page 190: JavaScript pour le développeur Java

• Enormes progrès sur les VM (V8, Rhino, XMonkey)

Page 191: JavaScript pour le développeur Java

• Enormes progrès sur les VM (V8, Rhino, XMonkey)

• compilateur JIT

Page 192: JavaScript pour le développeur Java

• Enormes progrès sur les VM (V8, Rhino, XMonkey)

• compilateur JIT

• Cible du transpiling

Page 193: JavaScript pour le développeur Java

• Enormes progrès sur les VM (V8, Rhino, XMonkey)

• compilateur JIT

• Cible du transpiling

• Coffeescript, Dart, GWT...

Page 194: JavaScript pour le développeur Java

JS n’est pas maintenable

Page 195: JavaScript pour le développeur Java
Page 196: JavaScript pour le développeur Java
Page 197: JavaScript pour le développeur Java
Page 198: JavaScript pour le développeur Java

JS est artisanal

Page 199: JavaScript pour le développeur Java

IndustrialisationBuild

Audit

Tests

Page 200: JavaScript pour le développeur Java

Structure

Page 201: JavaScript pour le développeur Java

Modularisation

• AMD : Asynchronous Module Definition

• Chargement asynchrone en parallèle dans son propre scope

• requirejs, Dojo, JQuery, Curl, Backdraft

Page 202: JavaScript pour le développeur Java

Modularisation

Page 203: JavaScript pour le développeur Java

Modularisation

Page 204: JavaScript pour le développeur Java

Modularisation

Page 205: JavaScript pour le développeur Java

Modularisation

Page 206: JavaScript pour le développeur Java

Modularisation

Page 207: JavaScript pour le développeur Java

Automatisation

Page 208: JavaScript pour le développeur Java

NPM

• Node Package Module

• installation d’outils et de plugins

• Permet l’installation d’outils de façon globale ou locale

Page 209: JavaScript pour le développeur Java

Grunt

• The JavaScript Task Runner

• 2 fichiers

• package.json -> dépendances et plugins

• Gruntfile.js -> configuration

Page 210: JavaScript pour le développeur Java

Gruntfile.js

Page 211: JavaScript pour le développeur Java

Gruntfile.js

Page 212: JavaScript pour le développeur Java

package.json

Page 213: JavaScript pour le développeur Java

Bower

• Provisionnement de dépendances pour la webapp

• Clone de repository Github

Page 214: JavaScript pour le développeur Java

bower.json

Page 215: JavaScript pour le développeur Java

Yeoman

• Scaffolding

• Intégration de Yo, Grunt et Bower

• Générateur

Page 216: JavaScript pour le développeur Java

Tests

Page 217: JavaScript pour le développeur Java

Jasmine

Page 218: JavaScript pour le développeur Java

Jasmine

Page 219: JavaScript pour le développeur Java

Jasmine

Page 220: JavaScript pour le développeur Java

Jasmine

Page 221: JavaScript pour le développeur Java

Jasmine spies

Page 222: JavaScript pour le développeur Java

Jasmine spies

Page 223: JavaScript pour le développeur Java

Jasmine spies

Page 224: JavaScript pour le développeur Java

Jasmine spies

Page 225: JavaScript pour le développeur Java

Alternative

• Mocha.js

• Qunit

Page 226: JavaScript pour le développeur Java

Bonus

• Rapport de tests dans différents formats

• Couverture de code

Page 227: JavaScript pour le développeur Java

Chai.js

Page 228: JavaScript pour le développeur Java

Sinon.js

• Mock, Spies.....

• Fake sur XMLHttpRequest

• Fake sur Timer

Page 229: JavaScript pour le développeur Java

CasperJs

• Headless scriptable Webkit

• Screenshot

• Test recorder dans Chrome

Page 230: JavaScript pour le développeur Java

CasperJs

Page 231: JavaScript pour le développeur Java

Integration Continue

Page 232: JavaScript pour le développeur Java

Job dédié

• commande shell

• NodeJS Jenkins Plugin

Page 233: JavaScript pour le développeur Java

Plugin Maven

• Lancement des outils en ligne de commande

Page 234: JavaScript pour le développeur Java

Aggregation résultats

• Reporter au format XUnit

• Plugin Jenkins TAP

Page 235: JavaScript pour le développeur Java

Framework

Page 236: JavaScript pour le développeur Java

Frameworks

Page 237: JavaScript pour le développeur Java

Frameworks

Page 238: JavaScript pour le développeur Java

http://addyosmani.github.com/todomvc/

Page 239: JavaScript pour le développeur Java

Frameworks

• Fonctionnalités diverses

• binding

• routing

• templating

• ......

Page 240: JavaScript pour le développeur Java

Qualité

Page 241: JavaScript pour le développeur Java

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é

Page 242: JavaScript pour le développeur Java

JSLint / JSHint

• attention cela fait mal.

• utiliser dès le début avant les mauvaises habitudes !

• en ligne ou en plugin

Page 243: JavaScript pour le développeur Java

Sonar

• Plugin pour le JavaScript

• tests, coverage, métriques,

Page 244: JavaScript pour le développeur Java

Tooling

Page 245: JavaScript pour le développeur Java

IDE

Page 246: JavaScript pour le développeur Java

IDE

• Difficile....

Page 247: JavaScript pour le développeur Java

IDE

• Difficile....

• Il faut essayer

Page 248: JavaScript pour le développeur Java

Console des navigateurs

• Debugging

• Test en live

Page 249: JavaScript pour le développeur Java

Questions ?

Page 250: JavaScript pour le développeur Java

Creative CommonsAttribution — 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.