JavaScript modules en Dependency management in de praktijk

WordPress Meetup Tilburg

new Date(2016, 4, 10, 20, 45, 0);

Gaya Kessler

On the menu today

  • Probleemstelling

  • JavaScript modules
  • Oplossingen
  • Voorbeeld implementaties

  • Externe dependencies gebruiken met npm
  • webpack
  • ES6+

JavaScript gaat hard

Every day another framework

ECMASCRIPT features

Zo veel tools

Waar te beginnen... HOE te beginnen?

Wat je niet moet doen:

1. Grunt / Gulp

2. Concat al je JavaScript

3. JavaScript inladen in je browser

4. Hopen dat het werkt

Daar heeft niemand iets aan.

Enter JavaScript modules

Automatische scoping en isolation

Herbruikbaar

Brengt structuur

Externe modules uit libraries

De opties:

AMD

Pros:

Async en goed met browsers.

Cons:

Lastige syntax, rommeling, HTTP overhead en Require.js

CommonJS

Pros:

Clean syntax, standaard van Node.js.

Cons:

Synchroon en heeft een bundler nodig.

ES6 modules

Pros:

Clean syntax, named exports, standaard voor ES6, hipster proof.

Cons:

Niet geïmplementeerd in V8, transpiler nodig.

Verdict:

CommonJS en ES6 modules (met Babel)

CODE OR GTFO


var superSecretVariable = 'Hello with Ad';

function callMeMaybe(cb) {
  cb(superSecretVariable);
}

module.exports = callMeMaybe;


function callMeMaybe(cb) {
  cb();
}

function callMeNot(cb) {}

module.exports = {
  callMeMaybe: callMeMaybe,
  callMeNot: callMeNot,
};


var Car = {
  honk: function() {
    console.log('HONK');
  },
};

module.exports = Car;


//hello.js
var superSecretVariable = 'Hello with Ad';

function callMeMaybe(cb) {
  cb(superSecretVariable);
}

module.exports = callMeMaybe;

//index.js
var callMeMaybe = require('./hello');

callMeMaybe(console.log); //Hello with Ad

require('./hello')(window.alert);


//options.js
module.exports = {
  name: 'Gaya',
  job: 'Developer',
};

//index.js
var options = require('./options');

console.log(options.name); //Gaya
console.log(options.job); //Developer
console.log(options.skills); //undefined


// ./car/index.js
var door = require('./door');

var car = {
 doors: [],
};

module.exports = function() {
  var instance = Object.create(car);

  instance.doors = [];
  instance.doors.push(door());

  return instance;
};

// ./index.js
var perfectCar = require('./car')();


// ./car/index.js
var car = require('./car');
var door = require('./door');
var roof = require('../house/roof');

module.exports = {
  car: car,
  door: door,
  roof: roof,
};

// ./house/roof.js
module.exports = {};


// car.js
var car = {
  name: 'Standard car',
  honk: function() { console.log(this.name); },
};

module.exports = function(name) {
  var instance = Object.create(car);
  instance.name = name;
  return instance;
};

// index.js
var makeCar = require('./car');
var myCar = makeCar('Tesla');

myCar.honk(); // Tesla

Third party libs?

npm


npm install --save lodash


var _ = require('lodash');

_.map([1, 2, 3], function(number) {
  return number * number;
}); // 1, 4, 9


import { map, zipObject } from 'lodash';

map([1, 2, 3], function(number) {
  return number * number;
}); // 1, 4, 9

Maar hoe gebruik ik het dan?

Laten we het eindelijk eens hebben over WP

webpack

webpack maakt bundles

webpack kan AMD en CommonJS

samen met Babel gebruik maken van ES6+

is "gewoon" Node.js

geen Grunt / Gulp nodig

eigen development server

kan ook Less, Sass, post-css


// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    path: './build',
    filename: 'bundle.js'
  },
  module: {
    loaders: []
  }
};


// webpack.js
var webpack = require('webpack');
var config = require('./webpack.config.js');

var compiler = webpack(config);
compiler.run((err) => {
  if (err) {
	console.error(err); }

  console.log('🎉');
});

Hippe JavaScript
met Babel


npm install
	babel-loader babel-core babel-preset-es2015
		--save


// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {path: './build', filename: 'bundle.js'},
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules)/,
        loader: 'babel',
        query: {
          presets: ['es2015',]
        },
      },
    ]
  }
};

Wat kan je nu?


import { awesome, stuff, for, you } from 'some-lib';

export const hello = 'world';
export let thing = {
  someFunc() {
    return fetch('https://poop.bike')
      .then((someThing) => awesome(something));
  }
};

Nice.

Gebruik bundles voor je site / plugin development

Helaas loopt WordPress achter

Maar ja, who cares?

Gewoon doen!

Oke doei.

Gaya Kessler

@GayaNinja

bedankt voor je aandacht