eswho, eswhat, eswow -- feducation -- ibm design

ESWHO, ESWHAT, ESWOW

Josh Black :: General Assembly :: December 2, 2015

.FED@IBM

.FED@IBM

IBM Design

.FED@IBM

IBM Design

Hills

.FED@IBM

Hills

Allow Offering Management, Engineering, and Design to collaborate effectively

Describe product development work that we can take on for the next release

Allows global teams to always stay in alignment

A Front-End Developer can begin using ES2015 in their projects immediately after seeing this talk.

.FED@IBM

General Assembly Hill


.FED@IBM

Who


.FED@IBM

What


.FED@IBM

Wow

Overview

Who What is an ECMAScript, where did it come from? What does ES6 or ES2015 mean?

What What does it mean to use ES2015 in my projects?

Wow How can I begin applying new features available from ES2015 in my projects today?

0Part 0 Setting the Stage

What is an ECMAScript?

.FED@IBM

In the beginning, Brendan Eich created JavaScript.

1995

.FED@IBM

First edition of ECMAScript is published.

1996

.FED@IBM

Fifth edition of ECMAScript is published.

2009

.FED@IBM

Sixth edition of ECMAScript is published.

2015

.FED@IBM

ES3 core features

.FED@IBM

ES5 new functions and strict mode

.FED@IBM

ES2015 new syntax, concepts, etc.

.FED@IBM

ES2016+ async/await, utility functions, observables?

.FED@IBM

1Part 1 All About ES6

.FED@IBM

1Part 1 All About ES6 ES2015

.FED@IBM

Introduction:ECMAScript 2015 is the upcoming version of the ECMAScript standard.

.FED@IBM

Arrow Functions Classes Enhanced Object Literals Template Strings Destructuring Default + Rest + Spread Let + Const Iterators + for…of Generators Comprehensions Unicode Modules Module Loaders Map Set

.FED@IBM

ECMAScript 2015 Features

WeakMap WeakSet Proxies Symbols Subclassable Built-ins Math + Number + String + Object APIs Binary and Octary Literals Promises Reflect API Tail Calls

ES2015 is big. Like, really big.

.FED@IBM

Disclaimer: This content is dense.

.FED@IBM

Variables

.FED@IBM

Variables

// ES5 var a = 1;

.FED@IBM

Variables

for (var i = 0; i < 10; i++) { setTimeout(function () { console.log(i); }, 100 * i); }

.FED@IBM

Variables

// Outer Scope var i;

for (i = 0; i < 10; i++) { setTimeout(function () { console.log(i); }, 100 * i); }

.FED@IBM

Variables

// ES6 let a = 1;

.FED@IBM

Variables

for (let i = 0; i < 10; i++) { setTimeout(function () { console.log(i); }, 100 * i); }

.FED@IBM

Variables

// Block Scoped let a = 1; const b = 2;

.FED@IBM

Variables

// Block Scoped let a = 1; const b = 2;

a = 2; // All good! b = 1; // "b" is read-only

Template Literals

.FED@IBM

Template Literals

const a = 'Hello'; const b = 'World'; const msg = `${a} ${b}!`; // Hello World!

.FED@IBM

Template Literals

const a = 'Hello'; const b = 'World'; const msg = `${a} ${b}!`; // Hello World!

// ES5 var a = 'Hello'; var b = 'World'; var msg = a + ' ' + b + '!'; // Hello World!

.FED@IBM

Template Literals

function sayHelloTo(name) { return `Hello ${name}!`; }

sayHelloTo('Jessica'); // Hello Jessica!

Arrow Functions

.FED@IBM

Arrow Functions

const odds = evens.map(v => v + 1); const nums = evens.map((v, i) => v + i);

.FED@IBM

Arrow Functions

// ES2015 const odds = evens.map(v => v + 1); const nums = evens.map((v, i) => v + i);

// ES5 var odds = evens.map(function (v) { return v + 1; });

.FED@IBM

Arrow Functions

// Statement bodies nums.forEach((v) => { if (v % 5 === 0) fives.push(v); });

.FED@IBM

Arrow Functions

