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

5. THE STRENGTH IS A WEAKNESS • Easy to learn • King of the web • Dynamic typing = • NOT PREDICTIBLE PERFORMANCE!

6. TRIES TO SOLVE asm.js

7. SMART PEOPLE SAYS Always bet on JS & WASM

8. Always bet on JS WASM?

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. What is WebAssembly (aka WASM)?

11. WebAssembly is build target

12. safe, portable, low-level code format designed for efficient execution and compact representation https://webassembly.github.io/spec/intro

13. C - Source code

14. RUST - Source code

15. S - Expression WAT?

16. fast to load Byte code

17. WebAssembly vs JavaScript

18. HOW ENGINE WORKS JS WebAssembly

19. VS

20. LOADING

21. LOADING text format binary format

22. fast to load BYTE CODE

23. LOADING text format <script> blocking load binary format

24. LOADING text format <script> blocking load binary format

25. LOADING text format <script> blocking load binary format fetch

26. LOADING text format <script> blocking load binary format fetch non blocking load

27. PARSING text format ambiguous syntax binary format

28. const foo = x const foo = x; const foo = x > const foo = x => const foo = x ?

29. PARSE text format ambiguous syntax binary format S – expression

30. S-expression

31. S-expression

32. S-expression

33. S-expression

34. S-expression

35. Stack S-expression

36. Stack S-expression

37. $0 Stack S-expression

38. $0 Stack S-expression

39. $0 10 Stack S-expression

42. 10 * $0 Stack S-expression

45. PARSE text format ambiguous syntax binary format S - expression

46. PARSE text format ambiguous syntax lazy parsing binary format S - expression

47. PARSING text format ambiguous syntax lazy parsing binary format S-expression no lazy parsing

48. CONCURRENT PARSING no concurrent parsing only researches

49. Proposed concurrent parser for JS

50. CONCURRENT PARSING no concurrent parsing only researches

51. CONCURRENT PARSING no concurrent parsing only researches concurrent parsing

52. fast to load

53. CONCURRENT PARSING no concurrent parsing only researches concurrent parsing streaming API

54. 5 4 3 2 1

55. CONCURRENT PARSING no concurrent parsing only researches concurrent parsing streaming API

56. COMPILATION + OPTIMIZATION main thread optimization after execution threads offline optimization

57. EXECUTION slow at start threads - workers no native threads GC close to native speed threads – workers native threads - future no GC now

58. 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

59. MODULES ES modules import/export function anywhere wasm modules strict structure

60. MODULES ES modules import/export function anywhere any function from scope wasm modules strict structure explicit import

61. INTERACTION WITH JAVASCRIPT We can use JS function in WASM and WASM function in JS

62. Will WebAssembly replace JavaScript?

63. Will WebAssembly replace JavaScript? Not now J

64. but WebAssembly will transform web

65. WASM WILL BRING TO WEB • High performance • New languages • Variety of existed libraries

66. 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

67. CAN WE USE WEBASSEMBLY? Yes we can

68. BUILD TARGET FOR • C/C++ • Rust • C# - Mono and CoreRT • Go • BrainFuck • Even more: https://github.com/appcypher/awesome-wasm-langs

69. 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)

70. 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

71. Ethereum Figma design Unity Google Earth Web Audio Modules

72. HOW TO START

73. SLOW START https://developer.mozilla.org/en-US/docs/WebAssembly/C_to_wasm •CMake •GCC or Visual Studio 2015 •Emscripten •Python 2.7.x

74. QUICK START WebAssembly Studio https://webassembly.studio/

75. ROADMAP • GC – garbage collector • Threads • Exception handling • Tools • More proposals are coming : Debug/Source maps, BigInt, SIMD and etc

76. 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/

77. 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

78. RESOURCES • Articles: https://hacks.mozilla.org/category/webassembly/ • Site: http://webassembly.org/ • Github: https://github.com/WebAssembly/ • Twitter: @WasmWeekly - WebAssemblyWeekly

79. THANKS!

80. QUESTIONS?

WebAssemlby vs JavaScript

You are reading a preview.

Check these out next

WebAssemlby vs JavaScript

More Related Content

Slideshows for you (20)

Similar to WebAssemlby vs JavaScript (20)

Recently uploaded (20)

WebAssemlby vs JavaScript