A lightweight introduction to Web Assembly for at Google DevFest Bari 2017

1. Web Assembly
A lightweight introduction

2. About me

3. Outline
● What is WA
● Why WA
● Chasing performance
● Feature
● Demo
● The future
● Q&A

5. What is Web Assembly?

6. WebAssembly, or wasm, is a new portable, size-
and load-time-efficient format suitable for
compilation to the web.

8. It’s a virtual machine for the web!

9. Why Web Assembly?

10. because of Javascript

11. ● Freedom to choose a different language
○ Run CC++ codebase in a browser
● Performance
○ Dynamic Typed language
○ engine optimization
○ JS bottlneck
Why WA

12. Chasing performance

13. ● engine
○ parse source
○ create AST
○ create machine code
● code optimization - turboFan
○ looking for slow function
○ optimization
○ code analisys is CPU intensive
Chasing performance - Javascript

14. Javascript V8 Engine

15. function add(a, b) {
return a + b;
}

16. Javascript addition operator semantic

17. Javascript addition operator semantic

18. Javascript addition operator semantic

19. Javascript addition operator semantic

20. Javascript addition operator semantic

21. ● plugins
○ Flash
○ Java
● Google Native Client (NaCl)
○ Open Source
○ Run native code in a sandbox
● asm.js
○ compiler target
○ c++ to Javascript (subset) fast native code
○ different performance over different engine
Chasing performance

22. Feature

23. Feature - Goal
● Portable
● Extendible
● Integrated with Web Standard
● Using existing tools

24. Feature
● Compile target
● Internal browser VM
● Cross browser support
● Javascript API
● Version 1 (MVP)

25. Module:
distributable, loadable, and executable unit of code

26. Feature - Module
● import
● export
● start
● global
● memory
● data
● table
● elements
● functions

27. Feature - Module
● index spaces
○ function
○ table
○ global
○ linear memory

28. Feature - Module
● Binary encoding
○ Efficient and fast
○ Stack based VM
○ Native speed
● Text format
○ LISP like

29. Feature - Javascript API
● Integrated with Web Platform
○ WebAPIs via JS
○ JS interoperability

31. Feature - Type
● types
○ void
○ i32
○ i64
○ f32
○ f64

32. Feature - Memory
● linear memory
○ untyped array of bytes
○ 64KiB page size
● grow_memory operator

33. Feature - Memory
● operators
○ load
○ store
● effective address
○ sum of address operand and an
offset operand
● out-of-bound check
○ out-of-bound trap

34. Feature - Security
● sandbox
○ using only API
● security policies of its
embedding
● function declared at load time

35. Feature - Security
● control flow integrity (CFI)
○ Function call
○ Indirect function call
○ returns
● By design

36. Feature - Tools

37. It’s time for a demo!

38. Demo

39. Demo
● http://webassembly.org/demo/
● https://s3.amazonaws.com/mozilla-games/ZenGarden/EpicZenGarden.ht
ml

40. What’s next?

41. ● Garbage collector
○ Support new languages
● Multithread support
● wasm64
● Exception handling
What’s next?

42. Questions?

43. valeriocomo
Thank you!|
@valeriocomo
valeriocomo@gmail.com
http://www.valeriocomo.com

44. References
● http://www.webassemly.org
● https://en.wikipedia.org/wiki/Type_system
● http://webassembly.org/docs/semantics/
● http://webassembly.org/docs/modules/
● http://webassembly.org/docs/mvp/
● http://webassembly.org/docs/future-features/
● https://youtu.be/6v4E6oksar0
● https://youtu.be/DKHuEkmsx3M

45. References
● https://rsms.me/wasm-intro