what's wrong with web

55
What's wrong with Web and how to live with it Sergey Rubanov JavaScript Samurai EXANTE ltd.

Upload: sergey-rubanov

Post on 16-Jan-2017

143 views

Category:

Technology


0 download

TRANSCRIPT

What's wrong with Weband how to live with it

Sergey RubanovJavaScript Samurai

EXANTE ltd.

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

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

Specification

My talk TC39 Process (ru)

June 17, 2015

2

Stable browsers + Edge

June 25, 2015

3

Unstable browsers

June 27, 2016

4

Post-HarmonyECMA-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

5

Problems?

6

Syntax evolution

7

Reserved words

8

Future reserved words

9

Annex EAdditions and Changes That Introduce Incompatibilities with Prior Editions

10

Mozilla vs

Mootools

11

array. indexOf (element) !== -1

Mozilla

12

Array.prototype. contains()

Mozilla

13

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

Mootools 1.2

14

Array.prototype. includes()

Mozilla

15

FIN.

16

FIN.

17

FIN.

18

Tail Calls

20

A tail call is a return statement with a function call, where nothing has to

happen after the call except returning its value.

Kyle Simpson, YDKJS“21

"use strict";

function factorial(n) {

if (!n) return 1;

return n * factorial(n - 1); // not tail call

}

factorial(170); // RangeError

22

"use strict";

function factorial(n, partialFactorial = 1) {

if (!n) return partialFactorial;

return factorial(n - 1, n * partialFactorial); // tail call

}

factorial(170); // 7.257415615308004e+30

23

Tail PositionA 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.

24

Benefits of Proper Tail Calls— call stack space reuse

— reduced memory footprint

— performance improvements

25

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

26

Syntactic Tail Calls

"use strict";

function factorial(n, acc = 1) {

if (!n) return partialFactorial;

return continue factorial(n - 1, n * partialFactorial);

}

27

Issues with PTC (according to STC proposal)— Performance

— Developer Tools

— Error.stack

— Cross-Realm Tail Calls

— Developer Intent

28

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

29

for-in initializers

30

All of V8, JavaScriptCore, and SpiderMonkey have found themselves unable to

honor the ECMAScript 2015 requirement that for (var x = 0 in []);

is a SyntaxError (which is documented in Annex E 13.7).

Jay Freeman, issue in ECMA-262 spec repo

“31

WebAssembly

32

My talk WebAssembly: new Era of Web (ru)

33

a new binary syntax for low-level safe code, initially co-expressive with asm.js,

but in the long run able to diverge from JS’s semantics, in order to best serve as

common object-level format for multiple source-level programming languages.

Brendan Eich

Brandan Eich's blog, June 17, 2015

“34

WebAssembly is efficient and fastThe 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.

35

WebAssembly is safeWebAssembly 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.

36

WebAssembly is open and debuggableWebAssembly 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.

37

WebAssembly is part of the open webplatformWebAssembly 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.

38

High-Level Goals1. 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.

39

High-Level Goals2. 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++.

40

High-Level Goals3. 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.

41

High-Level Goals4. Design to support non-browser embeddings as well.

42

High-Level Goals5. 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.

43

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.

44

Essential Post-MVP Features— Threads

— SIMD

— Zero-cost Exception Handling

— Feature Testing

45

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

46

Links— WebAssembly Design Documents

— WebAssembly organization on GitHub

— Why we need WebAssembly

— Compiler infrastructure and toolchain library for WebAssembly, in C++

47

48

The steps in the polyfill process

49

The steps in the standards process

50

PostCSS

51

Houdini

52

Links— PostCSS

— Houdini: Maybe The Most Exciting Development In CSS You’ve Never Heard

Of

— CSS-TAG Houdini Task Force Specifications

— CSS Houdini Wiki

53

What about DOM?

54

Contact me github.com/chicoxyzzy

twitter.com/chicoxyzzy

linkedin.com/in/chicoxyzzy

Slides

chicoxyzzy.github.io/talks/whats_wrong_with_web

55