ES6 on the Rocks
Content
- Status
- Features
- Setup
- Further steps
The
Current
Status
What do we have?
- Grunt-based build process
- ES5 in most browsers
- ES6 in modern browsers?
Current Support
Firefox | 41% - 65% |
---|---|
Chrome | 44% |
Safari | 20% |
IE | 15% |
- Not enough to seriously consider usage
- In fact we could add shims for some parts
- Powerful features left out :(
Current Support of Babel
Babel | 76% |
---|---|
Firefox | 41% - 65% |
Chrome | 44% |
Safari | 20% |
IE | 15% |
- Enough to seriously consider usage
- Powerful features included
The
Best
Features
,which I have copied from
https://github.com/lukehoban/es6features
Arrows
_.forEach(events, function(item) {
if (!item.author) {
item.author = profileResource.get({id: item.author_id});
}
});
_.forEach(events, item => {
if (!item.author) {
item.author = profileResource.get({id: item.author_id});
}
});
(share the this / like in coffee script)
Classes
class SkinnedMesh extends THREE.Mesh {
constructor(geometry, materials) {
super(geometry, materials);
this.idMatrix = SkinnedMesh.defaultMatrix();
}
update(camera) {
super.update();
}
get boneCount() {
return this.bones.length;
}
set matrixType(matrixType) {
this.idMatrix = SkinnedMesh[matrixType]();
}
static defaultMatrix() {
return new THREE.Matrix4();
}
}
Heavily discussed if this heaven or hell
Enhanced Object Literals
var obj = {
// __proto__
__proto__: theProtoObj,
// Shorthand for ‘handler: handler’
handler,
// Methods
toString() {
// Super calls
return "d " + super.toString();
},
// Computed (dynamic) property names
[ 'prop_' + (() => 42)() ]: 42
};
Wow, I can update toString() and write the prototype directly
Oh, and dynamic properties
Template Strings
template: [
'<div class="attachments" ng-if="attachment">',
'<img class="attachments-selection" ng-src="{{ attachment.url }}">',
'<span ng-if="editing" ng-click="deleteAttachment(1)">Löschen</span>',
'<div class="attachments-preview" ng-repeat="attachment in attachments" ng-if="preview">',
'<img ng-src="{{ attachment.url }}" ng-click="selectAttachment($index)" >',
'<span ng-if="editing" ng-click="deleteAttachment($index)">Löschen</span>',
'</div>',
'</div>'
].join(''),
template: `<div class="attachments" ng-if="attachment">
<img class="attachments-selection" ng-src="{{ attachment.url }}">
<span ng-if="editing" ng-click="deleteAttachment(1)">Löschen</span>
<div class="attachments-preview" ng-repeat="attachment in attachments" ng-if="preview">
<img ng-src="{{ attachment.url }}" ng-click="selectAttachment($index)" >
<span ng-if="editing" ng-click="deleteAttachment($index)">Löschen</span>
</div>
</div>`
no more ['<div>', '</div'>].join('')
Template Strings
template: [
'<div class="attachments">',
'<p> x is ' + x + '!</p>',
'</div>'
].join(''),
template: `
<div class="attachments">
<p> x is ${ x }!</p>
</div>`
In a non angular context
Deconstructing
// list matching
var [a, , b] = [1,2,3];
// object matching
var { op: a, lhs: { op: b }, rhs: c }
= getASTNode()
// object matching shorthand
// binds `op`, `lhs` and `rhs` in scope
var {op, lhs, rhs} = getASTNode()
// Can be used in parameter position
function g({name: x}) {
console.log(x);
}
g({name: 5})
Can you hear the haskell?
// Fail-soft destructuring
var [a] = [];
a === undefined;
// Fail-soft destructuring with defaults
var [a = 1] = [];
a === 1;
Array comprehensions
// Array comprehensions
var results = [
for(c of customers)
if (c.city == "Seattle")
{ name: c.name, age: c.age }
]
Well, kinda like in haskell
This is an experimental feature in babel
Default, Rest, Spread, let, const
function f(x, y=12) {
// y is 12 if not passed (or passed as undefined)
return x + y;
}
f(3) == 15
function f(x, ...y) {
// y is an Array
return x * y.length;
}
f(3, "hello", true) == 6
function f(x, y, z) {
return x + y + z;
}
// Pass each elem of array as argument
f(...[1,2,3]) == 6
function f() {
{
let x;
{
// okay, block scoped name
const x = "sneaky";
// error, const
x = "foo";
}
// error, already declared in block
let x = "inner";
}
}
Not the heroes we wanted, but the ones we needed
A cool shorthand, I don't know the name of
var foo = {
background: '#263238'
}, bar = {
color: 'red'
}, foobar = {foo, bar};
Iterators & Generators
I'll tell you as soon as I understand them....
Iterators & Generators
I'll tell you as soon as I understand them....
See you next campfire :)
Modules
// lib/mathplusplus.js
export * from "lib/math";
export const e = 2.71828182846;
export default function(x) {
return Math.exp(x);
}
// app.js
import exp, {pi, e} from "lib/mathplusplus";
alert("2π = " + exp(pi, e));
like in AMD or Common.js <= default for babel
Module Loaders
System.import('lib/math').then(function(m) {
alert("2π = " + m.sum(m.pi, m.pi));
});
var loader = new Loader({
global: fixup(window) // replace ‘console.log’
});
loader.eval("console.log('hello world!');");
Dynamic loading – ‘System’ is default loader
Create execution sandboxes - new Loader
Maps & Sets
// Sets
var s = new Set();
s.add("hi").add("bye").add("hi");
s.size === 2;
s.has("hi") === true;
// Maps
var m = new Map();
m.set("hello", 42);
m.set(s, 34);
m.get(s) == 34;
// Weak Sets
var ws = new WeakSet();
ws.add({ data: 42 });
// Weak Maps
var wm = new WeakMap();
wm.set(s, { extra: 42 });
wm.size === undefined
And their weak counterparts
Because the object has no reference it will not be held in the set/map
Proxies
// Proxying a function object
var target = function () { return 'I am the target'; };
var handler = {
apply: function (receiver, ...args) {
return 'I am the proxy';
}
};
var p = new Proxy(target, handler);
p() === 'I am the proxy';
Also for objects
Other relevant features
- Unicode support
- Tail calls
- Math + Number + String API extension
- Subclassable buildins (Array, etc)
- Symbols
- Binary and Octal literals
- various cool new APIs (Promises, Fetch, etc)
The
Awesome
Setup
The
Gruntfile
Additions
- Babel watch task
- Babel dist task
Other changes
- run npm install --save-dev grunt-babel
- have fun with ES6
It's
Even
Better
Babel ♥ React + JSX
The
Very
End
ES6 Rocks
By Daniel Schmidt
ES6 Rocks
- 2,194