Asm.js is a strict subset of JavaScript designed for performance, using low-level features like typed arrays and allowing backward compatibility without plugins. It enables the use of LLVM tools like Emscripten to compile applications written in C/C++ into asm.js. Major browsers like Firefox and Microsoft's Edge have implemented specific optimizations for asm.js, significantly improving performance for web applications.

1. Asm.js introduction
_by Oleksii Prohonnyi

2. OUT OF SCOPE

3. No information in this presentation
 WebAssembly
 NaCl / PNaCl
 LLVM
 JavaScript Engines Performance
 AOT compilation process
 OdinMonkey by Mozilla
 Chakra by Microsoft
 V8 by Google

4. HISTORY

5. History
 JavaScript is one of the world’s most popular programming languages.
 Back in the day, transpilers (source-to-source compilers) were used to hide
some of JavaScript’s ugly parts, e.g. CoffeeScript, ClojureScript,
TypeScript.
 Transpilers mainly use an existing language (such as C or C++) or, they
define a new language (like CoffeeScript).
 Then, instead of writing JavaScript, you can develop in this other language
that the transpiler converts to JavaScript.

6. Compiling to JavaScript: Nothing New!
 Google Web Toolkit (GWT), Java to JS
 pyjamas, Python into JS
 Opal, Ruby to JavaScript
 JSIL, .NET to JavaScript
 Scala.js, Scala to JavaScript
 etc.

7. OVERVIEW

8. What is asm.js?
 asm.js is a strict subset of JavaScript.
 asm.js takes advantage of some low level JavaScript features like Typed
Arrays.
 It does not use any plugins or modules to run the JavaScript code, making
it backward compatible.
 http://asmjs.org/

9. HOW IT WORKS

10. JavaScript vs asm.js
 JavaScript
 asm.js

11. GENERATORS

12. Emscripten
 Emscripten is an LLVM-to-JavaScript compiler.
 Emscripten accepts LLVM bytecode and converts them to asm.js
JavaScript.
 Clang could be used to convert C/C++ codes to LLVM.
 http://kripken.github.io/emscripten-site/

13. Code generation process

14. Code generation process
1. Create a C/C++ app.
2. Compile it using Clang to generate LLVM bytecode.
3. Pass the bytecode to Emscripten to get the JavaScript code.
 Emscripten performs the last two steps itself.

15. BROWSER SUPPORT

16. Browser support
 Mozilla Firefox implements asm.js-specific optimizations, starting with
Firefox 22. OdinMonkey, Mozilla's asm.js ahead-of-time compiler used in
Firefox.
 Microsoft is implementing support for asm.js in Chakra, the JavaScript
engine used by Microsoft Edge, performing validation to produce highly
optimized JIT code.
 The optimizations of Google Chrome's V8 JavaScript engine in Chrome 28
made asm.js benchmarks more than twice as fast as prior versions of
Chrome, although Chrome's V8 does not use ahead-of-time compilation.

17. Browser support

18. EXAMPLE

19. JavaScript snippet

20. C++ snippet

21. Code generation
 Install Emscripten (https://github.com/kripken/emscripten/wiki).
 Convert C++ code to asm.js code:
“./emcc -O1 -s ASM_JS=1 ./hello_world.cpp”
 Code execution with node.js:
“node ./a.out.js”
 Download Clang (http://clang.llvm.org/)
 Convert C++ code to bytecode:
“clang ./hello_world.cpp”

22. Generation result

23. Performance comparison

24. REFERENCES

25. See more
 http://asmjs.org/
 https://github.com/kripken/emscripten
 Big Web App? Compile It! (Alon Zakai / Mozilla)
 Asm.js JavaScript compile target (John Resig / Blog)
 Understanding asm.js (Sitepoint)
 From asm.js to WebAssembly (Brendan Eich / Blog)
 Mozilla Hacks

27. Oleksii Prohonnyi
facebook.com/oprohonnyi
linkedin.com/in/oprohonnyi