Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WebAssembly the Journey

WebAssembly the Journey

This is the slides of our presentation on BrazilJS 2017 (Porto Alegre and Fortaleza). Presented by @wmsbill and @eliamain

Willian Martins

September 02, 2017
Tweet

More Decks by Willian Martins

Other Decks in Technology

Transcript

  1. What’s WebAssembly? New binary format Run compiled programs (C, C++,

    Rust) on a browser Works alongside Javascript Performance and flexibility API
  2. +

  3. +

  4. Game of life ZERO PLAYER game Matrix, each cell can

    be either DEAD or ALIVE The only external input is the INITIAL STATE Alive Dead
  5. Our algorithm 1.Create a big matrix randomly filled with 0

    and 1 2.Render the initial state and send it to the environment component 3.Generate and render the next state (loop)
  6. A lot of functions function getNextState(currentState, width, height) { …

    } function getLineCount(currentState, column, bounds) { … } function createBounds(width, height) { … } …
  7. JIT: just in time compiler Cold code -> Interpreter Warm

    code -> baseline compiler Hot code -> optimising compiler
  8. JIT: just in time compiler Cold code -> Interpreter Warm

    code -> baseline compiler Hot code -> optimising compiler
  9. JIT: just in time compiler Cold code -> Interpreter Warm

    code -> baseline compiler Hot code -> optimising compiler
  10. JIT: Code life cycle 1. Parse 2. Compile 3. Optimize

    (de-optimize) 4. Execute 5. Garbage Collector
  11. WebAssembly is fast WASM is more compact -> Faster FETCH

    of the source WASM is closer to machine code -> Faster DECODING, COMPILING and OPTIMISING No need to RE-OPTIMISE No garbage collection
  12. How to run WASM modules Current situation: not possible to

    run WASM modules on their own Need for some Javascript glue
  13. WebAssembly JS API 1. Fetch the module binary 2. Instantiate

    it 3. Access exported functionalities
  14. Compile C to WASM + JS WASM v 1.37 emcc

    environment.c -o environment.js -s WASM=1
  15. Export functions to JS Keyword EMSCRIPTEN_KEEPALIVE EMSCRIPTEN_KEEPALIVE void getNextState(int width,

    int height) { … } Expose only the interface of the WASM module to JS
  16. Memory management Emscripten provide three useful functions to manage WebAssembly

    memory _malloc(memoryNeeded) getValue(ptr, type) setValue(ptr, value, type)
  17. Our JS code has a reference to the C memory

    containing the next state Write Allocate Read Write
  18. Reduce memory access One memory allocation on loading One memory

    write on loading One memory read on each iteration
  19. “Currently, calling a WebAssembly function in JS code is slower

    than it needs to be. The JIT doesn’t know how to deal directly with WebAssembly, so it has to route the WebAssembly to something that does. … This can be up to 100x slower than it would be if the JIT knew how to handle it directly. ” Lin Clark
  20. Future features Formal Specification
 Threads supports
 SIMD acronym to Single

    Instruction Multiple Data (back to Stage 3 on TC39) 
 Exception handling
 Garbage collection
 Direct DOM access
 ES6 Module integration