Slides from talk WebAssemlby vs JavaScript on jsfest.com.ua Comparing WebAssemlby vs JavaScript in key features.

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!

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
WAT?

22. fast to load
Byte code

24. WebAssembly vs JavaScript

25. HOW ENGINE WORKS
JS
WebAssembly

26. VS

27. LOADING

28. LOADING
text format binary format

29. fast to load
BYTE CODE

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

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

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

43. Stack
S-expression

44. Stack
S-expression

45. $0
Stack
S-expression

46. $0
Stack
S-expression

47. $0
10
Stack
S-expression

48. $0
10
Stack
S-expression

49. $0
10
Stack
S-expression

50. 10 * $0
Stack
S-expression

51. 10 * $0
Stack
S-expression

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

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

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?