Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
The ECMAScript formerly known as 6
Kerrick Long
July 31, 2015
Programming
0
730
The ECMAScript formerly known as 6
Kerrick Long
July 31, 2015
Tweet
Share
More Decks by Kerrick Long
See All by Kerrick Long
15 Things You Shouldn't Do In Ember Anymore
kerrick
0
710
CSS Study Group 1
kerrick
0
710
CSS Study Group 2
kerrick
1
670
Services & Component Collaboration
kerrick
0
520
Donate STL #Build4STL Hackathon Keynote
kerrick
0
160
Donate STL
kerrick
0
590
TDD With Ember.js
kerrick
0
680
JavaScript Promises - Thinking Sync in an Async World
kerrick
20
6.4k
Other Decks in Programming
See All in Programming
読みやすいコードを書こう
yutorin
0
430
テスト設計技法をなぜ&どのように使うのか体験しよう!
imtnd
0
480
アプリのログをチーム外で活用してもらうためにやったこと
shotakashihara
0
190
職場にPythonistaを増やす方法
soogie
0
320
Becoming an Android Librarian
skydoves
3
470
CIでAndroidUIテストの様子を録画してみた
mkeeda
0
180
NieR Re[in]carnationにおけるUnityアニメーション活用術
applibot
1
620
脱オブジェクト指向講座(5分LT資料)
kishida
8
11k
Hapticをカスタマイズしてみよう / ZOZO Tech Talk #6 Customize Haptic
endoumari
0
350
Node.js 最新動向 TFCon 2022
yosuke_furukawa
PRO
6
2.9k
CLI構築のススメ
nyankotaro
1
190
Kotlin 最新動向2022 #tfcon #techfeed
ntaro
1
1.1k
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
261
17k
Done Done
chrislema
174
14k
A better future with KSS
kneath
225
15k
Design by the Numbers
sachag
271
17k
Infographics Made Easy
chrislema
233
17k
Embracing the Ebb and Flow
colly
73
3.3k
Mobile First: as difficult as doing things right
swwweet
212
7.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
225
120k
What the flash - Photography Introduction
edds
61
10k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
19
1.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
103
16k
What's new in Ruby 2.0
geeforr
336
30k
Transcript
babeljs.io/repl
The ECMAScript formerly known as 6
KerrickLong Kerrick KerrickLong.com
JS
JS
DOM ECMAScript +
DOM
context.drawImage(new Image(), 0, 0) event.dataTransfer.setData(mime, data) new Worker('thread.js').postMessage(str) navigator.getUserMedia({audio: true})
DOM
DOM ECMAScript +
ECMAScript
ECMAScript for (var i; i < 10; i++) { break;
} (function(x) { return x + 1; })(100) var bareObject = Object.create(null) [1, 2, 3, 4].map(double).reduce(add)
ECMAScript 6
ECMAScript 2015
JavaScript is growing up.
Dwindling use of App Frameworks that compile to JS
Dwindling use of App Frameworks that compile to JS
Dwindling use of Other Languages that compile to JS
Dwindling use of Other Languages that compile to JS
What’s new?
Modules
// app/routes/example.js import Ember from 'ember'; export default Ember.Route.extend();
Modules
// app/utils/func.js export var flatten = _.flatten.bind(_); export var union
= _.union.bind(_); Modules
// app/utils/func.js export var flatten = _.flatten.bind(_); export var union
= _.union.bind(_); export default { flatten: flatten, union: union }; Modules
Modules import Ember from 'ember'; import { flatten, union }
from 'app/utils/func'; export default Ember.Route.extend({ model: function() { return flatten(union([1, 2, 3])); } });
Arrow Functions
Arrow Functions var _this = this; return this.store.find('pages').then(function(pages) { return
pages.map(function(pages, i) { return _this.modelFor('posts').objectAt(i) }); });
Arrow Functions var _this = this; return this.store.find('pages').then(pages => {
return pages.map((pages, i) => { return _this.modelFor('posts').objectAt(i) }); });
Arrow Functions return this.store.find('pages').then(pages => { return pages.map((pages, i)
=> { return this.modelFor('posts').objectAt(i) }); });
Arrow Functions return this.store.find('pages').then(pages => { return pages.map((pages, i)
=> this.modelFor('posts').objectAt(i)); });
Enhanced Object Literals
var foo = 'bar'; var obj = { foo: foo,
model: function(params) { return params; } }; obj['id_' + Math.random()] = 'secret'; Enhanced Object Literals
var foo = 'bar'; var obj = { foo, model:
function(params) { return params; } }; obj['id_' + Math.random()] = 'secret'; Enhanced Object Literals
var foo = 'bar'; var obj = { foo, model(params)
{ return params; } }; obj['id_' + Math.random()] = 'secret'; Enhanced Object Literals
var foo = 'bar'; var obj = { foo, model(params)
{ return params; }, ['id_' + Math.random()]: 'secret' }; Enhanced Object Literals
Destructuring
import Ember from 'ember'; var Route = Ember.Route; var
filename = ‘photo.jpg’.split(‘.')[0]; var ext = ‘photo.jpg’.split('.')[1]; export default Route.extend(); Destructuring
import Ember from 'ember'; var { Route: Route }
= Ember; var [filename, ext] = 'photo.jpg'.split('.'); export default Route.extend(); Destructuring
import Ember from 'ember'; var { Route } =
Ember; var [filename, ext] = 'photo.jpg'.split('.'); export default Route.extend(); Destructuring
Template Strings
confirm('Really delete ' + promotion.name + '?'); Template Strings
confirm(`Really delete ${promotion.name}?`); Template Strings
const code = '<script src="' + src + '">\n' +
'</script>\n' + '<noscript>\n' + '<a href="' + link + '">View</a>\n' + '</noscript>'; Template Strings
const code = `<script src="${src}"> </script> <noscript> <a href="${link}">View</a> </noscript>`;
Template Strings
const and let
function example(isGood) { if (isGood) { var x = 4;
console.log(x); // 4 } console.log(x); // 4 } const and let
function example(isGood) { if (isGood) { const x = 4;
console.log(x); // 4 } console.log(x); // undefined } const and let
function canTransition(isSaving) { const canTransition = true; if (isSaving) {
canTransition = false; // Error: already set. } return canTransition; } const and let
function canTransition(isSaving) { let canTransition = true; if (isSaving) {
canTransition = false; } return canTransition; } const and let
Promises
Promise States Pending Fulfilled Rejected } Settled
getJSON onFulfilled onRejected getJSON onFulfilled onRejected
$.ajax(config) .then(onFulfilled, onRejected) Lies, all LIES!
var promise = getJSON('/comments'); somethingElse(); promise.then(onFulfilled, onRejected); Promise.prototype.then
JavaScript Promises Thinking Sync in an Async World then
JS