// ES2015 nums.forEach((v) => { if (v % 5 === 0) fives.push(v); });

// ES5 nums.forEach(function (v) { if (v % 5 === 0) fives.push(v); });

.FED@IBM

Arrow Functions

// Lexical this var sally = { name: 'Sally', friends: ['Jane', 'Robert', 'Dillon'], printFriends() { this.friends.forEach(function (f) { console.log(this.name + ' knows ' + f); }); } }

sally.printFriends(); // Cannot read property 'name' of undefined

.FED@IBM

Arrow Functions

// Lexical this var sally = { name: 'Sally', friends: ['Jane', 'Robert', 'Dillon'], printFriends() { this.friends.forEach((f) => console.log(this.name + ' knows ' + f)); } }

sally.printFriends(); // Sally knows Jane // Sally knows Robert // Sally knows Dillon

Objects

.FED@IBM

Objects

const object = { foo: 'bar' };

.FED@IBM

Shorthand Property

var name = 'Josh'; var age = 22; var person = { name: name, age: age };

.FED@IBM

Shorthand Property

var name = 'Josh'; var age = 22; var person = { name: name, age: age };

const name = 'Josh'; const age = 22; const person = { name, age };

.FED@IBM

Shorthand Method Property

var obj = { foo: function foo() {} };

.FED@IBM

Shorthand Method Property

const obj = { foo() {} };

var obj = { foo: function foo() {} };

Destructuring

.FED@IBM

Destructuring

