Always bet on JS - Finjs.io NYC 2016

ALWAYSJS

Brendan EichBrave Software@BrendanEich Always bet on

ALWAYSBrendan Eich Brave Software @BrendanEich Always bet on JS

There are only two kinds of languages: the ones people complain about and the ones nobody uses.

— Bjarne Stroustrup, C++ creator Managing Director, Techology; Morgan Stanley

https://twitter.com/BrendanEich

JS didn’t always have it this good…

For a Better Web

Enterprise Browser Challenge:Secure the TLS (https:) Wormhole

(Get Brave now at https://brave.com)

https://brave.com

For a Better Web

Typical tracking on a popular site Same site with Brave

(Map data from Ghostery)

www.tmz.com

Google Analytics

Google Fonts

II-assets.tmz.com

II-media.tmz.com

ssl-cdn-media.tmz.com

ssl-cdn-assests.tmz.com

(simulated map data)

Cross-site Images + Cookies + JS Created a Monster

For a Better Web

Typical Web Browsers

Typical Enterprise Web Access

Sensitive Business Data

Malware

500K Unprotected Employees

Clean web traffic

Spyware

Ad Tracking

Malicious Ads

Internet HTTP/HTTPS

Typical Companies

For a Better Web

Brave Secure Browser Approach

Brave for Secure Enterprise Web Access

500K Safe Employees

Clean web traffic

Internet HTTP/HTTPS

whitelist sites

othersites

Malware

Spyware

Ad Tracking

Malicious Ads

Brave Page Filter Browser Extension Brave

Browser

1995-era JS in Ideal Browser (w/ 2016 HTML5)

Fast-forward 21 years

(Restarting JS standards: a Herculean task)

2016-era JS VM + Modern Browser Architecture

Open Web Standards, Multiple Implementations

Now let’s add WebAssembly

WebAssembly: JS VM 2nd Input Language

Q: So what are WebAssembly APIs?

A: Web APIs!

This is a key difference from plugin architectures

ALWAYSAlways bet onBrendan Eich Brave Software @ BrendanEich

JS

What is WebAssembly? The Short Form• A new standard being developed in a W3C Community Group and

on GitHub with Apple, Google, Microsoft and Mozilla which defines:

• 1. Input: a compact, portable binary format which is fast to load and runs safely at predictably near-native speed

• 2. Output: a 1:1 text format rendered by developer tools for “View Source” prettyprinting


JS

What is WebAssembly? Multiple Choice• Depending on where you are coming from:

• 1. Compiler target for the Web

• 2. Virtual ISA

• 3. Yet another JavaScript feature

• 4. Evolution of asm.js


JS

1. Compiler target for the Web• Not a programming language per se

• Compile from programming languages to WebAssembly


JS

1. Compiler target for the Web• Optimized for size and compile speed, not for direct execution, so it looks different from

traditional assembly language • typed stack machine

• save bytes on register operands • single-def-use analysis for free

• constrained to postorder AST serialization • validate = AST type-checking (simple and fast) • render to expression trees in View Source

• structured control flow via stack of branch targets • fast single-pass SSA construction • simplifies various other graph algorithms


JS

2. Virtual Instruction Set Architecture (ISA)• As close to physical machine instructions as safety and portability

allow ("check" can safely eliminated on 64-bit, hoistable otherwise)

WebAssembly x86 ARM

i32.add add ADD

call call BL

i32.load check + mov check + LDR


JS

3. Yet Another JavaScript Feature• ability to efficiently load and cache large code

• + predictable near-native performance

• = powerful library-building tool


JS

3. Yet Another JavaScript Feature• What use does JS have for compiled libraries?

• We see all these today via C++ compiled to JS:

• client-side image compression/filters, mapping, language detection, computer vision including facial recognition (via getUserMedia), crypto, compression, audio mixing, ...

• And that's before considering games/simulations


JS

4. Evolution: what is asm.js?• asm.js is an extraordinarily optimizable, low-level subset of

JavaScript that can be compiled from languages like C/C++

• Because it's just JavaScript, it runs well on all browsers today

• Currently, Firefox and Edge ship special asm.js optimizations

• Chrome has asm.js optimizations in development

http://asmjs.org/spec/latest

https://www.chromestatus.com/features#asm.js


JS

4. Evolution: how do you get asm.js?

• Compile pipeline: C/C++ ⇒ clang/LLVM ⇒ Emscripten ⇒ asm.js

• emcc(1) command; most clang options work, as do gcc options


JS

4. Evolution: what does asm.js look like?

Brendan Eich Brave Software @ BrendanEich

function asmModule(global, imports, buffer) { // module pattern "use asm"; // no-op hint var print = imports.print; // module imports var heap32 = new global.Int32Array(buffer); // C++ heap ... function foo(ptr) { // C/C++ functions ⇒ JS functions ptr = ptr|0; // Coercions declare arg types var tmp = 0; // Initializer declares var type tmp = heap32[ptr>>2]|0; // Pointers ⇒ integers tmp = (tmp + 1)|0; // Guaranteed 1 add instruction print(tmp|0); // Call out to non-asm.js } ... return {foo:foo, ...}; // Exports called from non-asm.js }

Allows AOT, parallel compilation and code caching (blog)

https://blog.mozilla.org/luke/2014/01/14/asm-js-aot-compilation-and-startup-performance/


JS

4. Evolution: proposed asm.js extensions• Shared memory multithreading: SharedArrayBuffer

• Single-Instruction/Multiple-Data parallelism: SIMD.js

• Experimental support in Firefox (Nightly) and Emscripten

http://tc39.github.io/ecmascript_sharedmem/shmem.html

https://github.com/tc39/ecmascript_simd/

Threads for JS?!“… over your dead body!”Brendan Eich, 12 Feb 2007

https://hacks.mozilla.org/2016/05/a-taste-of-javascripts-new-parallel-primitives/

https://brendaneich.com/2007/02/threads-suck/

4. Evolution: from asm.js to WebAssembly• Can think of WebAssembly as a binary encoding of asm.js with

tweaks to make it a better compiler target

asm.js WebAssembly

(x+y)|0 i32.add

emulate (JS needs int64) i64.add

f(x|0)|0 call $f

HEAP32[i>>2]|0 i32.load


JS

New Numeric Types for AI/FinTech/etc. JS• Int64(0) ==> 0L // as in C#

• Uint64(0) ==> 0UL // ditto

• Float32(0) ==> 0f // ditto

• BigInt(0) ==> 0N // N to avoid i/I

• Decimal(0) ==> 0m // m or M, C/F#

• User-defined suffixes and operators: | ^ & == < <= << >> >>> + - * / % ~ ToBoolean unary- unary+


JS

Will WebAssembly Replace JavaScript?• No, I don't think so. Why?

• JS has huge & growing momentum, vibrant ecosystem, stickiness

• JS in full remains the one obligate built-in language of the Web

• Web APIs continue to be designed specifically for JS first

• In fact, WebAssembly may have quite the opposite effect:

• If you're going to target WebAssembly and your app needs a scripting language, JS is the obvious first choice...

Demos