JS Fest 2018. Александр Скачков. WebAssembly vs JavaScript
- 1. From back-end to front-end Киев 2018 WebAssembly vs JavaScript Скачков Александр @alSkachkov
- 2. ABOUT ME • Itera’s FrontEnd Tech Lead • WebKit contributor: • Arrow function • Async iterator & generators • Promise.finally • Twitter: @alSkachkov WebAssembly vs JavaScript Киев 2018
- 3. • What was before • WebAssembly vs JavaScript • WebAssembly – in real life
- 4. JavaScript one of the most popular language
- 9. THE STRENGTH IS A WEAKNESS • Easy to learn • King of the web • Dynamic typing = • NOT PREDICTIBLE PERFORMANCE!
- 11. SMART PEOPLE SAYS Always bet on JS & WASM
- 12. Always bet on JS WASM?
- 14. • Announced in 17 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 build target
- 18. safe, portable, low-level code format designed for efficient execution and compact representation https://webassembly.github.io/spec/intro
- 19. C - Source code
- 20. RUST - Source code
- 21. S - Expression
- 22. fast to load Byte code
- 24. Will WebAssembly replace JavaScript? Not now
- 25. but WebAssembly will transform web
- 26. WASM WILL BRING TO WEB • High performance • New languages • Variety of existed libraries
- 27. WHAT'S NEW IN THE 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
- 30. VS
- 31. LOADING text format binary format
- 32. fast to load BYTE CODE
- 35. LOADING text format <script> blocking load binary format fetch non blocking load
- 36. PARSING text format ambiguous syntax binary format
- 37. • const foo = x • const foo = x; • const foo = x > • const foo = x => • const foo = x ?
- 38. PARSE text format ambiguous syntax binary format S – expression
- 39. S-expression
- 40. S-expression
- 44. PARSE text format ambiguous syntax lazy parsing binary format S - expression
- 50. PARSING text format ambiguous syntax lazy parsing binary format S-expression no lazy parsing
- 51. CONCURRENT PARSING no concurrent parsing only researches
- 52. Proposed concurrent parser for JS
- 54. CONCURRENT PARSING no concurrent parsing only researches concurrent parsing
- 55. fast to load
- 56. CONCURRENT PARSING no concurrent parsing only researches concurrent parsing streaming API
- 57. 1
- 58. 3 2 1
- 59. 5 4 3 2 1
- 60. CONCURRENT PARSING no concurrent parsing only researches concurrent parsing streaming API
- 61. COMPILITION + OPTIMIZATION main thread 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 to DOM 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 function anywhere wasm modules strict structure
- 66. MODULES ES modules import/export function anywhere any function from scope wasm modules strict structure explicit import
- 67. INTERACTION WITH JAVASCRIPT We can use JS function in WASM and WASM function in JS
- 68. CAN WE USE WEBASSEMBLY? 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: NET code 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 IN WEB • 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 Unity Google Earth Web Audio Modules
- 73. HOW TO START
- 74. SLOW START https://developer.mozilla.org/en-US/docs/WebAssembly/C_to_wasm •CMake •GCC or Visual Studio 2015 •Emscripten •Python 2.7.x
- 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 is an 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. THANKS!
- 82. QUESTIONS?