Tweet
Tweet

Slide 1

Slide 1 text

BROWSERIFY ALL THE THINGS 1

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

require() IN DA BROWZER 8

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

ET AMD ? REQUIREJS TOUSSA ? Bof. 10

Slide 11

Slide 11 text

ECRIRE UN COMPOSANT BULLETPROOF C'EST POSSIBLE ? 11

Slide 12

Slide 12 text

(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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

DES QUESTIONS ? 15

Slide 16

Slide 16 text

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