A quick introduction to Web Assembly

1. Kenneth Rohde Christiansen
Web Platform Architect
An introduction
to Web Assembly

2. the web landscape is about to change

3. Web Assembly will enable a
new class of web apps

4. More capable and powerful than ever

5. Hi! I am Kenneth

8. The web is a great platform

9. It's safe, has low friction,
you know the drill...

11. But while the web is great,
it has limitations

12. We don't see high-end games, CAD,
professional video editors

13. Basically apps requiring lots of
calculations with low latency

14. CPU bound, close to the metal

15. Even though you can delegate to the cloud, the latency
and the price might make that not attractive

16. Introducing Web Assembly, aka wasm

17. ➫ New capability for the web
➫ Compile target for lang's used in native apps
➫ Fast, portable and secure

18. Formally:
wasm is a new portable, size- and
load-time-efficient format suitable for
compilation to the web

19. Kind of
an efficient, low-level bytecode
for the web

20. Small, fast to load and efficient to execute

21. So a replacement for ?

23. Let's get rid of misconceptions

24. wasm is not a new programming language,
nor intended to replace JavaScript
1.

25. wasm is a target for other programming
languages, initially C/C++/Rust and it is
intended to complement JS
2.

26. wasm is still living in a sandbox and doesn't
expose new platform capabilities like hooks into
the native operation system
3.

27. It does however in the long run expose
things like SIMD, threads and the like

28. wasm is perfect for many of the use-cases
where the web currently doesn't shine

29. Game engines
Usually very self contained, so compiling directly to the web, introduces
unneeded layers in between.
Here wasm allows the getting very close to the metal

30. Game engines
A game engine could run mostly in wasm and paint to a DOM canvas and run
audio via WebAudio.
It is pretty much self contained, like in a applet sense

31. CAD / video + photo editors
Apps such as CAD applications can do the UI components using regular
web technologies and just delegate tough computations to wasm.
Note, wasm cannot at this point call into the DOM. You can import JS
methods that wasm can call, or call wasm from JS.

32. Example
Google Earth
https://medium.com/google-earth/earth-on-web-the-road-to-cross-browser-7338e0f46278

33. Existing libraries
Being able to bring 30 years of code and libraries to the web is pretty
amazing

34. Existing libraries
For instance, if a browser doesn't support webp but service workers, it would
be possible to compile the webp decoder and use it to decode webp in the
service worker!

35. Example
webp
Library has some
wasm support
Uses canvas

36. Actually, let's see how you can use today
Easiest way is to follow instructions on webassembly.org which mostly
revolves around using Emscripten.
It is still early days for tooling

37. Invented example
You might need to add macros to your C/C++ code for functions to avoid
being optimized away (check emscripten docs)

38. Let's look at the code
➫ Emscripten originally targeted AMS.js, eg. pure JS code
➫ Due to standard libs, SDL integration etc, it generates JS boilerplate
➫ A lot of the boilerplate is often unused and includes mapping to
WebAudio, canvas etc
➫ Emscripten has its own way of initialization from JS (Module.* etc)

41. Let's try!
https://kenchris.github.io/wasm-webp/

42. Can I haz today?
Oh yeah!

43. What is next?
➫ Threads
➫ Fixed width SIMD
➫ Exception
➫ Garbage Collection
➫ ECMAScript module integration

44. Moar demos, plzzz!
➫ OpenCV based https://websightjs.com
➫ Unity 3D http://webassembly.org/demo/
➫ Unreal engine https://s3.amazonaws.com/mozilla-games/ZenGarden/EpicZenGarden.html
➫ Video editing https://d2jta7o2zej4pf.cloudfront.net/
➫ Physics https://embed.plnkr.co/jsMi5oltGnT0Jn38js3v?autoCloseSidebar=true&show=demo-opt.c,preview
➫ Game https://www.funkykarts.rocks/demo.html

45. More info
➫ Deep dive https://rsms.me/wasm-intro
➫ Project home webassembly.org

46. Thanks for listening!
Follow me on Twitter, where
I will post these slides today
@kennethrohde