C/C++: Preprocessor > Compiler > Assembler > Linker

JavaScript: Lexer > Parser > Translator > Interpreter

How about ignoring these steps ?

Yes! AOT compilation!

BUT! How?

An extraordinarily optimizable, low-level subset of JavaScript.

• NPAPI(1995-2015) - PDF documents
• ActiveX(1996-2015) - Document embedding
• Shockwave/Flash(1996-?) - Animations
• Java Applets(1996-?) - Applications
• JavaScript performance wars(2008)
• Native Client / Portable Native Client(2008/2013)
• Emscripten / asm.js(2010/2013)
• WebAssmbly(2015)

Module structure

  function MyAsmModule(stdlib, foreign, heap) {
    "use asm";  // marks this function as an asm.js module
    // module body:
    function f1(...) { ... }
    function f2(...) { ... }
    // ...
    return {
      export1: f1,
      export2: f2,
      // ...
    };
  }
            

Standard library

• Global double values: Infinity, NaN
• Double functions: Math.ceil, Math.floor, Math.sqrt ...
• Integer or double function: Math.abs ...
• Integer function (ES6): Math.imul (integer multiplication)
• Double values: Math.E, Math.LOG2E, Math.PI ...

Static typing

Via its initializer

  var a = 0;    // a has type int
  var b = 0.0;  // b has type double
            

Via type annotations

  function foo(x, y) {
    var x = x|0;   // x has type int
    var y = +y;    // y has type double
    return +(x * y);   // function returns a double
  }
            

Advantages of asm.js

• Interacts well with JavaScript (not like NaCl/PNaCl)
• Backward compatible with all existing JavaScript engines

But it's impossible for hand writing in complex projects

In the real world, it's like this:

Tips: Emscripten does all these.

Example...

  #include <stdio.h>
  int fib(int x) {
    if (x < 2) {
      return 1;
    } else {
      return fib(x - 1) + fib(x - 2);
    }
  }
  int main() {
    int result = fib(45);
    printf("%d\n", result);
    return 1;
  }
            

  ./emcc -O1 -s ASM_JS=1 ./hello_world.cpp
            

  node ./a.out.js
            

Build emscripten by self...

CoffeeScript

  divisible = 3

  divisibleReporter = (lastFound, nextDivisible) ->
    "Found: #{lastFound}, Next: #{nextDivisible}"

  divisibleKeeper = ((divisible) ->
    lastFound = 0
    nextDivisible = divisible
    (number) ->
      if (number >= nextDivisible) 
        nextDivisible = (Math.floor(number/divisible) + 1) * divisible
        lastFound = Math.floor(number/divisible) * divisible
        console.log divisibleReporter(lastFound, nextDivisible)
    )(divisible);

  for n in [1..100]
    divisibleKeeper(n)
            

TypeScript

  var divisible = 3;

  var divisibleReporter = function(lastFound:number, nextDivisible:number){
    return "Found: " + lastFound + ", Next: " + nextDivisible;
  };

  var divisibleKeeper = (function(divisible:number) {
    var lastFound = 0;
    var nextDivisible = divisible;
    return function(number:number) {
      if (number >= nextDivisible) {
        nextDivisible = (Math.floor(number / divisible) + 1) * divisible;
        lastFound = Math.floor(number / divisible) * divisible;
        console.log(divisibleReporter(lastFound, nextDivisible));
      }
    };
  })(divisible);

  for (var i = 1; i <= 100; ++i) {
    divisibleKeeper(i);
  }
            

Dart

  int divisible = 3;

  String divisibleReporter(int lastFound, int nextDivisible) => "Found: ${lastFound}, Next: ${nextDivisible}";

  var divisibleKeeper = ((int divisible) {
    int lastFound = 0;
    int nextDivisible = divisible;
    return (int number){
      if (number >= nextDivisible) {
        nextDivisible = ((number/divisible).floor() + 1) * divisible;
        lastFound = (number/divisible).floor() * divisible;
        print(divisibleReporter(lastFound, nextDivisible));
      }
    };  
  })(divisible);

  void main() {  
    for (var i = 0; i < 100; i++) {
      divisibleKeeper(i);
    }
  }
            

GWT

  public class ButtonExample implements EntryPoint {

    public void onModuleLoad() {
      // Make a new button that does something when you click it.
      Button b = new Button("Jump!", new ClickHandler() {
        public void onClick(ClickEvent event) {
          Window.alert("How high?");
        }
      });

      // Add it to the root panel.
      RootPanel.get().add(b);
    }
  }
            

WASM does not replace JS

Text Format

The text format is equivalent and isomorphic to the binary format.

Binary Encoding