Post on 27-May-2015
description
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.codinghorror.com/blog/2007/07/the-principle-of-least-power.html
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, toFixed, toPrecision...)
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 + 1TRUE
(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’importe quelle valeur sauf undefined
Déclaration objet
Déclaration objet
Déclaration objet
Déclaration objet
Déclaration objet
Déclaration objet
Déclaration objet
Classe anonyme
Déclaration d’objet
Déclaration d’objet
Déclaration d’objet
Déclaration d’objet
Accès aux valeurs
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 propriétés communes dans le prototype pour la mémoire
Création d’objet
Solution
longueur
largeur
longueur
largeur
unRectangle anotherRectangle
surface
Prototype
Résolution de propriété
• Se fait en remontant la chaîne de prototype
• il est possible de surcharger une propriété
Extension• Ajout d’une méthode dans un prototype
• la méthode est alors disponible pour toutes les instances existantes et à venir
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’
Introspection
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
Fonction
Conserve une référence sur son contexte de création
Méthode statique utilitaire
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 liste des arguments
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 cet objet
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
• " \t\r\n " == 0 TRUE
Coercition de type
• false == 'false' FALSE
• false == '0' TRUE
• " \t\r\n " == 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"
• if( array.length )
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 )
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 quand il est nécessaire
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 automatique
Déclaration
Déclaration
Hoisting
• Déplace les déclarations en tête du bloc
Hoisting
Hoisting
Hoisting
Closure
• Une fonction objet contient :
• une fonction (nom, paramètres, body)
• une référence à l’environnement où elle a été créée (contexte)
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 fonctions/variables utiles.
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 (pas obligatoire)
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
• asynchrone
Industrialisation ?
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
JS est artisanal
IndustrialisationBuild
Audit
Tests
Structure
Modularisation
• AMD : Asynchronous Module Definition
• Chargement asynchrone en parallèle dans son propre scope
• requirejs, Dojo, JQuery, Curl, Backdraft
Modularisation
Modularisation
Modularisation
Modularisation
Modularisation
Automatisation
NPM
• Node Package Module
• installation d’outils et de plugins
• Permet l’installation d’outils de façon globale ou locale
Grunt
• The JavaScript Task Runner
• 2 fichiers
• package.json -> dépendances et plugins
• Gruntfile.js -> configuration
Gruntfile.js
Gruntfile.js
package.json
Bower
• Provisionnement de dépendances pour la webapp
• Clone de repository Github
bower.json
Yeoman
• Scaffolding
• Intégration de Yo, 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
• NodeJS Jenkins Plugin
Plugin Maven
• Lancement des outils en ligne de commande
Aggregation résultats
• Reporter au format XUnit
• Plugin Jenkins TAP
Framework
Frameworks
Frameworks
Frameworks
• Fonctionnalités diverses
• binding
• routing
• templating
• ......
Qualité
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é
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 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.