The State of JavaScript

form validation

image rollovers

1995

ECMA-262 edition 1

Internet Explorer 4

DHTML

1997

ES3 (function expressions, try/catch/finally, regexps, …)1999

WHATWG formed, focusing on web applications2004

Ajax (XMLHttpRequest) appears2005

jQuery 1.02006

V8 released, and the speed race begins

JS: The Good Parts released

2008

ES5

ServerJS/CommonJS

Node.js

PhoneGap

JSConf

2009

Backbone.js

RequireJS

2010

Windows 8

Nodecopter

2012

Nodebots

Ember

Angular

The Extensible Web Manifesto

asm.js

2013

ES6

ES7

???

2014

JS on the front-end

In the beginning, there was

then we said, i have heard about this “mvc” thing!

and there was

then we looked upon data-binding, and saw it was good.

and there was

HTML enhanced for web apps!

A framework for creating ambitious web applications.

but, why let the libraries have all the fun?

Web components are…

Shadow DOM

Custom Elements

<template>

HTML imports

polymer, the web components prolyfill

#extendthewebforward

extensiblewebmanifesto.org

JS on everything

node repl.js

drone> takeoff()

drone> clockwise(0.5)

drone> front(1)

drone> land()

var five = require("johnny-five");var board = new five.Board();

board.on("ready", function () { var sonar = new five.Sonar("A2"); sonar.on("data", function() { console.log(this.cm); });});

node-serialport

?

node-serialport

???

node-serialportport.on("open", function () { port.on("data", function (data) { console.log(data); }); port.write("ls\n", function (err, res) { // … });});

JS the language

asm.jsan extraordinarily optimizable, low-level subset of JavaScript

js as the assembly of the web

js as the vm of the web

.NET

JVM

Ruby

Python

Haskell

traceur

es6ify

es6 goals Be a better language for writing:

- Complex applications

- Libraries (including the DOM) shared by those applications

- Code generators targeting the new edition

what’s in es6 anyway: 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) { }

what’s in es6 anyway: 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

Typed objects: const Point = new StructType({ x: uint32, y: uint32 });

what’s in es6 anyway: game-changers

Generators: lazy sequences and async/await-like syntax

Promises: standardized async; play well with generators

Subclassable builtins: custom arrays, dates, regexps, …

Proxies: virtual objects, no more .get(…)/.set(…, …)!

Template strings: jsx`<a href="${url}">${text}</a>`

Modules: an end to the AMD/CommonJS schism

es7 is one more than es6

what maybe possibly could be in es7

Weak references: useful for e.g. auto-cleanup of data-binding

Async/await: function^() { var res = await promise; }

Object.observe: no-overhead observation

Value types: both built-in (integers!) and user-defined

Bind operator: var method = ::obj.foo