Pourquoi ?

Comment on fait aujourd'hui ?

<script src="scripts/jquery-1.10.1.min.js"></script>
<script src="scripts/slick.min.js"></script>
<script src="scripts/jquery-ui-1.10.3.custom.min.js"></script>
<script src="scripts/jquery.placeholder.js"></script>
<script src="scripts/fastclick.min.js"></script>

<script src="scripts/main.js"></script>
<script src="scripts/basket.js"></script>
<script src="scripts/home.js"></script>
<script src="scripts/modal.js"></script>
<script src="scripts/fancySelect.js"></script>
<script src="scripts/product.js"></script>

On inclut les scripts "à la main"

• on doit prévoir ce qui sera utilisé / plus utilisé
• on doit faire attention à l'ordre de déclaration sous peine de non fonctionnement
• donne une tendance à abuser des variables globales (closures)
• gestion du graphe de dépendances manuel
• ça passe pour des petits projets mais montre clairement ses limites au delà

Les Modules JS

(Aujourd'hui)

Le meilleur choix :

Les modules ES6 mais il faut ajouter une passe de compilation en plus

Le meilleur choix aujourd'hui :

Les modules CommonJS

• node style
• npm
• Browserify pour la partie client
• proche de l'api des modules ES6

À quoi ressemble le code 1/2

// assets/js/src/talker.js
// this vars are not accessible from outside
var count = 0,
    enabled = false;

// This object will be exposed to the world
module.exports = {
    say: function(what) {
        console.log(what);
        if(typeof document !== "undefined" && document) {
            document.write(what);
        }
        count++;
    },

    sayCount: function(verbose) {
        if(typeof verbose == "undefined" || verbose) {
            console.log('I have been used ' + count + (count > 1 ? ' times' : ' time'));
        } else {
            return count;
        }
    }
};

Un module

À quoi ressemble le code 2/2

// assets/js/src/app.js
// require a local module
var talker = require('./talker.js');

talker.say('Hello ');
talker.sayCount();
talker.say('World ');
talker.sayCount();
talker.say('!');
talker.sayCount();

// example with an npm module
var slugify = require("underscore.string/slugify");

var print = console.log.bind(console, '>');

var testString1 = 'Hostels in Rio de Janeiro from $9.5/night',
    testString2 = 'à l\'ouest rien de nouveau',
    testString3 = 'une écharpe dorée et un œuf';

print(slugify(testString1));
print(slugify(testString2));
print(slugify(testString3));

if (typeof document !== "undefined" && document) {
    var pre = document.createElement('pre');
    pre.innerHTML += ((testString1)) + "\n";
    pre.innerHTML += (slugify(testString1)) + "\n";
    pre.innerHTML += "\n";
    pre.innerHTML += (testString2) + "\n";
    pre.innerHTML += slugify(testString2) + "\n";
    pre.innerHTML += "\n";
    pre.innerHTML += (testString3) + "\n";
    pre.innerHTML += slugify(testString3) + "\n";
    document.body.appendChild(pre);
}

Utilisation module local et module npm

Exécution dans nodejs

Comment qu'on fait pour

On installe

npm install -g browserify

On utilise

browserify assets/js/src/app.js -do assets/js/app.js

On inclut dans sa page

<script src="assets/js/app.js"></script>

que ça marche dans le navigateur

-d == sourcemaps js (yay)

Résultat

On y gagne quoi ?

• Possibilité d'utiliser des modules CommonJS pour écrire son code
• On peut inclure ses modules en local ( require "./mon-module.js" )
• Une gestion de ses dépendances clean
• Scope sain (scope local implicite par défaut)
• Possibilité d'avoir le même code pour le client et pour nodejs
• Accès aux 196 160 packages npm sur le client
• On peut gérer son js avec npm + packages.json ( ou pas )

One more thing ...

Un test

// assets/js/tests/talker.js
var test = require('prova'),
    talker = require('../src/talker.js');

test('say test', function(t){
    t.equal(talker.sayCount(false), 0);
    talker.say('I love to talk');
    t.equal(talker.sayCount(false), 1);
    t.end();
});

bash$ node assets/js/tests/talker.js 
I love to talk

    2 passed assertions.

Node

Browser

Testing