Evolving the World's Most Popular Programming Language

Slide 1

Slide 1 text

Evolving the World’s Most Popular Programming Language Dave Herman, Mozilla Research

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

don’t break the web

Slide 8

Slide 8 text

! ! !

Slide 9

Slide 9 text

function gen() { yield 42; }

Slide 10

Slide 10 text

function gen() { yield 42; } ✘

Slide 11

Slide 11 text

function gen() { yield 42; }

Slide 12

Slide 12 text

can haz one JS?

Slide 13

Slide 13 text

function* gen() { yield 42; }

Slide 14

Slide 14 text

Evolution’s Evolutionary Advantage Focus: avoid scope creep, second system syndrome Consistency: keep a uniﬁed development model Stability: apps keep working Adoption✨: lower opt-‐in costs, enable shims

Slide 15

Slide 15 text

apps browsers

Slide 16

Slide 16 text

http://babeljs.io

Slide 17

Slide 17 text

classes

Slide 18

Slide 18 text

function Stack() { this.elements = []; } ! Stack.prototype.isEmpty = function() { return this.elements.length === 0; }; Stack.prototype.push = function(x) { this.elements.push(x); };

Slide 19

Slide 19 text

.elements .isEmpty .push .pop .top Stack.prototype var stack = new Stack();

Slide 20

Slide 20 text

class Stack { constructor() { this.elements = []; } isEmpty() { return this.elements.length === 0; } push(x) { this.elements.push(x); } // ... }

Slide 21

Slide 21 text

function MyArray() { Array.call(this); // super (!!) // ... } ! MyArray.prototype = new Array(); MyArray.prototype.foo = function() { // ... };

Slide 22

Slide 22 text

var a = new MyArray(); a[17] = "foo"; a.length // 0

Slide 23

Slide 23 text

class MyArray extends Array { constructor() { super(); // ... } foo() { // ... } }

Slide 24

Slide 24 text

modules

Slide 25

Slide 25 text

var bytes = require("bytes"); var iconv = require("iconv-‐lite"); ! module.exports = function(stream, opts, done) { // ... };

Slide 26

Slide 26 text

import bytes from "bytes"; import iconv from "iconv-‐lite"; ! export default function(stream, opts, done) { // ... };

Slide 27

Slide 27 text

import bytes from "bytes"; import iconv from "iconv-‐lite"; ! export default function(stream, opts, done) { // ... };

Slide 28

Slide 28 text

// phoneQuery.js ! // look up a phone number or contact module.exports = function(query) { /* ... */ }; ! // initiate a phone call module.exports.call = function() { /* ... */ };

Slide 29

Slide 29 text

var ಠ_ಠ = require("phoneQuery"); ಠ_ಠ("Mom").mobile // "555-‐555-‐5555" ಠ_ಠ("Mom").email // "[email protected]" ಠ_ಠ.call("Boss", "work") ಠ_ಠ.call(ಠ_ಠ, query) // boom!

Slide 30

Slide 30 text

// phoneQuery.js ! // look up a phone number or contact export default function(query) { /* ... */ }; ! // initiate a phone call export function call() { /* ... */ };

Slide 31

Slide 31 text

// file.js var Folder = require("./folder.js"); // ... ! function File() { /* ... */ } File.prototype.dotSlash = function() { ... new Folder(...) ...; } module.exports = File;

Slide 32

Slide 32 text

// folder.js var File = require("./file.js"); // ... ! function Folder() { /* ... */ } Folder.prototype.contents = function() { ... new File(...) ...; } module.exports = Folder;

Slide 33

Slide 33 text

var Folder = require("./folder.js"); var File = require("./file.js"); // ... file.dotSlash() // object is not a function

Slide 34

Slide 34 text

// file.js import Folder from "./folder.js"; // ... ! export default class File { // ... dotSlash() { ... new Folder(...) ...; } }

Slide 35

Slide 35 text

// folder.js import File from "./file.js"; // ... ! export default class Folder { // ... contents() { ... new File(...) ... } }

Slide 36

Slide 36 text

generators

Slide 37

Slide 37 text

fs.readFile("/etc/passwd", function(err, data) { if (err) throw err; console.log(data); }

Slide 38

Slide 38 text

fs.readFile("/etc/passwd", function(err, data) { if (err) throw err; fs.readFile("~/.bashrc", function(err, data2) { if (err) throw err; fs.readFile(tmp, function(err, data3) { if (err) throw err; // ... } } }

Slide 39

Slide 39 text

fsp.readFile("/etc/passwd") .then(function(data) { return fsp.readFile("~/.bashrc"); }) .then(function(data2) { return fsp.readFile(tmp); }) .then(function(data3) { // ... }) .catch(function(err) { throw err; });

Slide 40

Slide 40 text

function* f(x, y, z) { yield x; yield y; yield z; } for (s of f("aloha", "howdy", "hey")) { console.log(s); // "aloha", "howdy", "hey" }

Slide 41

Slide 41 text

spawn(function*() { try { var data = yield fsp.readFile("/etc/passwd"); var data2 = yield fsp.readFile("~/.bashrc"); var data3 = yield fsp.readFile(tmp); // ... } catch (err) { throw err; } })

Slide 42

Slide 42 text

async function f() { try { var data = await fsp.readFile("/etc/passwd"); var data2 = await fsp.readFile("~/.bashrc"); var data3 = await fsp.readFile(tmp); // ... } catch (err) { throw err; } })

Slide 43

Slide 43 text

Much more • Default parameters, rest-‐params, argument spread • Destructuring binding and assignment • Object, function, method shorthands • Proxy, Map, WeakMap, Set, WeakSet • Typed arrays • Lexical bindings • Unique symbols • String interpolation • Reﬂection API • Proper tail calls

Slide 44

Slide 44 text

asm.js

Slide 45

Slide 45 text

JavaScript lacks features as a target language. JavaScript is slow. Even when it’s fast, JavaScript is unpredictable. JIT compilation can be janky.

Slide 46

Slide 46 text

Revolution: bytecode VM Evolution: • build a native → JS compiler • study and optimize code patterns it generates • close gaps where we aren't generating optimal code • formalize pattern as validator 㱺 AOT

Slide 47

Slide 47 text

function compiledCalculation() { var x = f()|0; var y = g()|0; return (x+y)|0; }

Slide 48

Slide 48 text

var MEM8 = new Uint8Array(1024 * 1024); var MEM32 = new Uint32Array(MEM8.buffer); ! function compiledMemoryAccess() { MEM8[x] = MEM8[x+10]; MEM32[(x+16)>>2] = 100; }

Slide 49

Slide 49 text

A Safe ‟JS VM” • Static validation: no guards, deopts, boxing • SFI: memory access constrained to binary buﬀer

Slide 50

Slide 50 text

Since day one, asm.js has worked across browsers.

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

The Extensible Web

Slide 53

Slide 53 text

design evaluate design evaluate design evaluate

Slide 54

Slide 54 text

do { product.build(); product.ship(); product.evaluate(); } while (!product.isPerfect());

Slide 55

Slide 55 text

do { standard.design(); standard.ship(); standard.evaluate(); throw new DontBreakTheWeb(); } while (!standard.isPerfect());

Slide 56

Slide 56 text

design evaluate design evaluate design evaluate

Slide 57

Slide 57 text

Prioritize the Gaps • Standardize low-‐level, general functionality • Leave high-‐level experimentation to the market • Example: SharedArrayBuffer