A Proposal for a Binary AST

#35

Johnny Estilles

Regional Director of Engineering
Freelancer.com

johnny@freelancer.com

@JohnnyEstilles

We need you!

Software Engineers

Web QA

Senior Product Manager

Senior Network Engineer

Senior Technical Recruiter

Site Reliability Engineer

Designer

Software Engineer Interns

https://www.freelancer.com/careers

Agenda

What is Binary AST?
Why do we need a new JavaScript format?
What is the current state of the Binary AST proposal?
Can you use Binary AST today?

#35

Credits

#35

@imyoric

https://www.linkedin.com/in/davidteller/

https://yoric.github.io/

https://github.com/Yoric

David Teller

What is Binary AST?

#35

#35

... a new over-the-wire format for JavaScript proposed and actively developed by Mozilla that aims to speed up parsing while keeping the semantics of the original JavaScript intact.

Binary AST

https://blog.cloudflare.com/binary-ast/

#35

Binary AST

tc39.github.io/proposal-binary-ast

Live specification at ...

#35

Binary AST

It is ...

It is not ...

A proposal for the JavaScript language
A new file format for JavaScript (.binjs)
Smaller than .js files
Much faster to parse
Intended to be output by tools; decoded by implementations.

Uglified JavaScript
Bytecode
Web Assembly

#35

Binary AST Proponents

Shu-yu Guo

David Teller and Kannan Vijayan

Vladan Djeric

Ingvar Stepanyan

Why do we need a new format?

#35

#35

Loading JavaScript

#35

Loading JavaScript

#35

Parsing JavaScript is slow!

Loose typing
Hoisting
String parsing
Error handling
Scoping
Ambiguous grammar

#35

#35

var x;
function f() {
  function use_x() {
    use(x); // Closes over hoisted var x.
  }

  var x;
}

Parsing JavaScript is slow!

#35

function h(input) {
  var x;

  (function() {
    eval(input);
  })();
}

Parsing JavaScript is slow!

#35

function outer() {
  function innerWithSyntaxError() {
    var;
  }
}

Parsing JavaScript is slow!

#35

Parsing JavaScript is slow!

(a, {b: c, d}, [e = 1])...

#35

Parsing JavaScript is slow!

(a, {b: c, d}, [e = 1]); // it was an expression

#35

Parsing JavaScript is slow!

(a, {b: c, d}, [e = 1]) => … // it was a parameter list

#35

Existing Optimizations

JavaScript Frameworks & Toolchains

Lazy Loading
Bundling
Minification

#35

Existing Optimizations

Browsers

Lazy parsers
Bytecode caching
Web Assembly (WASM)
Service Workers

#35

Loading JavaScript Today

#35

Loading JavaScript with Binary AST

#35

Loading JavaScript with Binary AST

function foo(x) {
  // No `eval`.
}

Names:
  - ["foo", ...]

FunctionDeclaration: // 42
  name: 0            // 0
  eval: false        // 0
  body:              // ...
    ...

Instead of this ...

We store this ...

#35

Parsing Binary AST is faster

Name	Size (kb)	Parse time (average ms)	BinaryAST parse time (average ms)	Diff (%)
React	20	0.407	0.032	-92.138
D3 (v5)	240	11.623	0.224	-98.073
Angular	180	7.093	0.680	-90.413
Babel	780	21.100	0.895	-95.758
Backbone	32	0.898	0.045	-94.989

What is the current state of the proposal?

#35

#35

The State of Binary AST

https://github.com/tc39/proposals/blob/master/stage-1-proposals.md

TC39 Committee - Stage 1

Stage 1 proposals represent problems that the committee is interested in spending time exploring solutions to.

Can you use Binary AST today?

#35

#35

Server-side Implementation

https://github.com/binast/binjs-ref

Use the static binjs_encode tool from binjs-ref to pre-encode JavaScript files ahead of time

#35

Server-side Implementation

https://github.com/cloudflare/binast-cf-worker

Use a Worker from binast-cf-worker to serve the resulting BinaryAST assets

#35

Client-side Implementation

https://www.mozilla.org/en-US/firefox/channel/desktop/#nightly

Firefox Nightly

Go "about:config" and enable unrestricted BinaryAST support via the following options

#35

Improvement as seen by a user on mobile Firefox

Do you have any questions?