ES 2015 & Webpack

By @jasonsanjose

Who's this for? šŸ‘Ŗ

  • Want to get started with ES 2015?
  • Using RequireJS but looking for more?
  • "Huh, RequireJS?"
  • Not sure how this could be better than F5?

Learning Goals āš½ļø

  • CommonJS modules
  • ES 2015 introduction
  • Webpack basics
  • A developer environment with incremental compilation (goodbye* F5!)

You lost me at modules... šŸ˜µ

<script> tagĀ 

// https://learn.jquery.com/about-jquery/how-jquery-works/
<script src="jquery.js"></script>
<script>
// Your code goes here.
</script>
  • Creates global variable/namespace $ (a.k.a. window.jQuery)
  • Additional <script> tags are another HTTP request
  • Weak dependencies
  • Synchronous loading
  • and more...

Immediately-Invoked
Function Expression (IIFE)

var API = (function () {
  var $ = window.jQuery,
    myPrivateVar = 42,
    myAPI;
  // your code
  return myAPI;
}());
  • Doesn't pollute global namespace
  • Private variables via closure
  • Same weak dependencies as <script>

RequireJS

<!-- index.html -->
<script data-main="js/main" src="js/lib/require.js"></script>
/* js/main.js */
// http://requirejs.org/docs/jquery.html#modulename
requirejs.config({
  baseUrl: 'js/lib',
  paths: {
    jquery: 'jquery-1.9.0'
  }
});

requirejs(['yourcode']);

/* js/yourcode.js */
define(['jquery'], function(jquery) {
  // your code
});

Why RequireJS?

  • Solves global variable/namespace issues
  • Strong, asynchronously loadedĀ dependencies
  • AMD format, CommonJS wrapper, other formats
  • Optional optimizer
  • No build step required, F5 still works
  • Built to run in-browser
  • But...doesn't work in Node

CommonJS

  • Strong dependencies
  • Synchronously resolve module dependencies
  • "Practically" the same as NodeJSĀ modules (see module.exports)
  • Can't be natively supported in-browser
var $ = require('jquery');
exports.myAPI = function () {
  // your code
};

UMD

  • One module format that works in AMD and CommonJS loaders
  • Best used by library authors where the runtime context is unknown

ES 2015

The artist formerly known as ES6

Features

  • Module definition
  • ...noĀ module loadersĀ šŸ˜°
  • Promises
  • Arrow functionsĀ 
  • Classes
  • Template strings
  • Block scoped variables (i.e. no hoisting)
  • See more from Babel

Classes

class Person {
  constructor(name) {
    this._name = name;
  }
  get name() {
    return this._name;
  }
}

class Employee extends Person {
  constructor(name, title) {
    super(name);
    this._title = title;
  }
}

Template Strings

const name = 'Jason San Jose'
console.log(`Hello, ${name}`);

Promises

function someAsyncTask() {
  return new Promise((resolve, reject) => {
    callbackAPI(function (err, result) {
      if (err) {
        reject(err);
      } else {
        resolve(result);
      }
    });
  });
}

function complicatedAsyncTask() {
  return Promise.all([someAsyncTask(), anotherAsyncTask()])
    .then((result1, result2) => {
      // merge results
      return mergedResult;
    })
    .catch((reason) => {
      // deal with errors
    });
}

// ...

complicatedAsyncTask().then((result) => {
  // handle result
});

Awesome! Can I use it?

It's complicated...

Credit: @kangax

Babel

  • JavaScript compiler
  • Transpiles ES 2015 syntax to ES5
  • Optional support forĀ TC39 proposals
  • Available as a CLI, RequireJS loader, Webpack loader, and more
  • ...optional module loading via draft proposal

Use ES 2015 in the browser today!

Babel CLI

$ npm install --save-dev babel-cli
$ babel script.js --out-file script-compiled.js

Babel REPL

Get to the point already! šŸ˜”

  • Modules are great!
    • RequireJS allows in-browser AMD modules, but not CommonJS
    • UMD mitigates module format issues
  • ES 2015 = Grown Up JavaScript
    • Spotty browser support
    • Requires a build step

Why Webpack? šŸ¤”

  • Webpack is a module bundler
  • Modules help with code reuse
  • Modules are more familiar to classic languages
  • Leverage Node.js and browser-centric JS libraries
  • Shim incompatibly libraries
  • ConfigurableĀ builds for different environments
  • Optionally "chunk" modules for async loading
  • Loaders and plugins to extend functionality

Demo

ES 2015 and Webpack

By Jason San Jose

Made with Slides.com

ES 2015 and Webpack

  • 312

More from Jason San Jose