SlideShare a Scribd company logo

Web assembly overview by Mikhail Sorokovsky

•Download as PPT, PDF•
•
V
Valeriia Maliarenko

WebAssembly is a new binary format for the web that is fast, compact and provides near-native performance. It was developed by major browser vendors as a compilation target for programming languages like C/C++ to run on the web. WebAssembly has a small binary format, runs in any browser, and provides performance comparable to native code. It fills gaps in JavaScript for heavy computation tasks. The roadmap includes adding threads, shared memory and exception handling to WebAssembly.

1 of 28
WebAssembly overview
• What is WebAsembly • What it is for? • WebAssembly Structure • Tools • How to use it • Roadmap Agenda
• 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
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
• 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
Web assembly overview by Mikhail Sorokovsky
Web assembly overview by Mikhail Sorokovsky
• 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
WebAssembly is binary AST • Small set of types • Basic operations • Control flows • Memory management
• 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?
• Games!!! • AngryBots • PlatformerGame • Examples Examples
WebAssembly structure WASM MODULE A MODULE B MODULE C MODULE D TYPE IMPORT FUNCTION TABLE MEMORY EXPORT START CODE DATA NAME
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
• 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
BINARYEN asm2wasm ./fibonacci.asm.js –o fibanacci.wast wasm-as fibanacci.wast –o fibanacci.wasm https://github.com/WebAssembly/binaryen
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
• WebAssembly playground • ilwasm - .NET CIL => WebAssembly OTHER
• 15 March 2016 – Experimental support of WebAssembly • FirefoxNightly • Microsoft Edge • Google Chrome • Chromium How To Use
Execution
How To Use WebAssembly
How To Use WebAssembly: dependencies
How To Use WebAssembly: dependencies
Roadmap: MVP ~~~~ THIS YEAR • Any asm.js => wasm • Validation • Execution • Module • Text / Binary format • Cross-browser support • Polyfill-able in JS
Roadmap: Soon After MVP • Threads • Shared Memory • Dynamic Linking • Fixed-width SIMD • Zero-cost exceptions
Roadmap: Future priorities • Fain-grained memory control • Large Page Support • GC/DOM integration • Memory > 4GiB • And much more
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
Thank You!
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

More Related Content

Web assembly overview by Mikhail Sorokovsky

  • 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
  • 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
  • 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