Browserify all the things

- https://twitter.com/davidwalshblog/statuses/428646150028009472
- https://github.com/MoOx/jQuery.Loading-Indicator/
- https://github.com/MoOx/jQuery.External-Links/
- http://wiki.ecmascript.org/doku.php?id=harmony:modules
- https://github.com/substack/node-mkdirp
- https://github.com/isaacs/rimraf
- http://requirejs.org/docs/release/2.1.10/minified/require.js
- https://github.com/MoOx/dateranger/blob/master/index.js
- http://putaindecode.fr/posts/js/browserify-all-the-things/

Transcript

1. BROWSERIFY
   ALL THE THINGS
   1
   

   View Slide

2. J'AI BESOIN D'UN COMPOSANT
   JAVASCRIPT POUR MA PAGE
   WEB...
   ...Je cherche un plugin jquery pardis !
   2
   

   View Slide

3. Send me an awesome responsive
   jQuery slider/carousel! I want to use it
   for MDN.
   — David Walsh (@davidwalshblog)
   January 29, 2014
   3
   

   View Slide

4. COMMENT FAIRE DES
   COMPOSANTS JAVASCRIPT POUR
   LE BROWSER ?
   Avec un plugin jQuery bien sur !
   4
   

   View Slide

5. LA DÉPENDANCE PEUT ÊTRE
   LOURDE
   indicateur de chargement avec sémaphore plugin qui ouvre les liens externes avec du
   target blank automatique
   5
   

   View Slide

6. COMMENT ÉCRIRE DES MODULES
   AVEC DE PETITES DÉPENDANCES
   ?
   6
   

   View Slide

7. En attendant ...
   PRENNONS EXEMPLE SUR NODE
   Faisons de petits composants
   la gestion de modules via ES6
   mkdir -p rm -rf
   7
   

   View Slide

8. require() IN DA BROWZER
   8
   

   View Slide

9. BROWSERIFY TO THE RESCUE !
   $ npm install ­g browserify
   $ npm install dep
   var dep = require('dep')
   exports.myExample = function () {
   return dep.truc({blah})
   }
   $ browserify main.js ­o bundle.js
   9
   

   View Slide

10. ET AMD ?
    REQUIREJS TOUSSA ?
    Bof.
    10
    

    View Slide

11. ECRIRE UN COMPOSANT
    BULLETPROOF C'EST POSSIBLE ?
    11
    

    View Slide

12. (function (root, factory) {
    if (typeof exports === 'object') {
    // CommonJS
    module.exports = factory(require('b'));
    } else if (typeof define === 'function' && define.amd) {
    // AMD
    define(['b'], function (b) {
    return (root.returnExportsGlobal = factory(b));
    });
    } else {
    // Global Variables
    root.returnExportsGlobal = factory(root.b);
    }
    }(this, function (b) {
    exemple
    12
    

    View Slide

13. LES CERISES SUR LE GATEAU
    LES TRANSFORMATIONS
    debowerify
    decomponentify
    deamdify
    deglobalify
    jadeify
    hbsify
    es6ify
    uglifyify
    ...
    13
    

    View Slide

14. $ npm install debowerify decomponentify deamdify deglobalify e
    browserify ­t debowerify ­t decomponentify ­t deamdify ­t degl
    14
    

    View Slide

15. DES QUESTIONS ?
    15
    

    View Slide

16. MERCI !
    @MOOX SUR &
    MAXIME THIROUIN /
    Version longue sur putaindecode.fr
    TWITTER GITHUB
    MOOX.IO
    16
    

    View Slide