SlideShare a Scribd company logo
Effective ES6
@teppeis
YAPC::Asia Tokyo 2015
Aug 21
Hello!
• Teppei Sato, @teppeis
• Cybozu, Inc. / kintone
• This is my first and last YAPC :)
I created
http://cybozushiki.cybozu.co.jp/articles/m000978.html
kintone.com
MUST BUY!
Today talk about:
• Introduce ES6 features
• Deprecated best-practice/patterns
• What’s ES2016, ES2017…
• How to use ES6 from now
Background
–Brendan Eich
from Effective JavaScript
“My solution to the challenging
requirements and crazy-short schedule
was to make JavaScript extremely
malleable from the start.”
https://www.flickr.com/photos/jsconf/4587502948/
–Douglas Crockford
2001, http://www.crockford.com/javascript/javascript.html
“JavaScript: The world’s most
misunderstood programming
language”
https://www.flickr.com/photos/charliebrewer/2897862701/
JavaScript has many pitfalls…
• Prototype inheritance (No class)
• new, this
• Function scope (No block scope)
• Global variables (No module system)
• Hoisting
• NaN, undefined
• typeof null
• with, eval
Example: No Class
function Person(name) {
this.name = name;
}
Person.prototype.greet = function() {
console.log("Hello, I'm " + this.name);
};
var bob = new Person("Bob");
bob.greet();
// "Hello, I'm Bob"
• Use Prototype to emulate Classes
If you miss "new", dangerous!
function Person(name) {
this.name = name;
}
// Oh! You forget `new`
var bob = Person("Bob");
console.log(bob); // undefined
// Global leak!!!!!!!!!!
console.log(window.name); // "Bob"
We've made best-practices
a.k.a. “work around”
Practice: Be sure to call with "new"
function Person(name) {
// check!
if (this instanceof Person) {
return new Person(name);
}
this.name = name;
}
// without `new`
var bob = Person("Bob");
bob.greet();
// "Hello, I'm Bob"
ES6!
ECMAScript 6
• Published on June 17, 2015
• Formally "ECMAScript 2015"
• 6 years! from ES5
ECMAScript 6
• Modern syntax fixing pitfalls
• Better support for large applications
• No (or few) breaking changes
For example: ES6 Classes
ES6 Classes: Simple!
class Person {
constructor(name) {
this.name = name;
}
greet() {
console.log("Hello, I'm " + this.name);
}
}
var bob = new Person("Bob");
bob.greet();
// without `new`
var bob = Person("Bob"); // Error!
Classes based on Prototype
function Person(name) {
this.name = name;
}
Person.prototype.greet = function() {
console.log("Hello, I'm " + this.name);
};
var bob = new Person("Bob");
bob.greet();
// "Hello, I'm Bob"
OUT OF DATE!
Be sure to call with `new`
function Person(name) {
// check!
if (this instanceof Person) {
return new Person(name);
}
this.name = name;
}
// without `new`
var bob = Person("Bob");
bob.greet();
// "Hello, I'm Bob"
OUT OF DATE!
New ES6 features deprecates
yesterday’s best-practices
No more altJS!
https://www.flickr.com/photos/jorge-11/2765216505/
Can I use ES6 now?
ES6 compatibility table
https://kangax.github.io/compat-table/es6/
You can use ES6 now!
• Modern browsers and io.js (node.js) support 

half of ES6 features.
• Safari 9 (WebKit) will support many ES6 features soon.
• Except for IE11…
Transpiler and polyfill
• ES6 Transpiler:

source code converter from ES6 to ES5/ES3
• ES6 Polyfill:

