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
2. J'AI BESOIN D'UN COMPOSANT JAVASCRIPT POUR MA PAGE WEB... ...Je cherche un plugin jquery pardis ! 2
3. Send me an awesome responsive jQuery slider/carousel! I want to use it for MDN. — David Walsh (@davidwalshblog) January 29, 2014 3
4. COMMENT FAIRE DES COMPOSANTS JAVASCRIPT POUR LE BROWSER ? Avec un plugin jQuery bien sur ! 4
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
6. COMMENT ÉCRIRE DES MODULES AVEC DE PETITES DÉPENDANCES ? 6
7. En attendant ... PRENNONS EXEMPLE SUR NODE Faisons de petits composants la gestion de modules via ES6 mkdir -p rm -rf 7
8. require() IN DA BROWZER 8
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
10. ET AMD ? REQUIREJS TOUSSA ? Bof. 10
11. ECRIRE UN COMPOSANT BULLETPROOF C'EST POSSIBLE ? 11
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
13. LES CERISES SUR LE GATEAU LES TRANSFORMATIONS debowerify decomponentify deamdify deglobalify jadeify hbsify es6ify uglifyify ... 13
14. $ npm install debowerify decomponentify deamdify deglobalify e browserify ­t debowerify ­t decomponentify ­t deamdify ­t degl 14
15. DES QUESTIONS ? 15
16. MERCI ! @MOOX SUR & MAXIME THIROUIN / Version longue sur putaindecode.fr TWITTER GITHUB MOOX.IO 16