A session at LohikaOdessa #TechTalks on 19.07.2016.

1. WebAssembly overview

2. • What is WebAsembly
• What it is for?
• WebAssembly Structure
• Tools
• How to use it
• Roadmap
Agenda

3. • New Standard developed by Mozilla,
Microsoft, Google and Apple
• Compact, portable binary format for web
• Fast to load, runs safely
• Near-native performance
• Works on any device
What is WebAsembly

4. The Story
• Key person: Brendan Eich
• 1995 – Created JavaScript
• 1995 - Leading SpiderMonkey
• 1998 – Started Mozilla
• 2009 – asm.js Mozilla experiment
• 2013 – asm.js Published
• 2013 – Spread asm.js idea to
Microsoft
• 2014-15 – Make other browser
vendors to join WebAssembly W3C
Group

5. • Intermediate language
• Subset of Javascript
• C/C++ compiles to asm.js
• Very fast. Best result 1.5x native
• Natively runs in Firefox, Edge, Chrome
asm.js

8. • Low-Level compiler target
• Less Size
• Less Cold Start
• Readable textual representation
• Convenient Debugger
• Compile-time optimization
• Bytecode instructions ~= CPU instructions
WebAssembly is asm.js Evolution

9. WebAssembly is
binary AST
• Small set of types
• Basic operations
• Control flows
• Memory
management

10. • Fill gaps in JavaScript
• Develop using language you like
• Heavy calculation
• Examples:
• P2P applications
• Image / Video / Music editing
• Live video augmentation
• Platform simulation
• CAD application
What it is for?

11. • Games!!!
• AngryBots
• PlatformerGame
• Examples
Examples

12. WebAssembly structure
WASM
MODULE A
MODULE B
MODULE C
MODULE D
TYPE IMPORT FUNCTION
TABLE MEMORY EXPORT
START CODE DATA NAME

13. Operators Example
Operator CPU Description
i32.add addl Sign-agnostic addition
call call Call function directly
i32.load check + mov Load 4 bytes as i32
nop nop No operation
br_if je Conditional break / jump

14. • All tools are in develop!!!
• Mostly unstable
• Officially 2 ways to built wasm
• wasm binary standard is in development too!!
• Browser might not be able to process wasm in
the moment
TOOLS

15. BINARYEN
asm2wasm ./fibonacci.asm.js –o fibanacci.wast
wasm-as fibanacci.wast –o fibanacci.wasm
https://github.com/WebAssembly/binaryen

16. EMSCRIPTEN “incoming” branch
http://kripken.github.io/emscripten-site/
Does not working right now
Try this for your own risk
http://floooh.github.io/fips/index.html

17. • WebAssembly playground
• ilwasm - .NET CIL => WebAssembly
OTHER

18. • 15 March 2016 – Experimental support of
WebAssembly
• FirefoxNightly
• Microsoft Edge
• Google Chrome
• Chromium
How To Use

19. Execution

20. How To Use WebAssembly

21. How To Use WebAssembly: dependencies

22. How To Use WebAssembly: dependencies

23. Roadmap: MVP ~~~~ THIS YEAR
• Any asm.js => wasm
• Validation
• Execution
• Module
• Text / Binary format
• Cross-browser support
• Polyfill-able in JS

24. Roadmap: Soon After MVP
• Threads
• Shared Memory
• Dynamic Linking
• Fixed-width SIMD
• Zero-cost exceptions

25. Roadmap: Future priorities
• Fain-grained memory control
• Large Page Support
• GC/DOM integration
• Memory > 4GiB
• And much more

26. Conclusions
• Binary Executable format for web
• New Web Standard – part of W3C
• Developed by Key Players on the Web
• Low-level compiler target
• JavaScript brother
• Developed for real computations in browser

27. Thank You!

28. Links
• https://wasm.news/
• http://blog.golovin.in/how-to-start-using-
webassembly-today/
• https://callahad.github.io/tccc20-wasm/
• https://github.com/WebAssembly/build-suite
• https://github.com/kripken/emscripten/wiki/Port
ing-Examples-and-Demos