A presentation given at General Assembly in Austin, TX on the next generation of JavaScript, ES2015. This is a part of IBM Design's FEDucation on the Street program.

1. ESWHO, ESWHAT, ESWOW
Josh Black :: General Assembly :: December 2, 2015
.FED@IBM

2. .FED@IBM
IBM Design

3. .FED@IBM
IBM Design
Hills

4. .FED@IBM
IBM Design
Hills

5. .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

6. A Front-End Developer can begin using
ES2015 in their projects immediately after
seeing this talk.
.FED@IBM
General Assembly Hill

7. A Front-End Developer can begin using
ES2015 in their projects immediately after
seeing this talk.
.FED@IBM
Who

8. A Front-End Developer can begin using
ES2015 in their projects immediately after
seeing this talk.
.FED@IBM
What

9. A Front-End Developer can begin using
ES2015 in their projects immediately after
seeing this talk.
.FED@IBM
Wow

10. 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?

11. 0
Part 0
Setting the Stage
What is an ECMAScript?
.FED@IBM

12. In the beginning,
Brendan Eich created JavaScript.
1995
.FED@IBM

13. First edition of ECMAScript
is published.
1996
.FED@IBM

14. Fifth edition of ECMAScript
is published.
2009
.FED@IBM

15. Sixth edition of ECMAScript
is published.
2015
.FED@IBM

16. ES3
core features
.FED@IBM

17. ES5
new functions and
strict mode
.FED@IBM

18. ES2015
new syntax, concepts,
etc.
.FED@IBM

19. ES2016+
async/await, utility functions,
observables?
.FED@IBM

20. Part 1
All About ES6
.FED@IBM

21. Part 1
All About ES6 ES2015
.FED@IBM

22. Introduction:
ECMAScript 2015 is the
upcoming version of the
ECMAScript standard.
.FED@IBM

23. 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

24. ES2015 is big.
Like, really big.
.FED@IBM

25. Disclaimer:
This content is dense.
.FED@IBM

26. Variables

27. .FED@IBM
Variables
// ES5
var a = 1;

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

29. .FED@IBM
Variables
// Outer Scope
var i;
for (i = 0; i < 10; i++) {
setTimeout(function () {
console.log(i);
}, 100 * i);
}

30. .FED@IBM
Variables
// ES6
let a = 1;

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

32. .FED@IBM
Variables
// Block Scoped
let a = 1;
const b = 2;

33. .FED@IBM
Variables
// Block Scoped
let a = 1;
const b = 2;
a = 2; // All good!
b = 1; // "b" is read-only

34. Template Literals

35. .FED@IBM
Template Literals
const a = 'Hello';
const b = 'World';
const msg = `${a} ${b}!`; // Hello World!

36. .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!

37. .FED@IBM
Template Literals
function sayHelloTo(name) {
return `Hello ${name}!`;
}
sayHelloTo('Jessica'); // Hello Jessica!

38. Arrow Functions

39. .FED@IBM
Arrow Functions
const odds = evens.map(v => v + 1);
const nums = evens.map((v, i) => v + i);

40. .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;
});

41. .FED@IBM
Arrow Functions
// Statement bodies
nums.forEach((v) => {
if (v % 5 === 0)
fives.push(v);
});

42. .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);
});

43. .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

44. .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

45. Objects

46. .FED@IBM
Objects
const object = {
foo: 'bar'
};

47. .FED@IBM
Shorthand Property
var name = 'Josh';
var age = 22;
var person = { name: name, age: age };

48. .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 };

49. .FED@IBM
Shorthand Method Property
var obj = {
foo: function foo() {}
};

50. .FED@IBM
Shorthand Method Property
const obj = {
foo() {}
};
var obj = {
foo: function foo() {}
};

51. Destructuring

52. .FED@IBM
Destructuring
function constructor(config) {
var id = config.id,
name = config.name || '';
// ...
}

53. .FED@IBM
Destructuring (Objects)
function constructor(config) {
const { id, name } = config;
// ...
}

54. .FED@IBM
Destructuring (Objects)
function constructor({ id, name }) {
// ...
}

55. .FED@IBM
Destructuring (Objects)
function constructor({ id, name }) {
// ...
}
// Usage
const o = { id: 1, name: 'Susan' };
constructor(o);

