A talk delivered at Tokyo NodeFest about the state of JavaScript in 2015.

1. the state of javascript

2. hi, i’m domenic
Google Chrome
TC39
WHATWG HTML and Streams Standards
Promises
jsdom

3. let’s talk about
> where we’ve come from
> javascript today
> new platform innovations
> where we’re going

4. where we’ve
come from

5. history
1995: form validation, image rollovers
1997: ECMA-262 edition 1, Internet Explorer 4, DHTML
1999: ES3 (function expressions, try/catch/finally, regexps, …)
2005: Ajax
2006: jQuery
2008: V8 (the speed race begins), JS: The Good Parts
2009: ES5, Node.js, PhoneGap, JSConf, ServerJS/CommonJS
2010: Backbone.js, RequireJS
2012: Windows 8, Nodecopter
2013: Nodebots, next-gen MVC, Extensible Web, asm.js
2015: io.js, ES2015, MS Edge, Node.js 4, web assembly

6. javascript
today

7. es2015 is here

8. es2015: syntax
Class sugar: class, extends, super
Arrow functions: arr.map(x => x * x)
Destructuring: var { x, y } = getPoint()
Rest/spread: var [first, …rest] = els; Math.max(...myArray)
Parameter defaults: function parseInt(x, base = 10) { }
Block scoping: { let x = 5; const y = 10; }

9. es2015: data structures
Map: object-to-object O(1) access time
Set: O(1) lookup and storage
WeakMap/WeakSet: private state and branding
Iteration protocol: for-of across anything, even user iterables

10. es2015: game-changers
Generators: lazy sequences and async/await-like syntax
Promises: standardized async; play well with generators
Proxies: virtual objects, no more .get(…)/.set(…, …)!
Template strings: jsx`<a href="${url}">${text}</a>`
Subclassable built-ins: class Elements extends Array { … }

11. es2015 in the wild

