WebAssembly новая, но быстро развивающаяся технология, которая поддерживается всеми основными браузерами. Из доклада вы узнаете, что такое WebAssembly, для чего это нужно и чем это отличается от JavaScript. В докладе так же будут рассмотрены вопросы, когда лучше применять WebAssembly, а когда лучше остановится на 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!

10. TRIES TO SOLVE
asm.js

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

28. WebAssembly vs JavaScript

29. HOW ENGINE WORKS
JS
WASM

30. VS

31. LOADING
text format binary format

32. fast to load
BYTE CODE

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

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

41. $0 10
Stack
S-expression

42. $0
10
10 * $0
Stack
S-expression

43. 10 * $0
Stack
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

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

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?