56. .FED@IBM
Destructuring (Arrays)
const arr = [1, 2, 3];
const [a, b, c] = arr; // a = 1, b = 2, c = 3

57. .FED@IBM
Destructuring (Arrays)
const arr = [1, 2, 3];
const [a, ...b] = arr; // a = 1, b = [2, 3]

58. Rest

59. .FED@IBM
Rest
function f() {
var args = [].slice.call(arguments, 0);
return args.length;
}
f(1, 2, 3); // 3

60. .FED@IBM
Rest
function f(...args) {
return args.length;
}
f(1, 2, 3); // 3

61. Spread

62. .FED@IBM
Spread
function sum(x, y, z) {
return x + y + z;
}
sum(...[1, 2, 3]); // 6

63. .FED@IBM
Spread
function sum(x, y, z) {
return x + y + z;
}
sum(...[1, 2, 3]); // 6
sum.apply(undefined, [1, 2, 3]);

64. .FED@IBM
Spread
function sum(x, y, z) {
return x + y + z;
}
sum(...[1, 2, 3]); // 6
sum.apply(undefined, [1, 2, 3]);
sum(1, 2, 3); // 6

65. .FED@IBM
Spread (for Objects)
const a = { width: 100 };
const b = { height: 100 };
const c = { ...a, ...b }; // { width: 100, height: 100 }

66. Default Parameters

67. .FED@IBM
Default Parameters
function foo(bar) {
bar = bar || 1;
// ...
}

68. .FED@IBM
Default Parameters
function foo(bar = 1) {
// ...
}

69. .FED@IBM
Default Parameters
function constructor({ index = 1, hidden = true }) {
// ...
}

70. Modules

71. Modular
Composed of a set of highly
decoupled, distinct pieces of
functionality stored in modules.
.FED@IBM

72. .FED@IBM
Imports
// ES5, CommonJS
var d3 = require('d3');
// ES2015
import d3 from 'd3';

73. .FED@IBM
Named Imports
// ES5, CommonJS
var svg = require('d3').svg;
// ES2015
import { svg } from 'd3';

74. .FED@IBM
Default Exports
// ES5
module.exports = function () {}
// ES2015
export default function () {}

75. .FED@IBM
Named Export
// ES5
exports.foo = 'bar';
// ES2015
export const foo = 'bar';

76. Collections

77. .FED@IBM
Map
var colors = {
white: '#FFFFFF',
black: '#000000'
};
colors.white; // '#FFFFFF'
colors.black; // '#000000'

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

79. .FED@IBM
Map
const m = new Map([
['white', '#FFFFFF'],
['black', '#000000']
]);
m.has('purple'); // false
m.get('white'); // #FFFFFF
m.get('black'); // #000000

80. .FED@IBM
Set
var s = new Set();
s.add(1).add(2).add(1);
s.size === 2;
s.has(1) === true;

81. APIs

82. .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

83. Promises

84. Promises
Let you write asynchronous
code, synchronously.
.FED@IBM

85. 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

86. Promise
.FED@IBM
var promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello World');
}, 1000);
});
promise
.then((data) => console.log(data)); // 'Hello World'

87. Promise
.FED@IBM
fetch('/api/v1')
.then((response) => response.json())
.then((result) => {
// ...
});

88. Classes

89. 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

90. 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

91. 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');

92. Part 2
Transpilation
.FED@IBM

93. In an accessible and open web,
it seems ridiculous to limit yourself to the
latest and greatest browsers.
“
.FED@IBM

95. Write JavaScript using
ES2015 features
Step 1
.FED@IBM

96. Pass your code into
the transpiler
Step 2
.FED@IBM

97. The transpiler will parse,
transform, and generate new code
Step 3
.FED@IBM

98. Result is code ready to
be used in browsers today
Step 4
.FED@IBM

99. Usage

101. babel-core
babel-runtime
babel-polyfill
babel-register
babel-cli

105. What happens when all the
ES6 features are implemented?
Won’t Babel be obsolete then?
“
.FED@IBM

106. Babel is more than just
an ES2015 compiler.
.FED@IBM

107. 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.

108. 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.

109. 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

110. Thanks!

111. @joshblackfr
github.com/joshblack

112. Any Questions?

113. frontend@us.ibm.com