What's wrong with Web and how to live with it

Harmony

ECMA-262 (6th edition) - ECMAScript 2015 Language Specification

ECMA-402 (2nd edition) - ECMAScript 2015 Internationalization API Specification

My talk TC39 Process (ru)

June 17, 2015

Stable browsers + Edge

Unstable browsers

Post-Harmony

ECMA-262 (7th edition) - ECMAScript 2016 Language Specification

ECMA-402 (3rd edition) - ECMAScript 2016 Internationalization API Specification

ECMA-414 (1st edition) - ECMAScript Specification Suite

June 14, 2016

Problems?

Syntax evolution

Reserved words

Future reserved words

Mozilla
vs
Mootools

array.indexOf(element) !== -1

Mozilla

Array.prototype.contains()

Mozilla

if (!Array.prototype.contains) {
      Array.prototype.contains = ...
}

Mootools 1.2

Array.prototype.includes()

Mozilla

FIN.

FIN.

FIN.

contains vs includes

• Bugzilla
• MDN
• proposal on GitHub

Tail Calls

"use strict";

function factorial(n) {
    if (!n) return 1;
    return n * factorial(n - 1);   // not tail call
}

factorial(170);                    // RangeError

"use strict";

function factorial(n, partialFactorial = 1) {
    if (!n) return partialFactorial;
    return factorial(n - 1, n * partialFactorial); // tail call
}

factorial(170);                                    // 7.257415615308004e+30

Tail Position

A function call is in tail position if the following criteria are met:
• The calling function is in strict mode.
• The calling function is either a normal function or an arrow function.
• The calling function is not a generator function.
• The return value of the called function is returned by the calling function.

Benefits of Proper Tail Calls

• call stack space reuse
• reduced memory footprint
• performance improvements

Current state of Tail Calls in JavaScript

• PTC is implemented in WebKit Nightly, Safari TP 4+ and Safari 10
• PTC is not TCO. TCO is not in specification
• V8 has implemented PTC, but has been holding back on shipping
• Both Microsoft and Mozilla (IonMonkey bug, OdinMonkey bug) has faced problems implementing PTC
• At the last TC39 meeting the committee failed to reach consensus on removing implicit tail-calls from the spec as well as promoting STC it to stage 1

Syntactic Tail Calls

"use strict";

function factorial(n, acc = 1) {
    if (!n) return partialFactorial;
    return continue factorial(n - 1, n * partialFactorial);
}

Issues with PTC (according to STC proposal)

• Performance
• Developer Tools
• Error.stack
• Cross-Realm Tail Calls
• Developer Intent

Additional info

• Syntactic Tail Calls proposal
• "Tail calls controversy" issue in compatibility table repo
• "Tail call optimization" issue in ES6 & Node.js
• Apple's response to the proposal to add explicit tail call syntax to ECMAScript

for-in initializers

WebAssembly

My talk WebAssembly: new Era of Web (ru)

WebAssembly is efficient and fast

The wasm AST is designed to be encoded in a size- and load-time-efficient binary format. WebAssembly aims to execute at native speed by taking advantage of common hardware capabilities available on a wide range of platforms.

WebAssembly is safe

WebAssembly describes a memory-safe, sandboxed execution environment that may even be implemented inside existing JavaScript virtual machines. When embedded in the web, WebAssembly will enforce the same-origin and permissions security policies of the browser.

WebAssembly is open and debuggable

WebAssembly is designed to be pretty-printed in a textual format for debugging, testing, experimenting, optimizing, learning, teaching, and writing programs by hand. The textual format will be used when viewing the source of wasm modules on the web.

WebAssembly is part of the open web platform

WebAssembly is designed to maintain the versionless, feature-tested, and backwards-compatible nature of the web. WebAssembly modules will be able to call into and out of the JavaScript context and access browser functionality through the same Web APIs accessible from JavaScript. WebAssembly also supports non-web embeddings.

High-Level Goals

1. Define a portable, size- and load-time-efficient binary format to serve as a compilation target which can be compiled to execute at native speed by taking advantage of common hardware capabilities available on a wide range of platforms, including mobile and IoT.

High-Level Goals

3. Specify and implement incrementally:
   • a Minimum Viable Product (MVP) for the standard with roughly the same functionality as asm.js, primarily aimed at C/C++;
   • an effective and efficient polyfill library for the MVP that translates WebAssembly code into JavaScript in the client so that WebAssembly MVP can run on existing browsers;
   • a follow-up to the MVP which adds several more essential features; and
   • additional features, specified iteratively and prioritized by feedback and experience, including support for languages other than C/C++.

High-Level Goals

5. Design to execute within and integrate well with the existing Web platform:
   • maintain the versionless, feature-tested and backwards-compatible evolution story of the Web;
   • execute in the same semantic universe as JavaScript;
   • allow synchronous calls to and from JavaScript;
   • enforce the same-origin and permissions security policies;
   • access browser functionality through the same Web APIs that are accessible to JavaScript; and
   • define a human-editable text format that is convertible to and from the binary format, supporting View Source functionality.

High-Level Goals

7. Design to support non-browser embeddings as well.

High-Level Goals

9. Make a great platform:
   • build a new LLVM backend for WebAssembly and an accompanying clang port;
   • promote other compilers and tools targeting WebAssembly;
   • enable other useful tooling.

MVP

• Modules
• Code in a module is specified in terms of an AST
• Binary format
• Text format
• Compatibility with browsers as well as with other environments
• Polyfill to JavaScript.

Essential Post-MVP Features

• Threads
• SIMD
• Zero-cost Exception Handling
• Feature Testing

Some of features to add after the MVP

• Tooling support
• More expressive control flow
• GC integration
• DOM integration
• Source maps integration
• Coroutines
• JIT
• Streaming Compilation

Links

• WebAssembly Design Documents
• WebAssembly organization on GitHub
• Why we need WebAssembly
• Compiler infrastructure and toolchain library for WebAssembly, in C++

The steps in the polyfill process

The steps in the standards process

PostCSS

Houdini

Links

• PostCSS
• Houdini: Maybe The Most Exciting Development In CSS You’ve Never Heard Of
• CSS-TAG Houdini Task Force Specifications
• CSS Houdini Wiki

What about DOM?