12. new code styles
{
"no-var": 2,
"object-shorthand": 2,
"prefer-arrow-callback": 2,
"prefer-const": 2,
"prefer-template": 2
}
https://github.com/tmpvar/jsdom/blob/master/lib/jsdom/living/document-type.js
"use strict";
const NODE_TYPE = require("../living/node-type");
const privates = Symbol("DocumentType internal sl
module.exports = core => {
core.DocumentType = class DocumentType extends
constructor(secret, ownerDocument, name, publ
if (secret !== privates) {
throw new TypeError("Invalid constructor"
}
super(ownerDocument);
this[privates] = { name, publicId, systemId
}
get name() {
return this[privates].name;
}
⋮

13. promises everywhere
generators for async
https://github.com/domenic/wattsi-server/blob/master/lib/app.js
const outDirectory = randomDirectoryName();
yield mkdirp(outDirectory);
try {
try {
const result = yield execFile(config.watt
const outputFile = path.join(outDirectory
yield fs.writeFile(outputFile, `${result.
} catch (e) {
if (e.stdout) e.message = `${e.stdout}${e
this.throw(e, 400);
}
const zipFilePath = `${outDirectory}.zip`;
yield execFile("7za", ["a", "-tzip", "-r",
this.type = "application/zip";
this.body = fs.createReadStream(zipFilePath
} finally {
yield rimraf(outDirectory);
}

14. transpile for browsers
and nonstandard features
https://github.com/unicorn-standard/react-callback-register
@callbackRegister
class MyComponent extends React.Component
static propTypes = {
onClick: React.PropTypes.func
}
@callbackRegister.on('click')
descriptiveName() {
// Do your stuff
}
render() {
return <div {...this.callbacks} />
}
}

15. new platform
innovations

16. #extendthewebforward
extensiblewebmanifesto.org

17. class CustomImage extends HTMLElement {
constructor(src) {
super();
if (src !== undefined) this.src = src;
}
get src() {
return (new URL(this.getAttribute("src"), this.baseURI)).href;
}
set src(value) {
this.setAttribute("src", value);
}
[Element.attributeChanged](name) {
if (name === "src") updateShadowDOM(this, this.src);
}
}
document.registerElement("custom-image", CustomImage);
https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Constructor-Dmitry.md
custom elements

18. https://www.npmjs.com/search?q=service+worker
toolbox.precache(['/index.html', '/site.css', '/images/logo.png']);
toolbox.cache('/data/2014/posts.json');
toolbox.uncache('/data/2013/posts.json');
toolbox.router.get('/:foo/index.html', (req, values) => {
return new Response(
`Handled a request for ${req.url}
with :foo as ${values.foo}`);
});
toolbox.router.get('/myapp/a', toolbox.networkFirst);
toolbox.router.get('/myapp/b', toolbox.networkOnly);
toolbox.router.get('/myapp/c', toolbox.cacheFirst);
toolbox.router.get('/myapp/:page', toolbox.cacheOnly);
toolbox.router.get('/(.*)', toolbox.fastest);
https://github.com/GoogleChrome/sw-toolbox
service workers

19. registerPaint('circle', class {
static get inputProperties() { return ['--circle-color']; }
paint(ctx, geom, properties) {
// Change the fill color.
ctx.fillStyle = properties.get('--circle-color');
// Determine the center point and radius.
const x = geom.width / 2;
const y = geom.height / 2;
const radius = Math.min(x, y);
// Draw the circle o/
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
ctx.fill();
}
});
#myElement {
--circle-color: red;
background-image: paint(circle);
}
https://drafts.css-houdini.org/css-paint-api/#example-1
custom paint

20. where we’re
going

21. https://tc39.github.io/ecma262/

22. spec version numbers are bullshit
es6, es2015, es2016… who cares?
you should not.

23. coming soon

24. async function getUserImages() {
const response = await fetch("http://example.com/users");
const users = await response.json();
return Promise.all(users.map(async (u) => {
return {
name: u.name,
image: (await fetch(u.imageUrl)).body
};
}));
}
async/await

25. for (let i = 0; i < maxIterations; ++i) {
const zRe24 = SIMD.Float32x4.mul(zRe4, zRe4);
const zIm24 = SIMD.Float32x4.mul(zIm4, zIm4);
const mi4 = SIMD.Float32x4.lessThanOrEqual(SIMD.Float32x4.add(zRe24,
if (mi4.signMask === 0x00) {
break;
}
const newRe4 = SIMD.Float32x4.sub(zRe24, zIm24);
const newIm4 = SIMD.Float32x4.mul(SIMD.Float32x4.mul(two4, zRe4), zIm
zRe4 = SIMD.Float32x4.add(cRe4, newRe4);
zIm4 = SIMD.Float32x4.add(cIm4, newIm4);
count4 = SIMD.Int32x4.add(count4, SIMD.Int32x4.and(mi4, on4));
}
SIMD.js
https://github.com/PeterJensen/mandelbrot/blob/master/js/mandelbrot.js

26. watch out for

27. // 64 bit integers
const fifteen = 5UL + 10UL;
// Memory-efficient structurally-equal "structs"
const Point = new ValueType({ x: float64, y: float64 });
const point = new Point({ x: 1.5, y: 2.4 });
assert(point === new Point({ x: 1.5, y: 2.4 }));
// Custom literals and operator overloads
const romaineLettuce = 0x3B5323FFrgba;
const length = 50percent + 10em + 5px;
el.css.width += 2rem;
value types
https://github.com/nikomatsakis/typed-objects-explainer/

28. class BusinessLogic {
@performance
doImportantComputation() {
// ...
}
}
(new BusinessLogic()).doImportantComputation();
// => doImportantComputation: 102ms
decorators
https://www.npmjs.com/package/decorator-performance

29. startSpinner();
const p = fetch(url)
.then(r => r.json())
.then(data => fetch(data.otherUrl))
.then(res => res.text())
.then(text => updateUI(text))
.catch(err => showUIError(err))
.finally(stopSpinner);
cancelButton.onclick = () => p.cancel();
cancelable promises

30. async function* directoryEntries(path) {
const dir = await opendir(path);
try {
let entry;
async for (const entry of readdir(dir)) {
yield path.resolve(entry);
}
} finally {
await closedir(dir);
}
}
async iterators

31. <script type="module">
import a from "./a.js";
import { b } from "../b.js";
import $ from "https://cdn.example.com/jquery.js";
</script>
module loading

32. one last thing…

33. web assembly!?!?
https://github.com/WebAssembly/design