JS Fest 2018. Александр Скачков. WebAssembly vs JavaScript
- 1. From back-end tofront-end Киев 2018 WebAssembly vs JavaScript Скачков Александр @alSkachkov
- 2. ABOUT ME • Itera’sFrontEnd Tech Lead • WebKit contributor: • Arrow function • Async iterator & generators • Promise.finally • Twitter: @alSkachkov WebAssembly vs JavaScript Киев 2018
- 3. • What wasbefore • WebAssembly vs JavaScript • WebAssembly – in real life
- 4. JavaScript one ofthe most popular language
- 9. THE STRENGTH ISA WEAKNESS • Easy to learn • King of the web • Dynamic typing = • NOT PREDICTIBLE PERFORMANCE!
- 10.
- 11. SMART PEOPLE SAYS Alwaysbet on JS & WASM
- 12. Always bet onJS WASM?
- 14. • Announced in17 June 2015 • Supported by major Browsers • Developed by WebAssembly Working Group (W3C) • Draft specific published 15 Feb 2018 WebAssembly – New Hope
- 15. What is WebAssembly(aka WASM)?
- 16. WebAssembly is buildtarget
- 18. safe, portable, low-levelcode format designed for efficient execution and compact representation https://webassembly.github.io/spec/intro
- 19. C - Sourcecode
- 20. RUST - Sourcecode
- 21.
- 22.
- 24. Will WebAssembly replaceJavaScript? Not now
- 25. but WebAssembly willtransform web
- 26. WASM WILL BRINGTO WEB • High performance • New languages • Variety of existed libraries
- 27. WHAT'S NEW INTHE WEB • New types of applications will appear in Web • graphical, video and audio editors • games that fully consume CPU power • other performance intensive application in browser • New languages will be run in Browser and NodeJS
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 35. LOADING text format <script> blocking load binaryformat fetch non blocking load
- 36.
- 37. • const foo= x • const foo = x; • const foo = x > • const foo = x => • const foo = x ?
- 38. PARSE text format ambiguous syntax binaryformat S – expression
- 39.
- 40.
- 41.
- 42.
- 43.
- 44. PARSE text format ambiguous syntax lazyparsing binary format S - expression
- 50. PARSING text format ambiguous syntax lazyparsing binary format S-expression no lazy parsing
- 51. CONCURRENT PARSING no concurrentparsing only researches
- 52.
- 54. CONCURRENT PARSING no concurrentparsing only researches concurrent parsing
- 55.
- 56. CONCURRENT PARSING no concurrentparsing only researches concurrent parsing streaming API
- 57.
- 58.
- 59. 5 4 32 1
- 60. CONCURRENT PARSING no concurrentparsing only researches concurrent parsing streaming API
- 61. COMPILITION + OPTIMIZATION mainthread optimization after execution threads offline optimization
- 62. EXECUTION slow at start threads- workers no native threads GC 1.2 of native speed threads – workers native threads - future no GC now
- 63. EXECUTION many types access toDOM access to Web API access to JS functions only 4 primitive types no access to DOM no access to Web API access to JS functions
- 64. MODULES ES modules import/export functionanywhere wasm modules strict structure
- 66. MODULES ES modules import/export functionanywhere any function from scope wasm modules strict structure explicit import
- 67. INTERACTION WITH JAVASCRIPT Wecan use JS function in WASM and WASM function in JS
- 68. CAN WE USEWEBASSEMBLY? Yes we can
- 69. BUILD TARGET FOR •C/C++ • Rust • C# - Mono and CoreRT • Go • BrainFuck • Even more: https://github.com/appcypher/awesome-wasm-langs
- 70. VM • Blazor: NETcode in the browser via the Mono runtime, which itself is compiled to WebAssembly and asm.js (Steve Sanderson) • TeaVM: transpiler of Java bytecode, to emit JavaScript and WebAssembly (Java, Kotlin, Scala) (Alexey Andreev) • Ocamlrun: OCaml bytecode interpreter for WebAssembly (Sebastian Markbåge)
- 71. USAGE SCENARIOS INWEB • Write faster version of the specific application • Using existing C libraries in browser • Reuse algorithm from service side • Distribute whole application as wasm • Not only WEB: nodejs native modules with WASM+FFI
- 72. Ethereum Figma design UnityGoogle Earth Web Audio Modules
- 73.
- 74. SLOW START https://developer.mozilla.org/en-US/docs/WebAssembly/C_to_wasm •CMake •GCC orVisual Studio 2015 •Emscripten •Python 2.7.x
- 75.
- 77. ROADMAP • GC –garbage collector • Threads • Exception handling • Tools • More proposals are coming : Debug/Source maps, BigInt, SIMD and etc
- 78. EXAMPLES • Video editor:https://d2jta7o2zej4pf.cloudfront.net/ • Game: http://webassembly.org/demo/Tanks/ • Garden for Mozilla: https://s3.amazonaws.com/mozilla- games/ZenGarden/EpicZenGarden.html (Unreal Engine 4) • WebSight: https://websightjs.com/ • AutoCAD: https://web.autocad.com/
- 79. SUMMARY • WebAssembly isan emerging technology • Very promising and supported by all main browsers • Shortage of tools, libs, resources • Most WebAssembly features are part of the future specs
- 80. RESOURCES • Articles: https://hacks.mozilla.org/category/webassembly/ •Site: http://webassembly.org/ • Github: https://github.com/WebAssembly/ • Twitter: @WasmWeekly - WebAssemblyWeekly
- 81.
- 82.