Our favorite language is now powering everything from event-driven servers to robots to Git clients to 3D games. The JavaScript package ecosystem has quickly outpaced past that of most other languages, allowing our vibrant community to showcase their talent. The front-end framework war has been taken to the next level, with heavy-hitters like Ember and Angular ushering in the new generation of long-lived, component-based web apps. The extensible web movement, spearheaded by the newly-reformed W3C Technical Architecture Group, has promised to place JavaScript squarely at the foundation of the web platform. Now, the language improvements of ES6 are slowly but surely making their way into the mainstream— witness the recent interest in using generators for async programming. And all the while, whispers of ES7 features are starting to circulate… JavaScript has grown up. Now it's time to see how far it can go.

1. The State of JavaScript

2. form validation
image rollovers
1995
ECMA-262 edition 1
Internet Explorer 4
DHTML
1997
ES3 (function expressions, try/catch/finally, regexps, …)1999

3. WHATWG formed, focusing on web applications2004
Ajax (XMLHttpRequest) appears2005
jQuery 1.02006

4. 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

5. Windows 8
Nodecopter
2012
Nodebots
Ember
Angular
The Extensible Web Manifesto
asm.js
2013
ES6
ES7
???
2014

6. JS on the front-end

7. In the beginning, there was

8. then we said, i have heard about this “mvc” thing!
and there was

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

10. HTML enhanced for web apps!

11. A framework for creating
ambitious web applications.

12. but, why let the libraries have all the fun?

14. Web components are…
Shadow DOM
Custom Elements
<template>
HTML imports

15. polymer, the web components prolyfill

16. #extendthewebforward
extensiblewebmanifesto.org

17. JS on everything

20. node repl.js
drone> takeoff()
drone> clockwise(0.5)
drone> front(1)
drone> land()

22. 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);
});
});

23. node-serialport
?

24. node-serialport
???

25. node-serialport
port.on("open", function () {
port.on("data", function (data) {
console.log(data);
});
port.write("lsn", function (err, res) {
// …
});
});

34. JS the language

35. asm.js
an extraordinarily optimizable, low-level subset of JavaScript

36. js as the assembly of the web

37. js as the vm of the web

38. .NET
JVM
Ruby
Python
Haskell

40. traceur

41. es6ify

42. es6 goals
Be a better language for writing:
- Complex applications
- Libraries (including the DOM) shared by those applications
- Code generators targeting the new edition

43. 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) { }

44. 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 });

45. 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

46. es7 is one more than es6

47. 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