WebAssembly in NodeJS - Speaker Deck

Slide 1

Slide 1 text

The Need for Speed and WebAssembly Willian Martins Autumn 2017

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Timeline…

Slide 4

Slide 4 text

How did we achieve it Moore law Pushed Tech industries to evolve until today Allowed huge computation power even on small devices

Slide 5

Slide 5 text

All this power for what? Faster applications More immersive games Virtual reality Augmented reality Live video/image processing Big Data/Machine learning

Slide 6

Slide 6 text

The languages over time

Slide 7

Slide 7 text

But what about JS?

Slide 8

Slide 8 text

JS - Early days Created in 1995 by Brendan Eich Was written in 11 days Designed to be easy and simple Designed to be a glue code for dynamic Web

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

JS - 2008 until now 2008 - JIT Compiler by google w/ Chrome Jump of performance Allowed more complex applications What is the next step?

Slide 11

Slide 11 text

Willian Elia @wmsbill

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

WE’RE HIRING!!

Slide 14

Slide 14 text

What is WebAssembly?

Slide 15

Slide 15 text

What’s WebAssembly? New binary format Run compiled programs (C, C++, Rust) on a browser Works alongside Javascript Performance and ﬂexibility API

Slide 16

Slide 16 text

Why WebAssembly is faster?

Slide 17

Slide 17 text

V8 - JiT in action

Slide 18

Slide 18 text

V8 - JiT in action

Slide 19

Slide 19 text

V8 - JiT in action

Slide 20

Slide 20 text

V8 - JiT in action

Slide 21

Slide 21 text

V8 - JiT in action

Slide 22

Slide 22 text

V8 - JiT in action

Slide 23

Slide 23 text

V8 - JiT in action

Slide 24

Slide 24 text

JiT: Code life cycle in summary 1. Parse 2. Compile 3. Optimize (de-optimize) 4. Execute 5. Garbage Collector

Slide 25

Slide 25 text

WebAssembly

Slide 26

Slide 26 text

WebAssembly is fast Parse Compile Optimize Execute GC Decode Compile + Optimize Execute JS WASM

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

So WebAssembly looks fast, let’s see how to use it

Slide 29

Slide 29 text

How to run WASM modules Current situation: not possible to run WASM modules on their own Need for some Javascript glue

Slide 30

Slide 30 text

WebAssembly JS API 1. Fetch/Load the module binary 2. Instantiate it 3. Access exported functionalities

Slide 31

Slide 31 text

fs.readFile(‘./module.wasm’, async function(err, file) => { const { instance } = await WebAssembly.instantiate(file); // Do something with the compiled results! });

Slide 32

Slide 32 text

How to generate a WASM ﬁle

Slide 33

Slide 33 text

Compile C to WASM + JS WASM emcc my-module.c -o my-module.js -s WASM=1

Slide 34

Slide 34 text

Then we can simply import the generated JS code as a module

Slide 35

Slide 35 text

Export functions to JS Keyword EMSCRIPTEN_KEEPALIVE EMSCRIPTEN_KEEPALIVE int sum(int x, int y) { return x + y; } Expose only the interface of the WASM module to JS

Slide 36

Slide 36 text

What about WebAssembly memory? How can we access it?

Slide 37

Slide 37 text

Memory management Emscripten provide three useful functions to manage WebAssembly memory _malloc(memoryNeeded) getValue(ptr, type) setValue(ptr, value, type)

Slide 38

Slide 38 text

Elia @eliamain

Slide 39

Slide 39 text

DEMO TIME

Slide 40

Slide 40 text

The WASM implementation was still slower

Slide 41

Slide 41 text

Why??

Slide 42

Slide 42 text

JIT handover

Slide 43

Slide 43 text

“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

Slide 44

Slide 44 text

The future of WebAssembly

Slide 45

Slide 45 text

Future features Formal Speciﬁcation  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 