JavaScript
Tools and Syntax
for the Modern Web

by Rob Richardson

@rob_rich

https://robrich.org/

About Me

Rob Richardson is a software craftsman building web properties in ASP.NET and Node, Angular and Vue. He's a frequent speaker at conferences, user groups, and community events, and a diligent teacher and student of high quality software development. You can find this and other talks on https://robrich.org/presentations and follow him on twitter at @rob_rich.

So which is it?

JavaScript Harmony

EcmaScript 6

EcmaScript 2015

ES6

... they're the same thing

EcmaScript versions

source: wikipedia.org/wiki/ECMAScript

EcmaScript

... in the browser

The server-side ES story is interesting too,
but we'll focus on the browser story

EcmaScript 6

Two main groups of new things:

• New Features
• New Syntax:
    sugar over existing features

Can I use it today?

Yes but ...

Browser support:
kangax.github.io/compat-table/es6/
www.caniuse.com

spoiler: Evergreen browsers will always lag, but you can "transpile" to older standards and use new things today

What is Transpiling?

Transpiling is a specific term for taking source code written in one language and transforming into another language that has a similar level of abstraction.

Source: https://www.stevefenton.co.uk/2012/11/compiling-vs-transpiling/

Groups of Tools

• Polyfills: add missing methods at runtime
• Transpiler: convert newer to similar older code
• Bundler: polyfill module loading

Polyfills

Can I polyfill the feature?

HTML5 examples:

Yes: html5shiv adds Array methods and additional tags

No: Can't polyfill canvas tag

Transpilers

• Babel: babeljs.io
• TypeScript: typescriptlang.org

Using Babel

1. Visit babeljs.io/docs/setup/
2. Choose your host
3. Include the provided code

Using Babel

1. Visit babeljs.io/repl/
2. Type stuff

Bundlers

• Browserify: browserify.org
• Webpack: webpack.js.org
• Rollup: rollupjs.org

Using Webpack

npm install --save-dev webpack-cli
npm install --save-dev webpack
webpack main.js -o bundle.js

Then reference bundle.js from your html

Using Webpack

webpack.config.js:

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  }
};

$> webpack

Using Webpack with Babel

webpack.config.js:

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  }
};

.babelrc:

...

Using Webpack with Babel

webpack.config.js:

...

.babelrc:

{
  "presets": ["@babel/preset-env"]
}

Then run these from the command line

npm install --save-dev babel-loader @babel/core @babel/preset-env
webpack

Babel Presets

@babel/present-env
includes all the released features,
and transpiles to suport all active browsers.

Optionally configure target browsers using browserlist queries.

See also https://browserl.ist/

Babel Presets

To use stage-# features, include plugins for each feature.

See babeljs.io/docs/plugins

stage-# presets are deprecated.

TC39 Process

• stage-0. Strawman: an idea
• stage-1. Proposal
• stage-2. Draft: Initial spec
• stage-3. Candidate: Complete spec, initial browser implementations
• stage-4. Finished: will go to next yearly release

Source: tc39.github.io/process-document/

Can I use it today?

Yes.

Use WebPack and Babel
to transpile an ES6/7/8 app into an ES5 file.

Cool Syntax

Sprinkle in sparingly.

Don't use it just to use it.

Use it when it adds clarity
and simplicity to your code.

Code for legibility

Code like the person maintaining your code is a homicidal maniac that knows where you live.

- Jeremy Clark

Variable scoping

function hello() {
    console.log(message);
    // undefined
    if (true) {
        var message = 'hello world';
        console.log(message);
        // 'hello world'
    }
    console.log(message);
    // 'hello world'
}

function hello() {
    console.log(message);
    // exception
    if (true) {
        let message = 'hello world';
        console.log(message);
        // 'hello world'
    }
    console.log(message);
    // exception
}

Variable scoping

let and const

• scoped to curly braces, not to the function

"fat arrow" functions

var array = [1,2,3];
array.map(function (a) {
  return a * 2;
});

var array = [1,2,3];
array.map(a => a * 2);

"fat arrow" functions

=>

• binds this when defined
• always anonymous
• single line implicit last line return
• function is still best for heavy lifting

"fat arrow" functions

Build it up

function (a) { return a * 2; }

(a) => { return a * 2; }

a => { return a * 2; }

a => a * 2

(a) => a * 2

All of these are valid ES6 syntax

"fat arrow" functions

Returning JS Object

function (a) { return {name: a}; }

(a) => { return {name: a}; }

a => {name: a} // <-- BROKEN

a => ({name: a})

Classes

function Person(name) {
  this.name = name;
}
Person.prototype.speak = function () {
  console.log('hello '+this.name);
};

class Person {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log('hello '+this.name);
  }
}

Classes

• Syntactic sugar over prototype chain
• It makes it feel like C# / Java
• ... it still works the same

Polyfill Promise

Asynchronous resolve

function doWork(cb) {
  cb(null, 'results');
}