library to provide ES6 built-in classes,
functions and objects for ES5/ES3
Babel
Babel
• The most compatible (71%) ES6 transpiler
• Integrated with core-js (polyfill library)
• Usage:
• CLI: npm i -g babel
• Browserify: babelify
• REPL on the Web (Try it out!)
Babel REPL on the Web
ES6 features
ES6 features
• New syntax
• New built-in classes and objects
• Improvement of existing classes
ES6 features
• New syntax
• New built-in classes and objects
• Improvement of existing classes
New syntax
• Arrow Function
• Classes
• Modules
• Block Scope (let/const)
• Extended Object
Literal
• Default Params
• Rest Params
• Spread Operator
• Destructuring
• Iterator
• Generator
• Template Literal
• Tail Call Optimization
Arrow Function
Prefer arrow function
// ES5 old function
var add = function(a, b) {
return a + b;
};
// ES6 arrow function!
var add = (a, b) => {
return a + b;
};
var add = (a, b) => a + b;
var square = n => n * n;
// good for array filter chains
[1, 2, 3, 4].filter(n => n % 2 === 0).map(n => n * n);
Assign “this” to “self”
var john = {
name: "John",
helloLater: function() {
// save `this` as `self`
var self = this;
setTimeout(function() {
// `this` is not available. use `self`.
console.log("Hello, I'm " + self.name);
}, 1000);
}
}
john.helloLater();
// "Hello, I'm John" after 1sec
OUT OF DATE!
Arrow function don’t need "self"
let john = {
name: "John",
helloLater: function() {
// use arrow function
setTimeout(() => {
// `this` is available here!
console.log("Hello, I'm " + this.name);
}, 1000);
}
}
john.helloLater();
// "Hello, I'm John" after 1sec
Classes
ES6 Classes
class Person {
constructor(name) {
this.name = name;
}
greet() {
console.log("Hello, I'm " + this.name);
}
}
var bob = new Person("Bob");
bob.greet();
Classes based on Prototype
function Person(name) {
this.name = name;
}
Person.prototype.greet = function() {
console.log("Hello, I'm " + this.name);
};
var bob = new Person("Bob");
bob.greet();
// "Hello, I'm Bob"
OUT OF DATE!
Handmade inheritance function
// handmade function to extend
function __extends(child, parent) {
for (var key in parent) {
if (Object.prototype.hasOwnProperty.call(parent, key)) {
child[key] = parent[key];
}
}
function ctor() {
this.constructor = child;
}
ctor.prototype = parent.prototype;
child.prototype = new ctor();
child.__super__ = parent.prototype;
return child;
};
function Programmer(name, language) {
Person.call(this, name);
this.language = language;
}
__extends(Programmer, Person);
OUT OF DATE!
ES6 Class inheritance
class Programmer extends Person {
constructor(name, language) {
super(name);
this.language = language;
}
greet() {
super.greet();
console.log("I like " + this.language);
}
}
var bob = new Programmer("Bob", "JavaScript");
bob.greet();
// "Hello, I'm Bob"
// "I like JavaScript"
• with "extends" and "super"
• can extends built-in classes like "Error"
Modules
Module pattern
// Global module
var myModule = (function () {
// Module object
var module = {},
privateVariable = "Hello World";
function privateMethod() {
// ...
}
module.publicProperty = "Foobar";
module.publicMethod = function () {
console.log( privateVariable );
};
return module;
})();
OUT OF DATE!
CommonJS Modules
// import
var foo = require('foo');
foo();
// export
exports.bar = function() {
console.log('bar');
}
OUT OF DATE!
• node.js/npm friendly
• browserify/webpack to build for browser
ES6 Modules
• run anywhere (browsers, node.js…) if ES6 available
• easy to parse statically
• strict mode by default in modules
// export (./module.js)
export var foo = "foo!";
export function bar() {}
export class Baz {
baz() {}
}
// import
import {foo, bar, Baz} from "./module";
console.log(foo); // "foo!"
bar();
new Baz();
Write “use strict;”
• Strict mode is useful even in ES6.
• In ES6 Module, always strict mode!
• You don’t have write “use strict;” in ES6 modules.
"use strict";
// Error!
with (obj) {}
// Error!
var obj = {a: 1, a: 1};
OUT OF DATE!
Block Scope (let/const)
ES5 has only function scope
function foo() {
var num = 1;
// ... too many statements
if (true_condition) {
// same scope! overwrite above `num`!
var num = 2;
// .. some process
}
console.log(num);
// 2 !!!
}
Weird hoisting(巻き上げ)
var a = 'outer';
function bar() {
console.log(a);
var a = 'inner';
}
bar();
// undefined !!!
Weird hoisting(巻き上げ)
var a = 'outer';
function bar() {
// hoisting!
var a;
console.log(a);
a = 'inner';
}
bar();
// undefined !!!
Place “var”s at the top of the scope
• for function scope and hoisting
function init() {
// `var` once at the top of the scope!
var i,
cell,
cells = document.getElementsByTagName('td');
for (i = 0; i < cells.length; i++) {
cell = cells[i];
cell.addEventListener('click', function() {
cell.style.backgroundColor = '#00F';
}, false);
}
}
OUT OF DATE!
Use ES6 let or const anytime!
• let and const create block scope
• no hoisting
• no more "var"!
function foo() {
let num = 1;
// ... too many statements
if (true_condition) {
// different scope!
let num = 2;
}
console.log(num);
// 1
}
with for-loop
• each iterate creates its own block scope
for (let i = 0; i < 5; i++) {
// new block scope is created for each iteration
setTimeout(() => console.log(i), i * 100);
}
// display "1", "2", "3", "4", "5"
const
• immutable value (not immutable object)
• use like Java's final
const foo = 1;
foo = 100; // Error!
const foo = 1000; // Error!
// properties are mutable
const obj = {};
obj.foo = 1; // No error
Default Parameters
Incorrect default params
function add(a, b) {
// if "a" is 0, 1 is assigned to "a".
a = a || 1;
b = b || 2;
return a + b;
}
add(0, 0); // 1 + 2 = 3
• Incorrect, but occur frequently
function add(a, b) {
// correct, but awful..
if (a === undefined) {
a = 1;
}
if (b === undefined) {
b = 2;
}
return a + b;
}
add(0, 0); // 0 + 0 = 0
Handmade default params
comparing to undefined
OUT OF DATE!
ES6 Default Parameters
// default value for each param
function add(a = 1, b = 2) {
return a + b;
}
add(); // 1 + 2 = 3
add(0); // 0 + 2 = 2
add(undefined, 0); // 1 + 0 = 1
add(0, 0); // 0 + 0 = 0
Rest Parameters
Use "arguments" for variable-length
arguments
function foo(first, second) {
console.log("first:", first);
console.log("second:", second);
// arguments is an ArrayLike, not an Array.
var rest = Array.prototype.slice.call(arguments, 2);
console.log("rest:", rest);
}
foo(1, 2, 3, 4, 5);
// first: 1
// second: 2
// rest: [3, 4, 5]
OUT OF DATE!
ES6 Rest Params instead of arguments
• You don’t have to use `arguments`
function foo(first, second, ...rest) {
console.log("first:", first);
console.log("second:", second);
console.log("rest:", rest);
}
foo(1, 2, 3, 4, 5);
// first: 1
// second: 2
// rest: [3, 4, 5]
Destructuring
Destructuring assignment
• Array assignment
let match = /(d{4})(d{2})(d{2})/.exec("20151231");
// match: [2015151231, 2015, 12, 31]
let [, year, month, day] = match;
console.log(year, month, day); // 2015 12 31
// Swapping
[x, y] = [y, x]
Destructuring assignment
• Object assignment
let {name: a, age: b} = {name: "Bob", age: 20};
console.log(a, b); // "Bob" 20
// shorthand
let {name, age} = {name: "Bob", age: 20};
console.log(name, age); // "Bob" 20
Destructuring assignment
• Function params like "named-params"
• Options object param
function draw(x, y, {width = 320, height = 160} = {}) {
// do the task
}
size(0, 0);
size(0, 0, {});
size(0, 0, {width: 1});
size(0, 0, {height: 2});
size(0, 0, {width: 1, height: 2});
Handmade Options object handlingOUT OF DATE!
function draw(x, x, options) {
if (options.width === undefined) {
options.width = 320;
}
if (options.height === undefined) {
options.height = 320;
}
// do the task
}
Template Literal
Concat with "+" or String#join()
// concat with variables
var name = 'Bob';
var str = "Hello, I'm " + name + ".";
// create multiple lines
var multi = ["line1", "line2", "line3"].join("n");
OUT OF DATE!
Template Literal
// interpolation
var name = 'Bob';
var str = `Hello, I'm ${name}.`;
// multiple lines
var multi =
`line1
line2
line3`;
• back-quoted string
Extended Object Literal
Extended object literal for shorthand
let foo = 1;
let bar = 2;
// shorthand
let obj = {foo, bar};
// same as: {foo: foo, bar: bar};
let prefix = 'foo';
let obj = {
// computed property
[prefix + 'abc']: 1,
// method definition without "function" keyword
foo() {
console.log('foo!');
}
};
and…
• Iterator
• Spread Operator
• Generator
• Tail Call Optimization
78
ES6 features
• New syntax
• New built-in classes and objects
• Improvement of existing classes
New built-in classes and objects
• Promise
• Map
• Set
• WeakMap/WeakSet
• TypedArray
• Symbol
• Proxy/Reflect
Promise
Callback args for async API
function asyncTask(a, b, callback) {
// ...some async task
if (error) {
callback(error);
} else {
callback(null, result);
}
}
asyncTask(1, 2, function(error, result) {
if (error) {
// ...error handling
}
console.log(result);
});
OUT OF DATE!
Callback args for async API
asyncTask1(function(error, result) {
if (error) {
// ...error handling
}
asyncTask2(function(error, result) {
if (error) {
// ...error handling
}
asyncTask3(function(error, result) {
if (error) {
// ...error handling
}
});
});
});
OUT OF DATE!
ES6 Promise
function asyncTask(a, b, callback) {
// ...some async task
return new Promise((resolve, reject) => {
if (error) {
reject(error);
} else {
resolve(result);
}
});
}
asyncTask(1, 2).then(result => {
console.log(result);
}).catch(error => {
// ...error handling
});
ES6 Promise
// series
asyncTask1().then(result => {
return asyncTask2();
}).then(result => {
return asyncTask3();
}).catch(error => {
// ...error handling
});
ES6 Promise
// parallel
Promise.all([
asyncTask1(),
asyncTask2(),
asyncTask3()
]).then(results => {
console.log(results[0]);
// result of asyncTask1
});
Map/Set
Use Object as a dictionary
// some keys are dangerous
var obj = {};
var key = "toString";
obj[key] = "value1";
String(obj);
// TypeError: can't convert obj to string
OUT OF DATE!
• some special keys are dangerous
Use Object as a dictionary
// cannot use object as a key
var key1 = {name: "key1"};
var key2 = {name: "key2"};
obj[key1] = "value1";
obj[key2] = "value2";
console.log(obj[key1]);
// "value2"
console.log(Object.keys(obj));
// ["[object Object]"]
OUT OF DATE!
• cannot use an object as a key
ES6 Map
// no dangerous keys
let map = new Map();
map.set("toString", "value1");
map.get("toString"); // "value1"
String(map); // "[object Map]"
// object as a key
let key1 = {};
let key2 = {};
let m = new Map();
m.set(key1, "v1");
m.set(key2, "v2");
m.get(key1); // "v1"
ES6 Set
let set = new Set();
set.add("value1");
console.log(set.size); // 1
// unique
set.add("value1");
console.log(set.size); // 1
• not easy to implement Set in ES5
and…
• WeakMap/WeakSet
• TypedArray
• Symbol
• Proxy/Reflect
ES6 features
• New syntax
• New built-in classes and objects
• Improvement of existing classes
Improvement of existing classes
• String
• RegExp
• Array
• Object
• Math
• Number
Object
Object.assign
var target = {a: 1, b: 2};
var s1 = {b: 3, c: 4};
var s2 = {c: 5, d: 6};
var ret = Object.assign(target, s1, s2);
console.log(target); // {a: 1, b: 3, c: 5, d: 6}
• no more $.extend() !
String
Unicode surrogate pair support
• 野家 valid
"𠮷野家".codePointAt(0).toString(16); // "20BB7"
String.fromCodePoint(0x20BB7); // "𠮷"
New pitfalls
What's happen?
if (a => 1) {
// ...
}
Oh! Arrow function!
// expected
if (a >= 1) {
}
// arrow function! confusing..
if (a => 1) {
}
// clear
if ((a) => 1) {
}
ESLint
ES.next = ES2016?
The TC39 Process: Annual
• TC39 committee approves acceptance for each stage.
Stage 0: Strawman (idea)
Stage 1: Proposal (problem, solution and demo/polyfill)
Stage 2: Draft (initial spec)
Stage 3: Candidate (review and feedback)
Stage 4: Finished (two implementations at least)
• Stage 4 features are published as ES201X

