Asm.js > Applications > What is it? > How it works? > Current Support > Future goals

Applications

One can play a C++ game, run Qt applications (maybe JVM and .NET in future) in the browser with near native performance!.

They’ve ported Unreal Engine 3 to Asm.js

Play this game on browser Banana Bread source code

See this Qt application running on browser scribble.

Other Qt applications running on browser here’s the full list

Imagine in the future you’ll have ONLY browser icon on your monitor (if they survive till then :sweat_smile:) and you’ll be running all applications through the browser! No installations required, and even run them through the smartphone!!

What is it?

Javascript is an interpreted language hence, slower than pre-compiled counterparts. Now what we’re trying to achieve is run pre-compiled code in a browser, which will be faster. Javascript is an interpreted language hence, slower than pre-compiled counterparts. Now what we’re trying to achieve is run pre-compiled code in a browser, which will be faster.

How it works?

abcEmscripten takes in C/C++ code, passes it through LLVM, and converts the LLVM-generated bytecode into JavaScript (specifically, Asm.js, a subset of JavaScript).

Here’s a nice presentation link

  • Asm.js is a subset of JavaScript. It has been restricted in what we can use in code (like we can’t use strings, booleans, or objects) so that the compiled Asm.js code can run fast, converting the Asm.js code directly into assembly.
  • All external data is stored and referenced from a single object, called the heap. Essentially this heap is a massive array (intended to be a typed array, which is highly optimized for performance). So no more global variables, data structures, closures, and any other forms of data storage => Faster execution.
  • It’s important to note that Asm.js is just JavaScript – there is no special browser plugin or feature needed in order to make it work (although a browser that is able to detect and optimize Asm.js code will certainly run faster).
  • It is fast because it avoids garbage collection and dynamic types.
  • Another smart thing is if we know the data-type BEFOREHAND then we would avoid lots of guessing by the compiler. e.g. if you’re using f = e | 0; then this sets the variable f to equal the value of e but it ALSO ensures that the result will be an INTEGER (| 0 does this, converting a value into an integer).
  • If your browser recognizes asm then it will benefit with the
    "use asm";
    

    directive at the top. This gives the interpreter the hint that everything inside the function should be handled as Asm.js and be compiled to assembly directly.

  • Even the Asm code can still be made usable to other, normal, JavaScript code. Hence you need not write whole apps in asm. You can mix them.

Current Support (as of writing)

The nightly version of Firefox is currently the only browser that supports optimizing Asm.js code.

However it’s important to emphasize that Asm.js-formatted JavaScript code is still just JavaScript code, albeit with an important set of restrictions. For this reason Asm.js-compiled code can still run in other browsers as normal JavaScript code, even if that browser doesn’t support it.

Future goals

  • Support applications from platforms like the JVM and .NET.
  • Support for higher-level constructs like structured objects and garbage collection.
  • We can expect more heavy games to be developed which would run smoothly on browsers.
  • We can expect Qt, Java, C#, Python, Ruby or code in any language to be executed in the browser in the form of asm.

Further Reading

Visit John Resig’s Blog link

What to find there which is not covered here:

  • A BananaBread game’s asm code analysis.
  • Performance comparison.
  • Use Cases.
  • Asm.js and Web Development.
  • Some Q&A which will further clear your doubts.

Reference: https://johnresig.com/blog/asmjs-javascript-compile-target/

Written on June 16, 2017