doWork(function (err, results) {
  if (err) {
    // handle error
  }
  // handle success
});

function doWork() {
  return new Promise(function (success, fail) {
    success('result');
  });
}

doWork().then(function (result) {
  // handle success
}).catch(err) {
  // handle error
});

Polyfill Promise

Asynchronous resolve

• proxy for a later result
• alternate style to callbacks
• religious war: some find it more confusing

Modules

import and export

• CommonJS module resolution
• resolves dependencies synchronously
• can reference only portions of the dependency

Modules

// -------- lib.js --------
export function square(x) {
  return x * x;
}

// -------- main.js --------
import * as lib from './lib';
lib.square(4); // 16

Modules

// -------- lib.js --------
function square(x) {
  return x * x;
};

module.exports = {
  square: square
};

// -------- main.js --------
var lib = require('./lib');
lib.square(4); // 16

// -------- lib.js --------
export function square(x) {
  return x * x;
}

// -------- main.js --------
import * as lib from './lib';
lib.square(4); // 16

Modules

// -------- lib.js --------
function square(x) {
  return x * x;
}

module.exports = {
  default: square
};

// -------- main.js --------
var lib = require('./lib').default;
lib(4); // 16

// -------- lib.js --------
export default function (x) {
    return x * x;
}

// -------- main.js --------
import lib from './lib';
lib(4); // 16

String Templates

var a = 5;
var b = 10;
var msg = "Fifteen is " + (a + b) + " and\n";
message += "not " + (2 * a + b) + ".");
console.log(msg);
// "Fifteen is 15 and
// not 20."

var a = 5;
var b = 10;
var msg = `Fifteen is ${a + b} and
not ${2 * a + b}.`;
console.log(msg);
// "Fifteen is 15 and
// not 20."

String Templates

• Use variables inline
• Multi-line strings
• Be careful to html encode user data

Building objects

• Syntactic sugar for declaring variables more easily

Building objects

var x = 3;
var y = 7;
var c = {
    x: x,
    y: y
};

var x = 3;
var y = 7;
var c = { x, y };

Building objects

var x = 3;
var y = 7;
var c = {
    x: x,
    y: y,
    z: 9
};

var x = 3;
var y = 7;
var c = {
    x,
    y,
    z: 9
};

Dereferencing objects

var c = { x: 3, y: 7 };

var x = c.x;
var y = c.y;
console.log(x); // 3

var c = { x: 3, y: 7 };

let { x, y } = c;
console.log(x); // 3

Dereferencing objects

// -------- lib.js --------
export function square(x) {
  return x * x;
}
export function double(x) {
  return x * 2;
}

// -------- main.js --------
import { square, double } from './lib';
square(4); // 16
double(4); // 8

Rest parameters

function (a, b) {
  var theRest = Array.prototype.slice.call(arguments);
  theRest.shift(); // a
  theRest.shift(); // b

  theRest.forEach(function (g) {
    // ...
  });
}

function(a, b, ...theRest) {
  theRest.forEach(function (g) {
    // ...
  });
}

Rest parameters

• Get the rest of the arguments passed as an array
• Must be the last argument
• Much better than "arguments" pseudo-array

Spread operator

Pass an array like a series of arguments

function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction.apply(null, args);

function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);

Spread operator

• Turn array into a list of parameters
• Like apply() but doesn't change "this"

Spread operator

A more powerful array literal

var parts = ['shoulders', 'knees'];
// duplicate array
var lyrics = parts.slice();
lyrics.unshift('head');
lyrics.push('and');
lyrics.push('toes');
// ["head", "shoulders", "knees",
//   "and", "toes"]

var parts = ['shoulders', 'knees'];
var lyrics = [
  'head',
  ...parts,
  'and',
  'toes'
];
// ["head", "shoulders", "knees",
//   "and", "toes"]

Rest and Spread operators

A more powerful array literal

function (a, b, ...theRest) {
  theRest.forEach(function (g) {
    // ...
  });
}

var args = [0, 1, 2];
myFunction(...args);

async / await

function doWork() {
  return new Promise(function (success, fail) {
    success('result');
  });
}

doWork().then(function (result) {
  // handle success
}).catch(err) {
  // handle error
});

async function doWork() {
  // something asynchronous
  return 'result';
}

try {
  let result = await doWork();
} catch (err) {
  // handle error
}

async / await

• Looks synchronous, acts asynchronous
• Promises under the hood
• Automatic interop with promises

async / await

Source: bram.us/2017/05/09/javascript-from-callbacks-to-promises-to-asyncawait-in-7-seconds/

Cool Syntax

Remember: sugar over existing features

Sprinkle in sparingly to add legibility

Don't add new features to show off

Tools

ES6,7,8+ -> ES5	babeljs.io
import and export	webpack.github.io
Anything else	Polyfill as needed

Modern Frameworks

Yes!

You can use modern JavaScript today.