on July every year.
Stage 3: Candidate
Exponentiation Operator
// x ** y
let squared = 2 ** 2;
// same as: 2 * 2
let cubed = 2 ** 3;
// same as: 2 * 2 * 2
// x **= y
let a = 2;
a **= 2;
// same as: a = a * a;
Array.prototype.includes(str, pos)
[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
[1, 2, NaN].includes(NaN); // true
["a", "b", "c"].includes("a", 0); // true
["a", "b", "c"].includes("a", 1); // false
Stage 2: Draft
Object.observe(obj, observer)
let records;
function observer(recs) {
records = recs;
}
let obj = {id: 1};
Object.observe(obj, observer);
obj.a = 'b';
obj.id++;
Object.deliverChangeRecords(observer);
assertChangesAre(records, [
{object: obj, type: 'add', name: 'a'},
{object: obj, type: 'update', name: 'id', oldValue: 1}
]);
Async/await
async function chainAnimationsAsync(elem, animations) {
let ret = null;
try {
for (let anim of animations) {
ret = await anim(elem);
}
} catch(e) { /* ignore */ }
return ret;
}
SIMD
let a = SIMD.Float32x4(1.0, 2.0, 3.0, 4.0);
let b = SIMD.Float32x4(5.0, 10.0, 15.0, 20.0);
let c = SIMD.Float32x4.add(a,b);
// c: (6.0, 12.0, 18.0, 24.0)
• Single Instruction Multiple Data
• Vector data calculation
How can I get along with
ES6 and ES.next?
May the Babel be with you!
• It's too far for all browsers to support ES6.
• IE11 will live until Jun 10, 2023…
• You will be able to stop transpiling features
that browsers support natively.
• Also ES201X features are available via Babel.
Design your policy:
Which ES6 features do you use?
• Which browsers/node.js do you support?
• If you need IE8 (ES3), it's not easy to use ES6…
• Which feature is effective for your project?
• Is the feature easy to transpile/polyfill?
Easy to transpile/polyfill?
• No problem
Arrow function, let/const, Extended Object literal, Classes

Extended function params, Template literal, Map/Set, Promise…
• Be careful/Partial
Module, Generator, Symbol
• Hard/Impossible
WeakMap/Set, Proxy, Reflect, Tail Call Optimization
Customize Babel config
• Specify TC39 Stage (default: Stage 2)
• Specify your blacklist features
// .babelrc
{
"stage": 3,
"blacklist": [
"es6.tailCall",
"regenerator"
]
}
Conclusion
Conclusion
• ES6 is awesome!
• Some best-practices are deprecated.
• Try ES6 with Babel from now!
MUST BUY!
Thanks!

More Related Content

What's hot

Advanced JavaScript
Advanced JavaScriptAdvanced JavaScript
Advanced JavaScript
Mahmoud Tolba
 
Introduction to es6
Introduction to es6Introduction to es6
Introduction to es6
NexThoughts Technologies
 
AkJS Meetup - ES6++
AkJS Meetup -  ES6++AkJS Meetup -  ES6++
AkJS Meetup - ES6++
Isaac Johnston
 
Introduction of ES2015
Introduction of ES2015Introduction of ES2015
Introduction of ES2015
Nakajima Shigeru
 
How DRY impacts JavaScript performance // Faster JavaScript execution for the...
How DRY impacts JavaScript performance // Faster JavaScript execution for the...How DRY impacts JavaScript performance // Faster JavaScript execution for the...
How DRY impacts JavaScript performance // Faster JavaScript execution for the...
Mathias Bynens
 
Javascript - The Good, the Bad and the Ugly
Javascript - The Good, the Bad and the UglyJavascript - The Good, the Bad and the Ugly
Javascript - The Good, the Bad and the Ugly
Thorsten Suckow-Homberg
 
The Beauty Of Java Script V5a
The Beauty Of Java Script V5aThe Beauty Of Java Script V5a
The Beauty Of Java Script V5a
rajivmordani
 
The Beauty of Java Script
The Beauty of Java ScriptThe Beauty of Java Script
The Beauty of Java Script
Michael Girouard
 
Node.js for PHP developers
Node.js for PHP developersNode.js for PHP developers
Node.js for PHP developers
Andrew Eddie
 
JS Level Up: Prototypes
JS Level Up: PrototypesJS Level Up: Prototypes
JS Level Up: Prototypes
Vernon Kesner
 
ORMs in Golang
ORMs in GolangORMs in Golang
ORMs in Golang
Ikenna Okpala
 
AST Rewriting Using recast and esprima
AST Rewriting Using recast and esprimaAST Rewriting Using recast and esprima
AST Rewriting Using recast and esprima
Stephen Vance
 
Introduction to CoffeeScript
Introduction to CoffeeScriptIntroduction to CoffeeScript
Introduction to CoffeeScript
Stalin Thangaraj
 
JRuby, Ruby, Rails and You on the Cloud
JRuby, Ruby, Rails and You on the CloudJRuby, Ruby, Rails and You on the Cloud
JRuby, Ruby, Rails and You on the Cloud
Hiro Asari
 
Spring into rails
Spring into railsSpring into rails
Spring into rails
Hiro Asari
 
Workshop 4: NodeJS. Express Framework & MongoDB.
Workshop 4: NodeJS. Express Framework & MongoDB.Workshop 4: NodeJS. Express Framework & MongoDB.
Workshop 4: NodeJS. Express Framework & MongoDB.
Visual Engineering
 
Interceptors: Into the Core of Pedestal
Interceptors: Into the Core of PedestalInterceptors: Into the Core of Pedestal
Interceptors: Into the Core of Pedestal
Kent Ohashi
 
Yii, frameworks and where PHP is heading to
Yii, frameworks and where PHP is heading toYii, frameworks and where PHP is heading to
Yii, frameworks and where PHP is heading to
Alexander Makarov
 
Domains!
Domains!Domains!
My Adventures In Objective-C (A Rubyists Perspective)
My Adventures In Objective-C (A Rubyists Perspective)My Adventures In Objective-C (A Rubyists Perspective)
My Adventures In Objective-C (A Rubyists Perspective)
abdels
 

What's hot (20)

Advanced JavaScript
Advanced JavaScriptAdvanced JavaScript
Advanced JavaScript
 
Introduction to es6
Introduction to es6Introduction to es6
Introduction to es6
 
AkJS Meetup - ES6++
AkJS Meetup -  ES6++AkJS Meetup -  ES6++
AkJS Meetup - ES6++
 
Introduction of ES2015
Introduction of ES2015Introduction of ES2015
Introduction of ES2015
 
How DRY impacts JavaScript performance // Faster JavaScript execution for the...
How DRY impacts JavaScript performance // Faster JavaScript execution for the...How DRY impacts JavaScript performance // Faster JavaScript execution for the...
How DRY impacts JavaScript performance // Faster JavaScript execution for the...
 
Javascript - The Good, the Bad and the Ugly
Javascript - The Good, the Bad and the UglyJavascript - The Good, the Bad and the Ugly
Javascript - The Good, the Bad and the Ugly
 
The Beauty Of Java Script V5a
The Beauty Of Java Script V5aThe Beauty Of Java Script V5a
The Beauty Of Java Script V5a
 
The Beauty of Java Script
The Beauty of Java ScriptThe Beauty of Java Script
The Beauty of Java Script
 
Node.js for PHP developers
Node.js for PHP developersNode.js for PHP developers
Node.js for PHP developers
 
JS Level Up: Prototypes
JS Level Up: PrototypesJS Level Up: Prototypes
JS Level Up: Prototypes
 
ORMs in Golang
ORMs in GolangORMs in Golang
ORMs in Golang
 
AST Rewriting Using recast and esprima
AST Rewriting Using recast and esprimaAST Rewriting Using recast and esprima
AST Rewriting Using recast and esprima
 
Introduction to CoffeeScript
Introduction to CoffeeScriptIntroduction to CoffeeScript
Introduction to CoffeeScript
 
JRuby, Ruby, Rails and You on the Cloud
JRuby, Ruby, Rails and You on the CloudJRuby, Ruby, Rails and You on the Cloud
JRuby, Ruby, Rails and You on the Cloud
 
Spring into rails
Spring into railsSpring into rails
Spring into rails
 
Workshop 4: NodeJS. Express Framework & MongoDB.
Workshop 4: NodeJS. Express Framework & MongoDB.Workshop 4: NodeJS. Express Framework & MongoDB.
Workshop 4: NodeJS. Express Framework & MongoDB.
 
Interceptors: Into the Core of Pedestal
Interceptors: Into the Core of PedestalInterceptors: Into the Core of Pedestal
Interceptors: Into the Core of Pedestal
 
Yii, frameworks and where PHP is heading to
Yii, frameworks and where PHP is heading toYii, frameworks and where PHP is heading to
Yii, frameworks and where PHP is heading to
 
Domains!
Domains!Domains!
Domains!
 
My Adventures In Objective-C (A Rubyists Perspective)
My Adventures In Objective-C (A Rubyists Perspective)My Adventures In Objective-C (A Rubyists Perspective)
My Adventures In Objective-C (A Rubyists Perspective)
 

Similar to Effective ES6

ES6: The future is now
ES6: The future is nowES6: The future is now
ES6: The future is now
Sebastiano Armeli
 
JavaScript Primer
JavaScript PrimerJavaScript Primer
JavaScript Primer
Daniel Cousineau
 
JavaScript ES6
JavaScript ES6JavaScript ES6
JavaScript ES6
Leo Hernandez
 
Moving to modules
Moving to modulesMoving to modules
Moving to modules
Sean Mize
 
EcmaScript 6 - The future is here
EcmaScript 6 - The future is hereEcmaScript 6 - The future is here
EcmaScript 6 - The future is here
Sebastiano Armeli
 
So you think you know JavaScript
So you think you know JavaScriptSo you think you know JavaScript
So you think you know JavaScript
Matt Apperson
 
Bologna Developer Zone - About Kotlin
Bologna Developer Zone - About KotlinBologna Developer Zone - About Kotlin
Bologna Developer Zone - About Kotlin
Marco Vasapollo
 
Impress Your Friends with EcmaScript 2015
Impress Your Friends with EcmaScript 2015Impress Your Friends with EcmaScript 2015
Impress Your Friends with EcmaScript 2015
Lukas Ruebbelke
 
Es6 hackathon
Es6 hackathonEs6 hackathon
Es6 hackathon
Justin Alexander
 
JavaScript For CSharp Developer
JavaScript For CSharp DeveloperJavaScript For CSharp Developer
JavaScript For CSharp Developer
Sarvesh Kushwaha
 
JavaScript - new features in ECMAScript 6
JavaScript - new features in ECMAScript 6JavaScript - new features in ECMAScript 6
JavaScript - new features in ECMAScript 6
Solution4Future
 
JavaScript in 2016
JavaScript in 2016JavaScript in 2016
JavaScript in 2016
Codemotion
 
JavaScript in 2016 (Codemotion Rome)
JavaScript in 2016 (Codemotion Rome)JavaScript in 2016 (Codemotion Rome)
JavaScript in 2016 (Codemotion Rome)
Eduard Tomàs
 
ES6: Features + Rails
ES6: Features + RailsES6: Features + Rails
ES6: Features + Rails
Santosh Wadghule
 
SEMAC 2011 - Apresentando Ruby e Ruby on Rails
SEMAC 2011 - Apresentando Ruby e Ruby on RailsSEMAC 2011 - Apresentando Ruby e Ruby on Rails
SEMAC 2011 - Apresentando Ruby e Ruby on Rails
Fabio Akita
 
Scala in Practice
Scala in PracticeScala in Practice
Scala in Practice
Francesco Usai
 
Your Library Sucks, and why you should use it.
Your Library Sucks, and why you should use it.Your Library Sucks, and why you should use it.
Your Library Sucks, and why you should use it.
Peter Higgins
 
Javascript tid-bits
Javascript tid-bitsJavascript tid-bits
Javascript tid-bits
David Atchley
 
ECMAScript 6
ECMAScript 6ECMAScript 6
ECMAScript 6
偉格 高
 
ESCMAScript 6: Get Ready For The Future. Now
ESCMAScript 6: Get Ready For The Future. NowESCMAScript 6: Get Ready For The Future. Now
ESCMAScript 6: Get Ready For The Future. Now
Krzysztof Szafranek
 

Similar to Effective ES6 (20)

ES6: The future is now
ES6: The future is nowES6: The future is now
ES6: The future is now
 
JavaScript Primer
JavaScript PrimerJavaScript Primer
JavaScript Primer
 
JavaScript ES6
JavaScript ES6JavaScript ES6
JavaScript ES6
 
Moving to modules
Moving to modulesMoving to modules
Moving to modules
 
EcmaScript 6 - The future is here
EcmaScript 6 - The future is hereEcmaScript 6 - The future is here
EcmaScript 6 - The future is here
 
So you think you know JavaScript
So you think you know JavaScriptSo you think you know JavaScript
So you think you know JavaScript
 
Bologna Developer Zone - About Kotlin
Bologna Developer Zone - About KotlinBologna Developer Zone - About Kotlin
Bologna Developer Zone - About Kotlin
 
Impress Your Friends with EcmaScript 2015
Impress Your Friends with EcmaScript 2015Impress Your Friends with EcmaScript 2015
Impress Your Friends with EcmaScript 2015
 
Es6 hackathon
Es6 hackathonEs6 hackathon
Es6 hackathon
 
JavaScript For CSharp Developer
JavaScript For CSharp DeveloperJavaScript For CSharp Developer
JavaScript For CSharp Developer
 
JavaScript - new features in ECMAScript 6
JavaScript - new features in ECMAScript 6JavaScript - new features in ECMAScript 6
JavaScript - new features in ECMAScript 6
 
JavaScript in 2016
JavaScript in 2016JavaScript in 2016
JavaScript in 2016
 
JavaScript in 2016 (Codemotion Rome)
JavaScript in 2016 (Codemotion Rome)JavaScript in 2016 (Codemotion Rome)
JavaScript in 2016 (Codemotion Rome)
 
ES6: Features + Rails
ES6: Features + RailsES6: Features + Rails
ES6: Features + Rails
 
SEMAC 2011 - Apresentando Ruby e Ruby on Rails
SEMAC 2011 - Apresentando Ruby e Ruby on RailsSEMAC 2011 - Apresentando Ruby e Ruby on Rails
SEMAC 2011 - Apresentando Ruby e Ruby on Rails
 
Scala in Practice
Scala in PracticeScala in Practice
Scala in Practice
 
Your Library Sucks, and why you should use it.
Your Library Sucks, and why you should use it.Your Library Sucks, and why you should use it.
Your Library Sucks, and why you should use it.
 
Javascript tid-bits
Javascript tid-bitsJavascript tid-bits
Javascript tid-bits
 
ECMAScript 6
ECMAScript 6ECMAScript 6
ECMAScript 6
 
ESCMAScript 6: Get Ready For The Future. Now
ESCMAScript 6: Get Ready For The Future. NowESCMAScript 6: Get Ready For The Future. Now
ESCMAScript 6: Get Ready For The Future. Now
 

More from Teppei Sato

Node.js Native ESM への道 〜最終章: Babel / TypeScript Modules との闘い〜
Node.js Native ESM への道  〜最終章: Babel / TypeScript Modules との闘い〜Node.js Native ESM への道  〜最終章: Babel / TypeScript Modules との闘い〜
Node.js Native ESM への道 〜最終章: Babel / TypeScript Modules との闘い〜
Teppei Sato
 
サイボウズの給与交渉戦 - Boss Side -
サイボウズの給与交渉戦 - Boss Side -サイボウズの給与交渉戦 - Boss Side -
サイボウズの給与交渉戦 - Boss Side -
Teppei Sato
 
Recent compat-table issues
Recent compat-table issuesRecent compat-table issues
Recent compat-table issues
Teppei Sato
 
kintoneがAWSで目指すDevOpsQAな開発
kintoneがAWSで目指すDevOpsQAな開発kintoneがAWSで目指すDevOpsQAな開発
kintoneがAWSで目指すDevOpsQAな開発
Teppei Sato
 
Automated Dependency Updates with Renovate
Automated Dependency Updates with RenovateAutomated Dependency Updates with Renovate
Automated Dependency Updates with Renovate
Teppei Sato
 
君はyarn.lockをコミットしているか?
君はyarn.lockをコミットしているか?君はyarn.lockをコミットしているか?
君はyarn.lockをコミットしているか?
Teppei Sato
 
サイボウズのフロントエンド開発 現在とこれからの挑戦
サイボウズのフロントエンド開発 現在とこれからの挑戦サイボウズのフロントエンド開発 現在とこれからの挑戦
サイボウズのフロントエンド開発 現在とこれからの挑戦
Teppei Sato
 
サイボウズの現在と未来
サイボウズの現在と未来サイボウズの現在と未来
サイボウズの現在と未来
Teppei Sato
 
離れた場所でも最高のチームワークを実現する方法 ーサイボウズ開発チームのリモートワーク事例ー
離れた場所でも最高のチームワークを実現する方法 ーサイボウズ開発チームのリモートワーク事例ー離れた場所でも最高のチームワークを実現する方法 ーサイボウズ開発チームのリモートワーク事例ー
離れた場所でも最高のチームワークを実現する方法 ーサイボウズ開発チームのリモートワーク事例ー
Teppei Sato
 
サイボウズの開発を支えるKAIZEN文化
サイボウズの開発を支えるKAIZEN文化サイボウズの開発を支えるKAIZEN文化
サイボウズの開発を支えるKAIZEN文化
Teppei Sato
 
SPAと覚悟
SPAと覚悟SPAと覚悟
SPAと覚悟
Teppei Sato
 
JavaScript Language Update 2016 (LLoT)
JavaScript Language Update 2016 (LLoT)JavaScript Language Update 2016 (LLoT)
JavaScript Language Update 2016 (LLoT)
Teppei Sato
 
You Don't Know ES Modules
You Don't Know ES ModulesYou Don't Know ES Modules
You Don't Know ES Modules
Teppei Sato
 
Closure Compiler Updates for ES6
Closure Compiler Updates for ES6Closure Compiler Updates for ES6
Closure Compiler Updates for ES6
Teppei Sato
 
ES6 in Practice
ES6 in PracticeES6 in Practice
ES6 in Practice
Teppei Sato
 
Our wish to Flowtype
Our wish to FlowtypeOur wish to Flowtype
Our wish to Flowtype
Teppei Sato
 
Flowtype Introduction
Flowtype IntroductionFlowtype Introduction
Flowtype Introduction
Teppei Sato
 
Closure CompilerのES6対応 あるいはES6時代のAltJS生存戦略
Closure CompilerのES6対応 あるいはES6時代のAltJS生存戦略Closure CompilerのES6対応 あるいはES6時代のAltJS生存戦略
Closure CompilerのES6対応 あるいはES6時代のAltJS生存戦略
Teppei Sato
 
本当のClosure Compilerをお見せしますよ。
本当のClosure Compilerをお見せしますよ。本当のClosure Compilerをお見せしますよ。
本当のClosure Compilerをお見せしますよ。
Teppei Sato
 
DockerがYAVAY!
DockerがYAVAY!DockerがYAVAY!
DockerがYAVAY!
Teppei Sato
 

More from Teppei Sato (20)

Node.js Native ESM への道 〜最終章: Babel / TypeScript Modules との闘い〜
Node.js Native ESM への道  〜最終章: Babel / TypeScript Modules との闘い〜Node.js Native ESM への道  〜最終章: Babel / TypeScript Modules との闘い〜
Node.js Native ESM への道 〜最終章: Babel / TypeScript Modules との闘い〜
 
サイボウズの給与交渉戦 - Boss Side -
サイボウズの給与交渉戦 - Boss Side -サイボウズの給与交渉戦 - Boss Side -
サイボウズの給与交渉戦 - Boss Side -
 
Recent compat-table issues
Recent compat-table issuesRecent compat-table issues
Recent compat-table issues
 
kintoneがAWSで目指すDevOpsQAな開発
kintoneがAWSで目指すDevOpsQAな開発kintoneがAWSで目指すDevOpsQAな開発
kintoneがAWSで目指すDevOpsQAな開発
 
Automated Dependency Updates with Renovate
Automated Dependency Updates with RenovateAutomated Dependency Updates with Renovate
Automated Dependency Updates with Renovate
 
君はyarn.lockをコミットしているか?
君はyarn.lockをコミットしているか?君はyarn.lockをコミットしているか?
君はyarn.lockをコミットしているか?
 
サイボウズのフロントエンド開発 現在とこれからの挑戦
サイボウズのフロントエンド開発 現在とこれからの挑戦サイボウズのフロントエンド開発 現在とこれからの挑戦
サイボウズのフロントエンド開発 現在とこれからの挑戦
 
サイボウズの現在と未来
サイボウズの現在と未来サイボウズの現在と未来
サイボウズの現在と未来
 
離れた場所でも最高のチームワークを実現する方法 ーサイボウズ開発チームのリモートワーク事例ー
離れた場所でも最高のチームワークを実現する方法 ーサイボウズ開発チームのリモートワーク事例ー離れた場所でも最高のチームワークを実現する方法 ーサイボウズ開発チームのリモートワーク事例ー
離れた場所でも最高のチームワークを実現する方法 ーサイボウズ開発チームのリモートワーク事例ー
 
サイボウズの開発を支えるKAIZEN文化
サイボウズの開発を支えるKAIZEN文化サイボウズの開発を支えるKAIZEN文化
サイボウズの開発を支えるKAIZEN文化
 
SPAと覚悟
SPAと覚悟SPAと覚悟
SPAと覚悟
 
JavaScript Language Update 2016 (LLoT)
JavaScript Language Update 2016 (LLoT)JavaScript Language Update 2016 (LLoT)
JavaScript Language Update 2016 (LLoT)
 
You Don't Know ES Modules
You Don't Know ES ModulesYou Don't Know ES Modules
You Don't Know ES Modules
 
Closure Compiler Updates for ES6
Closure Compiler Updates for ES6Closure Compiler Updates for ES6
Closure Compiler Updates for ES6
 
ES6 in Practice
ES6 in PracticeES6 in Practice
ES6 in Practice
 
Our wish to Flowtype
Our wish to FlowtypeOur wish to Flowtype
Our wish to Flowtype
 
Flowtype Introduction
Flowtype IntroductionFlowtype Introduction
Flowtype Introduction
 
Closure CompilerのES6対応 あるいはES6時代のAltJS生存戦略
Closure CompilerのES6対応 あるいはES6時代のAltJS生存戦略Closure CompilerのES6対応 あるいはES6時代のAltJS生存戦略
Closure CompilerのES6対応 あるいはES6時代のAltJS生存戦略
 
本当のClosure Compilerをお見せしますよ。
本当のClosure Compilerをお見せしますよ。本当のClosure Compilerをお見せしますよ。
本当のClosure Compilerをお見せしますよ。
 
DockerがYAVAY!
DockerがYAVAY!DockerがYAVAY!
DockerがYAVAY!
 

Recently uploaded

National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
Quotidiano Piemontese
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Tosin Akinosho
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
danishmna97
 
OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
David Brossard
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
Aftab Hussain
 
Infrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI modelsInfrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI models
Zilliz
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Malak Abu Hammad
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
Zilliz
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
IndexBug
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
Safe Software
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
Matthew Sinclair
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
tolgahangng
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
Uni Systems S.M.S.A.
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Speck&Tech
 
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdfAI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
Techgropse Pvt.Ltd.
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
Edge AI and Vision Alliance
 

Recently uploaded (20)

National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
 
OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
 
Infrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI modelsInfrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI models
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
 
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdfAI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
AI-Powered Food Delivery Transforming App Development in Saudi Arabia.pdf
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
 

Effective ES6

  • 2. Hello! • Teppei Sato, @teppeis • Cybozu, Inc. / kintone • This is my first and last YAPC :)
  • 7. Today talk about: • Introduce ES6 features • Deprecated best-practice/patterns • What’s ES2016, ES2017… • How to use ES6 from now
  • 9. –Brendan Eich from Effective JavaScript “My solution to the challenging requirements and crazy-short schedule was to make JavaScript extremely malleable from the start.” https://www.flickr.com/photos/jsconf/4587502948/
  • 10. –Douglas Crockford 2001, http://www.crockford.com/javascript/javascript.html “JavaScript: The world’s most misunderstood programming language” https://www.flickr.com/photos/charliebrewer/2897862701/
  • 11. JavaScript has many pitfalls… • Prototype inheritance (No class) • new, this • Function scope (No block scope) • Global variables (No module system) • Hoisting • NaN, undefined • typeof null • with, eval
  • 12. Example: No Class function Person(name) { this.name = name; } Person.prototype.greet = function() { console.log("Hello, I'm " + this.name); }; var bob = new Person("Bob"); bob.greet(); // "Hello, I'm Bob" • Use Prototype to emulate Classes
  • 13. If you miss "new", dangerous! function Person(name) { this.name = name; } // Oh! You forget `new` var bob = Person("Bob"); console.log(bob); // undefined // Global leak!!!!!!!!!! console.log(window.name); // "Bob"
  • 14. We've made best-practices a.k.a. “work around”
  • 15.
  • 16.
  • 17.
  • 18.
  • 19. Practice: Be sure to call with "new" function Person(name) { // check! if (this instanceof Person) { return new Person(name); } this.name = name; } // without `new` var bob = Person("Bob"); bob.greet(); // "Hello, I'm Bob"
  • 20. ES6!
  • 21. ECMAScript 6 • Published on June 17, 2015 • Formally "ECMAScript 2015" • 6 years! from ES5
  • 22. ECMAScript 6 • Modern syntax fixing pitfalls • Better support for large applications • No (or few) breaking changes
  • 23. For example: ES6 Classes
  • 24. ES6 Classes: Simple! class Person { constructor(name) { this.name = name; } greet() { console.log("Hello, I'm " + this.name); } } var bob = new Person("Bob"); bob.greet(); // without `new` var bob = Person("Bob"); // Error!
  • 25. Classes based on Prototype function Person(name) { this.name = name; } Person.prototype.greet = function() { console.log("Hello, I'm " + this.name); }; var bob = new Person("Bob"); bob.greet(); // "Hello, I'm Bob" OUT OF DATE!
  • 26. Be sure to call with `new` function Person(name) { // check! if (this instanceof Person) { return new Person(name); } this.name = name; } // without `new` var bob = Person("Bob"); bob.greet(); // "Hello, I'm Bob" OUT OF DATE!
  • 27. New ES6 features deprecates yesterday’s best-practices No more altJS! https://www.flickr.com/photos/jorge-11/2765216505/
  • 28. Can I use ES6 now?
  • 30. You can use ES6 now! • Modern browsers and io.js (node.js) support 
 half of ES6 features. • Safari 9 (WebKit) will support many ES6 features soon. • Except for IE11…
  • 31. Transpiler and polyfill • ES6 Transpiler:
 source code converter from ES6 to ES5/ES3 • ES6 Polyfill:
 library to provide ES6 built-in classes, functions and objects for ES5/ES3
  • 32. Babel
  • 33. Babel • The most compatible (71%) ES6 transpiler • Integrated with core-js (polyfill library) • Usage: • CLI: npm i -g babel • Browserify: babelify • REPL on the Web (Try it out!)
  • 34. Babel REPL on the Web
  • 36. ES6 features • New syntax • New built-in classes and objects • Improvement of existing classes
  • 37. ES6 features • New syntax • New built-in classes and objects • Improvement of existing classes
  • 38. New syntax • Arrow Function • Classes • Modules • Block Scope (let/const) • Extended Object Literal • Default Params • Rest Params • Spread Operator • Destructuring • Iterator • Generator • Template Literal • Tail Call Optimization
  • 40. Prefer arrow function // ES5 old function var add = function(a, b) { return a + b; }; // ES6 arrow function! var add = (a, b) => { return a + b; }; var add = (a, b) => a + b; var square = n => n * n; // good for array filter chains [1, 2, 3, 4].filter(n => n % 2 === 0).map(n => n * n);
  • 41. Assign “this” to “self” var john = { name: "John", helloLater: function() { // save `this` as `self` var self = this; setTimeout(function() { // `this` is not available. use `self`. console.log("Hello, I'm " + self.name); }, 1000); } } john.helloLater(); // "Hello, I'm John" after 1sec OUT OF DATE!
  • 42. Arrow function don’t need "self" let john = { name: "John", helloLater: function() { // use arrow function setTimeout(() => { // `this` is available here! console.log("Hello, I'm " + this.name); }, 1000); } } john.helloLater(); // "Hello, I'm John" after 1sec
  • 44. ES6 Classes class Person { constructor(name) { this.name = name; } greet() { console.log("Hello, I'm " + this.name); } } var bob = new Person("Bob"); bob.greet();
  • 45. Classes based on Prototype function Person(name) { this.name = name; } Person.prototype.greet = function() { console.log("Hello, I'm " + this.name); }; var bob = new Person("Bob"); bob.greet(); // "Hello, I'm Bob" OUT OF DATE!
  • 46. Handmade inheritance function // handmade function to extend function __extends(child, parent) { for (var key in parent) { if (Object.prototype.hasOwnProperty.call(parent, key)) { child[key] = parent[key]; } } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; }; function Programmer(name, language) { Person.call(this, name); this.language = language; } __extends(Programmer, Person); OUT OF DATE!
  • 47. ES6 Class inheritance class Programmer extends Person { constructor(name, language) { super(name); this.language = language; } greet() { super.greet(); console.log("I like " + this.language); } } var bob = new Programmer("Bob", "JavaScript"); bob.greet(); // "Hello, I'm Bob" // "I like JavaScript" • with "extends" and "super" • can extends built-in classes like "Error"
  • 49. Module pattern // Global module var myModule = (function () { // Module object var module = {}, privateVariable = "Hello World"; function privateMethod() { // ... } module.publicProperty = "Foobar"; module.publicMethod = function () { console.log( privateVariable ); }; return module; })(); OUT OF DATE!
  • 50. CommonJS Modules // import var foo = require('foo'); foo(); // export exports.bar = function() { console.log('bar'); } OUT OF DATE! • node.js/npm friendly • browserify/webpack to build for browser
  • 51. ES6 Modules • run anywhere (browsers, node.js…) if ES6 available • easy to parse statically • strict mode by default in modules // export (./module.js) export var foo = "foo!"; export function bar() {} export class Baz { baz() {} } // import import {foo, bar, Baz} from "./module"; console.log(foo); // "foo!" bar(); new Baz();
  • 52. Write “use strict;” • Strict mode is useful even in ES6. • In ES6 Module, always strict mode! • You don’t have write “use strict;” in ES6 modules. "use strict"; // Error! with (obj) {} // Error! var obj = {a: 1, a: 1}; OUT OF DATE!
  • 54. ES5 has only function scope function foo() { var num = 1; // ... too many statements if (true_condition) { // same scope! overwrite above `num`! var num = 2; // .. some process } console.log(num); // 2 !!! }
  • 55. Weird hoisting(巻き上げ) var a = 'outer'; function bar() { console.log(a); var a = 'inner'; } bar(); // undefined !!!
  • 56. Weird hoisting(巻き上げ) var a = 'outer'; function bar() { // hoisting! var a; console.log(a); a = 'inner'; } bar(); // undefined !!!
  • 57. Place “var”s at the top of the scope • for function scope and hoisting function init() { // `var` once at the top of the scope! var i, cell, cells = document.getElementsByTagName('td'); for (i = 0; i < cells.length; i++) { cell = cells[i]; cell.addEventListener('click', function() { cell.style.backgroundColor = '#00F'; }, false); } } OUT OF DATE!
  • 58. Use ES6 let or const anytime! • let and const create block scope • no hoisting • no more "var"! function foo() { let num = 1; // ... too many statements if (true_condition) { // different scope! let num = 2; } console.log(num); // 1 }
  • 59. with for-loop • each iterate creates its own block scope for (let i = 0; i < 5; i++) { // new block scope is created for each iteration setTimeout(() => console.log(i), i * 100); } // display "1", "2", "3", "4", "5"
  • 60. const • immutable value (not immutable object) • use like Java's final const foo = 1; foo = 100; // Error! const foo = 1000; // Error! // properties are mutable const obj = {}; obj.foo = 1; // No error
  • 62. Incorrect default params function add(a, b) { // if "a" is 0, 1 is assigned to "a". a = a || 1; b = b || 2; return a + b; } add(0, 0); // 1 + 2 = 3 • Incorrect, but occur frequently
  • 63. function add(a, b) { // correct, but awful.. if (a === undefined) { a = 1; } if (b === undefined) { b = 2; } return a + b; } add(0, 0); // 0 + 0 = 0 Handmade default params comparing to undefined OUT OF DATE!
  • 64. ES6 Default Parameters // default value for each param function add(a = 1, b = 2) { return a + b; } add(); // 1 + 2 = 3 add(0); // 0 + 2 = 2 add(undefined, 0); // 1 + 0 = 1 add(0, 0); // 0 + 0 = 0
  • 66. Use "arguments" for variable-length arguments function foo(first, second) { console.log("first:", first); console.log("second:", second); // arguments is an ArrayLike, not an Array. var rest = Array.prototype.slice.call(arguments, 2); console.log("rest:", rest); } foo(1, 2, 3, 4, 5); // first: 1 // second: 2 // rest: [3, 4, 5] OUT OF DATE!
  • 67. ES6 Rest Params instead of arguments • You don’t have to use `arguments` function foo(first, second, ...rest) { console.log("first:", first); console.log("second:", second); console.log("rest:", rest); } foo(1, 2, 3, 4, 5); // first: 1 // second: 2 // rest: [3, 4, 5]
  • 69. Destructuring assignment • Array assignment let match = /(d{4})(d{2})(d{2})/.exec("20151231"); // match: [2015151231, 2015, 12, 31] let [, year, month, day] = match; console.log(year, month, day); // 2015 12 31 // Swapping [x, y] = [y, x]
  • 70. Destructuring assignment • Object assignment let {name: a, age: b} = {name: "Bob", age: 20}; console.log(a, b); // "Bob" 20 // shorthand let {name, age} = {name: "Bob", age: 20}; console.log(name, age); // "Bob" 20
  • 71. Destructuring assignment • Function params like "named-params" • Options object param function draw(x, y, {width = 320, height = 160} = {}) { // do the task } size(0, 0); size(0, 0, {}); size(0, 0, {width: 1}); size(0, 0, {height: 2}); size(0, 0, {width: 1, height: 2});
  • 72. Handmade Options object handlingOUT OF DATE! function draw(x, x, options) { if (options.width === undefined) { options.width = 320; } if (options.height === undefined) { options.height = 320; } // do the task }
  • 74. Concat with "+" or String#join() // concat with variables var name = 'Bob'; var str = "Hello, I'm " + name + "."; // create multiple lines var multi = ["line1", "line2", "line3"].join("n"); OUT OF DATE!
  • 75. Template Literal // interpolation var name = 'Bob'; var str = `Hello, I'm ${name}.`; // multiple lines var multi = `line1 line2 line3`; • back-quoted string
  • 77. Extended object literal for shorthand let foo = 1; let bar = 2; // shorthand let obj = {foo, bar}; // same as: {foo: foo, bar: bar}; let prefix = 'foo'; let obj = { // computed property [prefix + 'abc']: 1, // method definition without "function" keyword foo() { console.log('foo!'); } };
  • 78. and… • Iterator • Spread Operator • Generator • Tail Call Optimization 78
  • 79. ES6 features • New syntax • New built-in classes and objects • Improvement of existing classes
  • 80. New built-in classes and objects • Promise • Map • Set • WeakMap/WeakSet • TypedArray • Symbol • Proxy/Reflect
  • 82. Callback args for async API function asyncTask(a, b, callback) { // ...some async task if (error) { callback(error); } else { callback(null, result); } } asyncTask(1, 2, function(error, result) { if (error) { // ...error handling } console.log(result); }); OUT OF DATE!
  • 83. Callback args for async API asyncTask1(function(error, result) { if (error) { // ...error handling } asyncTask2(function(error, result) { if (error) { // ...error handling } asyncTask3(function(error, result) { if (error) { // ...error handling } }); }); }); OUT OF DATE!
  • 84. ES6 Promise function asyncTask(a, b, callback) { // ...some async task return new Promise((resolve, reject) => { if (error) { reject(error); } else { resolve(result); } }); } asyncTask(1, 2).then(result => { console.log(result); }).catch(error => { // ...error handling });
  • 85. ES6 Promise // series asyncTask1().then(result => { return asyncTask2(); }).then(result => { return asyncTask3(); }).catch(error => { // ...error handling });
  • 88. Use Object as a dictionary // some keys are dangerous var obj = {}; var key = "toString"; obj[key] = "value1"; String(obj); // TypeError: can't convert obj to string OUT OF DATE! • some special keys are dangerous
  • 89. Use Object as a dictionary // cannot use object as a key var key1 = {name: "key1"}; var key2 = {name: "key2"}; obj[key1] = "value1"; obj[key2] = "value2"; console.log(obj[key1]); // "value2" console.log(Object.keys(obj)); // ["[object Object]"] OUT OF DATE! • cannot use an object as a key
  • 90. ES6 Map // no dangerous keys let map = new Map(); map.set("toString", "value1"); map.get("toString"); // "value1" String(map); // "[object Map]" // object as a key let key1 = {}; let key2 = {}; let m = new Map(); m.set(key1, "v1"); m.set(key2, "v2"); m.get(key1); // "v1"
  • 91. ES6 Set let set = new Set(); set.add("value1"); console.log(set.size); // 1 // unique set.add("value1"); console.log(set.size); // 1 • not easy to implement Set in ES5
  • 93. ES6 features • New syntax • New built-in classes and objects • Improvement of existing classes
  • 94. Improvement of existing classes • String • RegExp • Array • Object • Math • Number
  • 96. Object.assign var target = {a: 1, b: 2}; var s1 = {b: 3, c: 4}; var s2 = {c: 5, d: 6}; var ret = Object.assign(target, s1, s2); console.log(target); // {a: 1, b: 3, c: 5, d: 6} • no more $.extend() !
  • 98. Unicode surrogate pair support • 野家 valid "𠮷野家".codePointAt(0).toString(16); // "20BB7" String.fromCodePoint(0x20BB7); // "𠮷"
  • 100. What's happen? if (a => 1) { // ... }
  • 101. Oh! Arrow function! // expected if (a >= 1) { } // arrow function! confusing.. if (a => 1) { } // clear if ((a) => 1) { }
  • 102. ESLint
  • 103.
  • 105. The TC39 Process: Annual • TC39 committee approves acceptance for each stage. Stage 0: Strawman (idea) Stage 1: Proposal (problem, solution and demo/polyfill) Stage 2: Draft (initial spec) Stage 3: Candidate (review and feedback) Stage 4: Finished (two implementations at least) • Stage 4 features are published as ES201X
 on July every year.
  • 106.
  • 108. Exponentiation Operator // x ** y let squared = 2 ** 2; // same as: 2 * 2 let cubed = 2 ** 3; // same as: 2 * 2 * 2 // x **= y let a = 2; a **= 2; // same as: a = a * a;
  • 109. Array.prototype.includes(str, pos) [1, 2, 3].includes(2); // true [1, 2, 3].includes(4); // false [1, 2, NaN].includes(NaN); // true ["a", "b", "c"].includes("a", 0); // true ["a", "b", "c"].includes("a", 1); // false
  • 111. Object.observe(obj, observer) let records; function observer(recs) { records = recs; } let obj = {id: 1}; Object.observe(obj, observer); obj.a = 'b'; obj.id++; Object.deliverChangeRecords(observer); assertChangesAre(records, [ {object: obj, type: 'add', name: 'a'}, {object: obj, type: 'update', name: 'id', oldValue: 1} ]);
  • 112. Async/await async function chainAnimationsAsync(elem, animations) { let ret = null; try { for (let anim of animations) { ret = await anim(elem); } } catch(e) { /* ignore */ } return ret; }
  • 113. SIMD let a = SIMD.Float32x4(1.0, 2.0, 3.0, 4.0); let b = SIMD.Float32x4(5.0, 10.0, 15.0, 20.0); let c = SIMD.Float32x4.add(a,b); // c: (6.0, 12.0, 18.0, 24.0) • Single Instruction Multiple Data • Vector data calculation
  • 114. How can I get along with ES6 and ES.next?
  • 115. May the Babel be with you! • It's too far for all browsers to support ES6. • IE11 will live until Jun 10, 2023… • You will be able to stop transpiling features that browsers support natively. • Also ES201X features are available via Babel.
  • 116. Design your policy: Which ES6 features do you use? • Which browsers/node.js do you support? • If you need IE8 (ES3), it's not easy to use ES6… • Which feature is effective for your project? • Is the feature easy to transpile/polyfill?
  • 117. Easy to transpile/polyfill? • No problem Arrow function, let/const, Extended Object literal, Classes
 Extended function params, Template literal, Map/Set, Promise… • Be careful/Partial Module, Generator, Symbol • Hard/Impossible WeakMap/Set, Proxy, Reflect, Tail Call Optimization
  • 118. Customize Babel config • Specify TC39 Stage (default: Stage 2) • Specify your blacklist features // .babelrc { "stage": 3, "blacklist": [ "es6.tailCall", "regenerator" ] }
  • 120. Conclusion • ES6 is awesome! • Some best-practices are deprecated. • Try ES6 with Babel from now!