Web Assembly

Bringing into the light.

Transcript

1. Web Assembly George Onwuasoanya Software Developer INITS
2. George Onwuasoanya @george_ndubuisi https://about.me/george_onwuasoanya #Software_Dev #INITS #Coder #Teacher
3. What we will be talking about ... • Definition • Throwback And Potential Impact of WA • Translation on the Web. • Pros and Cons of compilers and interpreters • The best of two worlds: JIT • Assembly • Finally.. Getting started.
4. DISCLAIMER !!!! • China • Kuku kee me. • Manga
5. 1. Definition ➔ WA definition It’s a way of taking code written in programming languages other than JavaScript and running that code in the browser. It is also fast. ➔ FYI : For speed, the comparison is between WA and JS. Next: throw back
6. • JS Birth and the browser boom • Performance wars: JIT(dynamic translations) ◦ With great (somewhat) performance comes great responsibility: Node Throwback Next: Another inflection point.
7. • Probably another inflection point ◦ Yes! With great performance comes great responsibility Still On The Throwback Mara Next: Translation and compilation.
8. Language translation on the Web and with Humans - Interpreters and compilers - Pros and Conso99 Next: JIT
9. Best of two worlds: JIT • Browsers started mixing things up • Monitor (aka Profiler) ◦ Segments ◦ Optimization Next: Assembly.
10. Assembly Understanding assembly helps us understand web assembly . It’s symbolic machine code. A way for humans to make sense to the machine.
11. Assembly …. Transpiling C, C++ or Rust for different machine would have looked like this. This is pretty inefficient.
12. Assembly …. But it actually looked like this instead. (compiling) The IR(Intermediate representation) is not as high level but also isn’t working at the machine code too.
13. But it actually looked like this instead. (compiling) The IR(Intermediate representation) is not as high level but also isn’t working at the machine code too. Where does WA fit?
14. Compiling to .wasm Let’s say that we wanted to go from C to WA. We could use the clang front-end to go from C to the LLVM intermediate representation. Once it’s in LLVM’s IR, LLVM understands it, so LLVM can perform some optimizations. To go from LLVM’s IR to WA, we need a back-end. Emscripten is a bit easier to use at the moment. It has its own back-end that can produce WebAssembly by compiling to another target (called asm.js) and then converting that to WebAssembly. It uses LLVM under the hood,
15. Why is WA fast? JS : WA : • Fetching • Parsing • Compiling and Optimization • Reoptimization • Garbage Collection
16. Things to note • The browser downloads the WebAssembly. Then, it can make the short hop from WebAssembly to that target machine’s assembly code. • there is an experimental tool that helps you build a WebAssembly module using TypeScript • you can code in the text representation of WebAssembly directly.
17. Getting Started Follow the Installation guide for your device. webassembly.org Check out the getting started page Code view ….
18. Code View …
19. The End.