Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JS Fest 2018. Александр Скачков. WebAssembly vs JavaScript

165 views

Published on

WebAssembly новая, но быстро развивающаяся технология, которая поддерживается всеми основными браузерами. Из доклада вы узнаете, что такое WebAssembly, для чего это нужно и чем это отличается от JavaScript. В докладе так же будут рассмотрены вопросы, когда лучше применять WebAssembly, а когда лучше остановится на JavaScript.

Published in: Education
  • Be the first to comment

  • Be the first to like this

JS Fest 2018. Александр Скачков. WebAssembly vs JavaScript

  1. 1. From back-end to front-end Киев 2018 WebAssembly vs JavaScript Скачков Александр @alSkachkov
  2. 2. ABOUT ME • Itera’s FrontEnd Tech Lead • WebKit contributor: • Arrow function • Async iterator & generators • Promise.finally • Twitter: @alSkachkov WebAssembly vs JavaScript Киев 2018
  3. 3. • What was before • WebAssembly vs JavaScript • WebAssembly – in real life
  4. 4. JavaScript one of the most popular language
  5. 5. THE STRENGTH IS A WEAKNESS • Easy to learn • King of the web • Dynamic typing = • NOT PREDICTIBLE PERFORMANCE!
  6. 6. TRIES TO SOLVE asm.js
  7. 7. SMART PEOPLE SAYS Always bet on JS & WASM
  8. 8. Always bet on JS WASM?
  9. 9. • Announced in 17 June 2015 • Supported by major Browsers • Developed by WebAssembly Working Group (W3C) • Draft specific published 15 Feb 2018 WebAssembly – New Hope
  10. 10. What is WebAssembly (aka WASM)?
  11. 11. WebAssembly is build target
  12. 12. safe, portable, low-level code format designed for efficient execution and compact representation https://webassembly.github.io/spec/intro
  13. 13. C - Source code
  14. 14. RUST - Source code
  15. 15. S - Expression
  16. 16. fast to load Byte code
  17. 17. Will WebAssembly replace JavaScript? Not now 
  18. 18. but WebAssembly will transform web
  19. 19. WASM WILL BRING TO WEB • High performance • New languages • Variety of existed libraries
  20. 20. 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
  21. 21. WebAssembly vs JavaScript
  22. 22. HOW ENGINE WORKS JS WASM
  23. 23. VS
  24. 24. LOADING text format binary format
  25. 25. fast to load BYTE CODE
  26. 26. LOADING text format <script> blocking load binary format
  27. 27. LOADING text format <script> blocking load binary format fetch non blocking load
  28. 28. PARSING text format ambiguous syntax binary format
  29. 29. • const foo = x • const foo = x; • const foo = x > • const foo = x => • const foo = x ?
  30. 30. PARSE text format ambiguous syntax binary format S – expression
  31. 31. S-expression
  32. 32. S-expression
  33. 33. $0 10 Stack S-expression
  34. 34. $0 10 10 * $0 Stack S-expression
  35. 35. 10 * $0 Stack S-expression
  36. 36. PARSE text format ambiguous syntax lazy parsing binary format S - expression
  37. 37. PARSING text format ambiguous syntax lazy parsing binary format S-expression no lazy parsing
  38. 38. CONCURRENT PARSING no concurrent parsing only researches
  39. 39. Proposed concurrent parser for JS
  40. 40. CONCURRENT PARSING no concurrent parsing only researches concurrent parsing
  41. 41. fast to load
  42. 42. CONCURRENT PARSING no concurrent parsing only researches concurrent parsing streaming API
  43. 43. 1
  44. 44. 3 2 1
  45. 45. 5 4 3 2 1
  46. 46. CONCURRENT PARSING no concurrent parsing only researches concurrent parsing streaming API
  47. 47. COMPILITION + OPTIMIZATION main thread optimization after execution threads offline optimization
  48. 48. EXECUTION slow at start threads - workers no native threads GC 1.2 of native speed threads – workers native threads - future no GC now
  49. 49. 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
  50. 50. MODULES ES modules import/export function anywhere wasm modules strict structure
  51. 51. MODULES ES modules import/export function anywhere any function from scope wasm modules strict structure explicit import
  52. 52. INTERACTION WITH JAVASCRIPT We can use JS function in WASM and WASM function in JS
  53. 53. CAN WE USE WEBASSEMBLY? Yes we can
  54. 54. BUILD TARGET FOR • C/C++ • Rust • C# - Mono and CoreRT • Go • BrainFuck • Even more: https://github.com/appcypher/awesome-wasm-langs
  55. 55. 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)
  56. 56. 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
  57. 57. Ethereum Figma design Unity Google Earth Web Audio Modules
  58. 58. HOW TO START
  59. 59. SLOW START https://developer.mozilla.org/en-US/docs/WebAssembly/C_to_wasm •CMake •GCC or Visual Studio 2015 •Emscripten •Python 2.7.x
  60. 60. QUICK START WebAssembly Studio https://webassembly.studio/
  61. 61. ROADMAP • GC – garbage collector • Threads • Exception handling • Tools • More proposals are coming : Debug/Source maps, BigInt, SIMD and etc
  62. 62. 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/
  63. 63. 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
  64. 64. RESOURCES • Articles: https://hacks.mozilla.org/category/webassembly/ • Site: http://webassembly.org/ • Github: https://github.com/WebAssembly/ • Twitter: @WasmWeekly - WebAssemblyWeekly
  65. 65. THANKS!
  66. 66. QUESTIONS?

×