Les modules ES6 / Veille technologique

**Paleo** · 20/07/2015, 18h14

En décembre dernier, sur un blog de Mozilla, à propos de l'un des quatre piliers des Web Components :

Mozilla will not ship an implementation of HTML Imports. We expect that once JavaScript modules — a feature derived from JavaScript libraries written by the developer community — is shipped, the way we look at this problem will have changed. (source)

Les modules ES6 bouleverseront notre manière d'architecturer le développement en JavaScript. Je propose que ce sujet serve de veille technique, et que chacun ajoute ici les informations qu'il trouve au fil du temps.

En septembre 2014 : ECMAScript 6 modules: the final syntax. Du même auteur, un "live book" avec un chapitre sur les modules.

TypeScript : la version 1.5 supporte les modules ES6. À suivre également : les fonctionnalités prévues dans les prochaines versions, dont un "Module bundling".

**kevin.cousin** · 22/07/2015, 11h05

A propos de ES6, on peut aussi mettre en avant react (https://facebook.github.io/react/) un framework ES6 plus qu'intéressant.

Il y eu une conférence à Paris il a peu, disponible en vidéo ici : https://www.react-europe.org/

De nouvelles conférences sont prévues à Paris en Juin 2016.

**Paleo** · 22/07/2015, 16h58

(React propose-t-il quelque chose à propos des modules ?)

Babel compile les modules ES6 vers commonJS, AMD, SystemJS, UMD. Avec la dernière version de TS sortie hier, ainsi que le projet es6-module-transpiler, ce sont donc les trois solutions supportant les modules ES6 à ce jour. La question intéressante est : qu'en feront les prochaines versions des frameworks JavaScript ?

**Paleo** · 24/07/2015, 15h48

http://www.2ality.com/2015/07/es6-module-exports.html

**Paleo** · 19/08/2015, 17h22

https://hacks.mozilla.org/2015/08/es6-in-depth-modules/

**Paleo** · 21/08/2015, 19h01

TypeScript, Webpack et les modules ES6 : http://www.jbrantly.com/es6-modules-...t-and-webpack/

**melka one** · 22/08/2015, 21h45

je connais pas vraiment les module mais si j'ai bien compris c'est la meme chose que

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script type="text/javascript" src="chemin/fichier.js"></script>

??

j'ai l'impression que javascript commence a perdre ce qui faisait de lui un langage simple pour devenir une usine a gaz qui requière de plus en plus d'avoir de la mémoire plutôt que d’être logique.

l'habit ne fait pas le moine.

**danielhagnoul** · 22/08/2015, 22h55

Le code d'un module est placé dans un fichier JS classique, mais ce fichier n'est pas utilisé de la même manière.

Exemple utilisant traceur.js dans le navigateur Chrome, il est composé de deux fichiers JS et d'un fichier HTML.

Le fichier dvjhUtilities.js est un fichier contenant des fonctions utilitaires.
Le fichier dvjhClass.js est exploité comme module ES2015.

La différence ? Alors que les fonctions utilitaires sont accessibles, seules les fonctions du module qui sont explicitement exportées sont accessibles.

Fichier dvjhUtilities.js :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
"use strict";
 
const
    kIsoFormat = d3.time.format( "%Y-%m-%dT%H:%M:%S.%L%Z" ),
    kModel = Symbol( 'ObjModel' ),
    kGetType = function( Obj ){
        return Object.prototype.toString.call( Obj ).match( /\s([a-zA-Z]+)/ )[ 1 ].toLowerCase();
    },
    kSetModel = function( Obj ){
 
        if ( kGetType( Obj ) === "object" ){
 
            Obj[ kModel ] = Object.create( Object.prototype );
 
            Object.getOwnPropertyNames( Obj ).forEach( function( key ){
 
                if ( key != kModel ) {
 
                    Object.defineProperty( Obj[ kModel ], key, {
                        "value" : kGetType( Obj[ key ] ),
                        "enumerable" : true
                    });
                }
            });
 
            Object.getOwnPropertySymbols( Obj ).forEach( function( key ){
 
                if ( key != kModel ) {
 
                    Object.defineProperty( Obj[ kModel ], key, {
                        "value" : kGetType( Obj[ key ] ),
                        "enumerable" : true
                    });
                }
            });
 
        } else {
            throw `Erreur dans kSetModel(), ${Obj} n'est pas un objet`;
        }
    },
    kCreateDOMObject = function( domFragment, keys, boolChildren ){
 
        let
            Obj = Object.create( Object.prototype ),
            nodes = [],
            treeWalker = {},
            bool = boolChildren || false;
 
        if ( kGetType( domFragment ).slice( 0, 4 ) === "html" ) {
 
            treeWalker = document.createTreeWalker(
                domFragment,
                NodeFilter.SHOW_ELEMENT,
                {
                    "acceptNode" : function( node ){
                        if ( bool ) {
                            return NodeFilter.FILTER_ACCEPT;
                        } else if ( node.parentNode === domFragment ) {
                            return NodeFilter.FILTER_ACCEPT;
                        }
 
                        return NodeFilter.FILTER_SKIP;
                    }
                },
                false
            );
 
            while( treeWalker.nextNode() ){
                nodes.push( treeWalker.currentNode );
            }
 
            nodes.forEach( function( item, i ){
                let key = "dom_" + (  keys[ i ] ? keys[ i ] : i );
 
                Object.defineProperty( Obj, key, {
                    "value" : item,
                    "enumerable" : true
                });
            });
        } else {
            alert( `L'objet créé est vide, car le paramètre domFragment ne contient pas un fragment du DOM` );
        }
 
        return Obj;
    },
    dvjhDate = class extends Date {
        constructor( p ){
            if ( p ) {
                super( p );
            } else {
                super();
            }
 
            this.auteur = 'Daniel Hagnoul';
        }
        toString(){
            return kIsoFormat( this );
        }
    };

Fichier dvjhClass.js :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
"use strict";
 
const
    kFirstName = new WeakMap(),
    kLastName = new WeakMap(),
    kFirstNameType = 'string',
    kLastNameType = 'string',
    kSetPerson = function( obj, first, last ){
 
        if ( kGetType( first ) === kFirstNameType && kGetType( last ) === kLastNameType ){
 
            kFirstName.set( obj, first );
            kLastName.set( obj, last );
 
        } else {
            throw `Type des paramètres incompatibles.
                    first : ${ kFirstNameType } attendu, 
                    last : ${ kLastNameType } attendu`;
        }
 
        return obj;
    },
    kPays = Symbol( 'Pays' ),
    kPaysType = 'string',
    kSetPays = function( obj, value ){
 
        if ( kGetType( value ) === kPaysType ){
            obj[ kPays ] = value;
 
        } else {
            throw `Type des paramètres incompatibles.
                    pays : ${ kPaysType } attendu`;
        }
 
        return obj;
    };
 
export const Person = class {
    constructor( first, last ){
        kSetPerson( this, first, last );
    }
    get firstName( ){
        return kFirstName.get( this );
    }
    get lastName( ){
        return kLastName.get( this );
    }
    fullName( ){
        return kFirstName.get( this ) + " " + kLastName.get( this );
    }
};
 
export const Employee = class extends Person {
    constructor( prenom, nom, pays ){
        super( prenom, nom );
        kSetPays( this, pays );
    }
    get pays( ){
        return this[ kPays ];
    }
    set pays( value ){
        kSetPays( this, pays );
    }
};

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <style>
    
    h1 { color: rgb( 202, 26, 84 ); }
    
  </style>
</head>
<body>
 
  <h1>Titre</h1>
 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
  <script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
  <script src="dvjhUtilities.js"></script>
  <script type="module">
    // script type module indique qu'il s'agit d'un fichier exploité par traceur.js
 
    // on importe les fonctions exportables du module
 
    import { Person, Employee } from 'dvjhClass.js';
 
    // construction de l'objet Moi à partir de la class Employee
 
    let Moi = new Employee( "Daniel", "Hagnoul", "Belgique" );
 
    // on applique une fonction utilitaire sur l'objet Moi
 
    kSetModel( Moi );
    console.log( Moi );
 
    console.log( Moi.firstName, Moi.lastName, Moi.pays );
 
    // fonction utilitaire, accessible
    console.log( new dvjhDate() );
 
    // appel d'une fonction du module non exportée, donc inacessible
    // provoque une erreur !
    // ReferenceError: kSetPerson is not defined
    // console.log( kSetPerson( {}, "Jean", "Dupond" ) );
  </script>
</body>
</html>

**Paleo** · 23/08/2015, 19h17

Pour ceux qui cherchent à comprendre de quoi il s'agit, je recommande fortement l'article de Mozilla donné plus haut.

À part ça l'attribut "type" de la balise "script" est optionnel depuis HTML 5, on peut l'enlever pour éviter de faire trop travailler sa mémoire ou bien pour l'élégance du code au choix.

**melka one** · 23/08/2015, 21h36

n’empêche que javascript deviens de plus en plus compliqué a apprendre personnelement je ne pense pas que je suivrait la mouvence dans son integralité la seul chose qui m'ai plus pour l'instant c'est map.

**SylvainPV** · 23/08/2015, 23h21

Moi je trouve au contraire qu'il devient de plus en plus simple. Avec l'arrivée des modules ES6, on élimine le problème des conflits de variables globales, on simplifie la gestion de nombreuses dépendances et on arrêtera de se poser la question de où mettre ses balises <script> (une question qui est à l'origine de centaines de topics sur ce forum, j'en sais quelque-chose).

En fait, c'est le meilleur moment pour apprendre JavaScript car avec ES6, ça devient vraiment un langage plaisant avec lequel travailler. Le seul problème sera de faire le tri avec les ressources existantes sur le net pour ne pas utiliser tous les aspects obsolètes ou dépréciés du langage.

**melka one** · 25/08/2015, 11h32

l’intérêt serait de faciliter le travaille communautaire ?

Avec l'arrivée des modules ES6, on élimine le problème des conflits de variables globales

la j'ai du mal a comprendre.

**SylvainPV** · 25/08/2015, 13h43

Jamais eu affaire avec un conflit de variables globales ? Du genre, deux modules jQuery qui n'utilisent pas la même version, ce qui oblige à bricoler avec jQuery.noConflict ? Ou alors une variable globale déclarée par erreur quelque-part et qui vient écraser une globale du navigateur ? C'est pourtant un problème courant: ça fait une décennie qu'on essaie de se débarrasser des variables globales en JavaScript via des outils comme RequireJS ou via l'utilisation de namespaces. Les modules ES6 sont enfin une solution simple et efficace à ce problème.

**melka one** · 25/08/2015, 17h27

je connais tres bien le problème des variable globale mais je comprend pas comment les modules peuvent éviter ce problème

**SylvainPV** · 25/08/2015, 17h51

ben... c'est précisément leur raison d'être. Un module permet d'éviter de déclarer une variable globale, on exporte des variables locales et on les importe ailleurs.
Regarde tous les liens précédents si tu ne connais pas du tout la spec.

**melka one** · 25/08/2015, 18h01

I dont speak engliche

**SylvainPV** · 25/08/2015, 19h24

Ben utilise un traducteur ou un moteur de recherche de pages en français, c'est pas les solutions qui manquent... Allez, je t'ai trouvé un article français, pour ne pas que ce soit trop compliqué pour toi:

https://tech.mozfr.org/post/2015/08/...3A-les-modules

**Paleo** · 26/08/2015, 17h52

Envoyé par SylvainPV

https://tech.mozfr.org/post/2015/08/...3A-les-modules

Bien vu ! C'est une traduction de l'excellent article de Mozilla.

**melka one** · 26/08/2015, 18h23

du coup j'ai voulu testé la chose voila le resultat (firefox developper edition)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

SyntaxError: modules are not implemented yet

du coup y'a pas grand chose a dire

**SylvainPV** · 26/08/2015, 20h34

Envoyé par melka one

du coup y'a pas grand chose a dire

Quand puis-je utiliser les modules ES6 ?

À l’heure actuelle, pour utiliser les modules, vous aurez besoin d’un transpileur tel que Traceur ou Babel. Dans un article précédent de la série, Gastón I. Silva a montré comment utiliser Babel et Broccoli pour compiler du code ES6. Suite à cet article, Gastón a construit un exemple utilisant les modules ES6. Ce billet d’Axel Rauschmayer contient un exemple utilisant Babel et webpack.

Tu peux d'ores-et-déjà utiliser les modules ES6, mais ça demande un minimum d'effort...

Petite question en passant, savez-vous s'il est possible de faire des import conditionnels ?
Quelque-chose comme Object.observe = Object.observe || (import "object-observe-polyfill.js");
D'après la spec, il semble que non, pourtant ça serait tellement utile...

Les modules ES6 / Veille technologique

JavaScript

Discussions similaires

Partager

Partager