Javascript pour le développeur Java

JavaScript en entrepriseChristophe 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

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...

Histoire

Histoire

Histoire

Histoire

Histoire

Histoire

• Erreur en ligne XXX

• Erreur en ligne XXX

• Cela fait un moment que c’est le bazar mais là je ne m’en sors plus

La révélation

La révélation

• Projet en HTML 5

• De vrais développeurs JavaScript

• Des ateliers

J’apprend JavaScript

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

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

http://jsbooks.revolunet.com/

Sommaire

• Type

• Objets et héritage

• Fonctions

• Callback

• this

• Coercition

• Scope

• Closure

• Exception

• Séparation de code

• Promise

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 approxymatives

valeurs approxymatives

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

valeurs approxymatives

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

valeurs approxymatives

9007199254740992 === 9007199254740992 + 1

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

valeurs approxymatives

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 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é

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és 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

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

Callback

Callback

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

callback

callback

callback

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>0 )

Truthy et Falsy

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

• Tous les autres sont TRUTHY

• même "0" et "FALSE"

• if( array.length>0 )

• 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

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

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

Promise

Résumé

Résumé

• JavaScript s’apprend !

• Scope / Hoisting

• this (constructeur et callback)

• Héritage par prototype

Industrialisation ?

JS n’est pas maintenable

Framework

FrameworkClient

FrameworkClient

Vert.X

Serveur

FrameworkClient

Vert.X

Serveur

Base de données

FrameworkClient

Vert.X

Serveur

Base de données Desktop

• One language to rule them all

• One language to rule them all

• Write once run anywhere ?

JS est artisanal

Industrialisation

Tests

IndustrialisationBuild

Tests

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

Grunt

• Ant + Ivy du JavaScript

• 2 fichiers

• package.json -> dépendances et plugins

• grunt.js -> configuration

NPM

• Node Package Manager

• provisionneur de dépendances

Bower

• Provisionnement de dépendances pour la webapp

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

Framework

Frameworks

Frameworks

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

Frameworks

• Fonctionnalités diverses

• binding

• routing

• templating

• ......

Frameworks

• Backbone

• KnockoutJS

• AngularJS

• ember.js

• Meteor

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

• 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.