WebAssemlby vs JavaScript
2 likes309 views
WebAssembly (wasm) is a promising emerging technology designed for efficient execution in browsers, supported by major platforms since its announcement in 2015. It allows developers to run code written in multiple languages like C/C++, Rust, and more, providing benefits such as high performance and access to existing libraries. While it won’t replace JavaScript, wasm is expected to transform web development by enabling new types of applications, particularly those that require intensive computation.
WebAssemlby 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 • WebAssembly – how start • WebAssembly – roadmap
- 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
- 22. fast to load Byte code
- 26. VS
- 27. LOADING
- 28. LOADING text format binary format
- 29. fast to load BYTE CODE
- 33. LOADING text format <script> blocking load binary format fetch
- 34. LOADING text format <script> blocking load binary format fetch non blocking load
- 35. PARSING text format ambiguous syntax binary format
- 36. const foo = x const foo = x; const foo = x > const foo = x => const foo = x ?
- 37. PARSE text format ambiguous syntax binary format S – expression
- 38. S-expression
- 39. S-expression
- 40. S-expression
- 41. S-expression
- 42. S-expression
- 53. PARSE text format ambiguous syntax binary format S - expression
- 54. PARSE text format ambiguous syntax lazy parsing binary format S - expression
- 62. PARSING text format ambiguous syntax lazy parsing binary format S-expression no lazy parsing
- 63. CONCURRENT PARSING no concurrent parsing only researches
- 64. Proposed concurrent parser for JS
- 66. CONCURRENT PARSING no concurrent parsing only researches
- 67. CONCURRENT PARSING no concurrent parsing only researches concurrent parsing
- 68. fast to load
- 69. CONCURRENT PARSING no concurrent parsing only researches concurrent parsing streaming API
- 70. 5 4 3 2 1
- 71. CONCURRENT PARSING no concurrent parsing only researches concurrent parsing streaming API
- 72. COMPILATION + OPTIMIZATION main thread optimization after execution threads offline optimization
- 73. EXECUTION slow at start threads - workers no native threads GC close to native speed threads – workers native threads - future no GC now
- 74. EXECUTION many types access to JS functions access to DOM access to Web API only 4 primitive types access to JS functions no access to DOM no access to Web API
- 75. MODULES ES modules import/export function anywhere wasm modules strict structure
- 77. MODULES ES modules import/export function anywhere any function from scope wasm modules strict structure explicit import
- 78. INTERACTION WITH JAVASCRIPT We can use JS function in WASM and WASM function in JS
- 79. Will WebAssembly replace JavaScript?
- 80. Will WebAssembly replace JavaScript? Not now J
- 81. but WebAssembly will transform web
- 82. WASM WILL BRING TO WEB • High performance • New languages • Variety of existed libraries
- 83. 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
- 84. CAN WE USE WEBASSEMBLY? Yes we can
- 85. BUILD TARGET FOR • C/C++ • Rust • C# - Mono and CoreRT • Go • BrainFuck • Even more: https://github.com/appcypher/awesome-wasm-langs
- 86. 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)
- 87. 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
- 88. Ethereum Figma design Unity Google Earth Web Audio Modules
- 89. HOW TO START
- 90. SLOW START https://developer.mozilla.org/en-US/docs/WebAssembly/C_to_wasm •CMake •GCC or Visual Studio 2015 •Emscripten •Python 2.7.x
- 93. ROADMAP • GC – garbage collector • Threads • Exception handling • Tools • More proposals are coming : Debug/Source maps, BigInt, SIMD and etc
- 94. 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/
- 95. 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
- 96. RESOURCES • Articles: https://hacks.mozilla.org/category/webassembly/ • Site: http://webassembly.org/ • Github: https://github.com/WebAssembly/ • Twitter: @WasmWeekly - WebAssemblyWeekly
- 97. THANKS!
- 98. QUESTIONS?