function OhHai() {
  console.log('just checking code size')
}

Power of modules: tie that stuff together

git.io/vaj9h

@sudodoki

#kpijs

Who I am

These are the stickers I am associated with

What this talk is about

  • Modules!
  • Huh? How do I load the module?
  • Nah, just put it all in big pile
  • Where do modules live?
  • Pack the web
  • Beyond simple bundling
  • Hey, what was that?

Modules!

Not the |x|

Module vs Library vs Package

Ancient times

We don't need no stinking modules.

What could possibly go wrong?

var domEl = document.getElementById('app')
domEl.addEventListener('click', globalHandler)
globalBusinessLogicInit()

Let's be smarter

Closures

Namespacing modules

(function () {
  window.App = App || {};
  App.MyModule = App.MyModule || {};
})()

AMD

Not the one manufacturing hardware

Asynchronous module definition

born out of Dojo's experience using XHR+eval

[Bow to Dojo & YUI goes here]

Two words

required

to

define

Define: define

define(
    module_id /*optional*/,
    [dependencies] /*optional*/,
    definition function
    /*function for instantiating the module or object*/
);

Require

require([
  module_id, /* optional */
  module_id2, /* optional */
  module_id3, /* optional */
])

CommonJS

2009

There's

module.exports

that you

require

// module1.js
module.exports = () => 'Not Yet Implemented, sry'
// module2.js
const businessLogic = require('./module1.js')

Node.js flavor

~ node_modules you know

ES6/2015

2013

Module net exports

Difference between

import

and

export

// module1.es.js
export default function businessLogic() {}
export function namedFunction() {}
// module2.es.js
import Module1BusinessLogic from './module1.es';
import {namedFunction} from './module1.es';

Welp, modules are okay, how do I use one?

module loaders

module bundlers

Loaders

AMD

Require.js Other nice things ©:

  • anonymous modules
  • configurable baseUrl, aliases
  • plugins (text!, css!, whatever!)
  • commonjs style

CommonJS

New module syntax

Standard feature w/o implementation?

🙀

Polyfills

es6-module-loader

Loaders Pros

  • Dynamic loading (duh!)

  • No build step

  • Granular cache

  • One file erroring shouldn't break app

  • Better suited for HTTP/2 (?)

Loaders Cons

  • Speed limitations (HTTP1?)

  • Occasional complexity

Bundlers

~ some of those can be used with
more than one type of module

AMD

  • r.js (part of require.js)

    ~ almond.js

  • gulp-amd-bundler?

CommonJS

Browserify

First (?) to popularize

  • polyfill default node things and bundle modules for browsers

  • add transforms

ES6

Bundlers Pros

  • Single or few entry points

  • Best solution for spped

Bundlers Cons

  • Build step required

  • Some restrictions (dynamic name for modules to be loaded, etc)

Package Managers

Webpack

Salesperson standpoint:

  • Code Splitting / Bundling

  • Optimizations

  • Pluggable loaders and plugins

  • Perfomance

  • Bundling for web/node/webworkers

  • DevTools and module API

Module API enabling hot reload

Loaders

Similar to 'tasks' in build tools

import React from 'react';
import './some-styles.scss';
import {alien_functions} from 'alien.coffee';

plugins

Hook into compilation lifecycle

function CustomNotification(options) {}

CustomNotification.prototype.apply = function(compiler) {
  compiler.plugin("done", () => {
    console.log("\n--- Done compiling! ---\n");
  });
};

module.exports = CustomNotification;
new webpack.ProvidePlugin({
  'Promise': 'exports?global.Promise!es6-promise',
  'fetch': 'exports?self.fetch!whatwg-fetch'
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.DedupePlugin(),
new ExtractTextPlugin('[name].[contenthash].css'),

Demo time

QA?

git.io/vaj9h

To Read

Additional reading

Джон, просто Джон

sudodoki