function constructor(config) { var id = config.id, name = config.name || ''; // ... }

.FED@IBM

Destructuring (Objects)

function constructor(config) { const { id, name } = config; // ... }

.FED@IBM


function constructor({ id, name }) { // ... }

.FED@IBM


function constructor({ id, name }) { // ... }

// Usage const o = { id: 1, name: 'Susan' }; constructor(o);

.FED@IBM

Destructuring (Arrays)

const arr = [1, 2, 3]; const [a, b, c] = arr; // a = 1, b = 2, c = 3

.FED@IBM

Destructuring (Arrays)

const arr = [1, 2, 3]; const [a, ...b] = arr; // a = 1, b = [2, 3]

.FED@IBM

Rest

function f() { var args = [].slice.call(arguments, 0); return args.length; }

f(1, 2, 3); // 3

.FED@IBM

Rest

function f(...args) { return args.length; }

f(1, 2, 3); // 3

Spread

.FED@IBM

Spread

function sum(x, y, z) { return x + y + z; }

sum(...[1, 2, 3]); // 6

.FED@IBM

Spread


sum(...[1, 2, 3]); // 6

sum.apply(undefined, [1, 2, 3]);

.FED@IBM

Spread


sum(...[1, 2, 3]); // 6

sum.apply(undefined, [1, 2, 3]);

sum(1, 2, 3); // 6

.FED@IBM

Spread (for Objects)

const a = { width: 100 }; const b = { height: 100 }; const c = { ...a, ...b }; // { width: 100, height: 100 }

Default Parameters

.FED@IBM

Default Parameters

function foo(bar) { bar = bar || 1; // ... }

.FED@IBM

Default Parameters

function foo(bar = 1) { // ... }

.FED@IBM

Default Parameters

function constructor({ index = 1, hidden = true }) { // ... }

Modules

Modular Composed of a set of highly decoupled, distinct pieces of functionality stored in modules.

.FED@IBM

.FED@IBM

Imports

// ES5, CommonJS var d3 = require('d3');

// ES2015 import d3 from 'd3';

.FED@IBM

Named Imports

// ES5, CommonJS var svg = require('d3').svg;

// ES2015 import { svg } from 'd3';

.FED@IBM

Default Exports

// ES5 module.exports = function () {}

// ES2015 export default function () {}

.FED@IBM

Named Export

// ES5 exports.foo = 'bar';

// ES2015 export const foo = 'bar';

Collections

.FED@IBM

Map

var colors = { white: '#FFFFFF', black: '#000000' };

colors.white; // '#FFFFFF' colors.black; // '#000000'

.FED@IBM

Map

var m = new Map(); m.set('white', '#FFFFFF'); m.set('black', '#000000'); m.get('black') === '#000000';

.FED@IBM

Map

const m = new Map([ ['white', '#FFFFFF'], ['black', '#000000'] ]);

m.has('purple'); // false m.get('white'); // #FFFFFF m.get('black'); // #000000

.FED@IBM

Set

var s = new Set(); s.add(1).add(2).add(1); s.size === 2; s.has(1) === true;

.FED@IBM

Array

// Returns a real Array Array.from(document.querySelectorAll("*"))

// Similar to new Array(...), but without // special one-arg behavior Array.of(1, 2, 3)

[0, 0, 0].fill(7) // [7,7,7]

[1, 2, 3].findIndex((x) => x === 2) // 1

Promises

Promises Let you write asynchronous code, synchronously.

.FED@IBM

Promises

.FED@IBM

Pending Hasn't fulfilled or

rejected yet

Rejected The action relating to the promise failed

Fulfilled The action relating to the promise succeeded

Settled

Promise

.FED@IBM

var promise = new Promise((resolve, reject) => { setTimeout(() => { resolve('Hello World'); }, 1000); });

promise .then((data) => console.log(data)); // 'Hello World'

Promise

.FED@IBM

fetch('/api/v1') .then((response) => response.json()) .then((result) => { // ... });

Classes

Classes

function Person(name) { this.name = name; }

Person.prototype.sayName = function sayName() { return `My name is ${this.name}!`; }

const Iheanyi = new Person('Iheanyi'); console.log(Iheanyi.sayName()); // My name is Iheanyi!

.FED@IBM

Classes

class Person { constructor(name) { this.name = name; } sayName() { return `My name is ${this.name}!`; } } const Iheanyi = new Person('Iheanyi'); console.log(Iheanyi.sayName()); // My name is Iheanyi!

.FED@IBM

Classes

// Plugin.js class Plugin { static validateOptions(options) { // ... } constructor(options) { this.options = options; } process(file) { // ... } }

.FED@IBM

// PluginWriter.js Plugin.validateOptions({ foo: 'bar' });

const MyPlugin = new Plugin({ foo: 'bar' }); MyPlugin.process('file.js');

2Part 2

Transpilation

.FED@IBM

In an accessible and open web, it seems ridiculous to limit yourself to the latest and greatest browsers.

“

.FED@IBM

Write JavaScript using ES2015 features

Step 1

.FED@IBM

Pass your code into the transpiler

Step 2

.FED@IBM

The transpiler will parse, transform, and generate new code

Step 3

.FED@IBM

Result is code ready to be used in browsers today

Step 4

.FED@IBM

babel-core

babel-runtime

babel-polyfill

babel-register

babel-cli

What happens when all the ES6 features are implemented? Won’t Babel be obsolete then?

“

.FED@IBM

Babel is more than just an ES2015 compiler.

.FED@IBM

Lifespan Bleeding Edge Goal is to always support the latest and greatest features before they are in any native runtime.

Browser Support Having to support older browsers will most likely remain a necessity as more and more people access the web through their mobile phones.

Optimizations Babel plugins allow you to make assertions about your code, allowing it to make optimizations to make your production code that much faster.

Recap ECMAScript This history of ECMAScript, the different versions of the language

ES2015 What is ES2015, and what features does it offer to you as a developer.

Babel How can we start incorporating these new features into our projects today.

Next Steps ES2015 Overview in 350 Bullet Points This article aims to summarize most syntax changes and features coming in ES2015.

Learn ES2015 A detailed overview of ECMAScript 2015 features.

Configuring Babel 6 Babel 6 is much more configurable than Babel 5, but also more difficult to configure. This blog post gives tips.

https://github.com/bevacqua/es6

https://babeljs.io/docs/learn-‐es2015/

http://www.2ality.com/2015/11/configuring-‐babel6.html

https://github.com/bevacqua/es6

https://babeljs.io/docs/learn-es2015/

http://www.2ality.com/2015/11/configuring-babel6.html

Thanks!

@joshblackfr github.com/joshblack

Any Questions?

[email protected]

mailto:[email protected]