As presented at DevDuck #7 - JavaScript meetup for developers (www.devduck.pl)

1. WebAssembly -
another buzzword or
(r)evolution?

2. About me
@kjendrzyca / aimforsimplicity.com
Full-stack / Full stack / Fullstack
Smuggling good practices and simplicity
React > Angular
Node.js > ASP.NET
"The goal is to be less wrong all the time" - Elon Musk

4. Fear of missing out / FOMO
"anxiety that an exciting or interesting event may currently be
happening elsewhere, often aroused by posts seen on social media"

6. Profits
1. Is WebAssembly a cure for "slow" JavaScript?
2. Can FOMO be justified this time?
3. Do I need to learn it right now? Can I do it later?

7. Agenda
1. 3 minutes of history
2. What the hell is WASM?
3. Demo
4. Summary

8. 3 minutes of history

9. JavaScript Release Date
1995 - 21 years ago

10. JavaScript becoming faster - JIT compilers
2008 - 9 years ago

11. Node.js
2009 - 8 years ago

12. asm.js
2013 - 4 years ago

13. // C
int f(int i) {
return i + 1;
}
// JS
function f(i) {
i = i|0;
return (i + 1)|0;
}
// "bitwise OR with zero, an otherwise useless operation,
// converts a value to an integer"
asm.js

14. Unreal Engine 3: was ported in 4 days
asm.js

15. compression
minification
caching
good architecture
better tooling
async modules
thinking

16. JavaScript is FAST
don't expect bad code to be fast

17. What the hell is
WASM?

18. asm.js
C, C++, Rust
|
/
emscripten (LLVM)
|
/
asm.js
|
/
JS (VM)

19. WASM
C, C++, Rust
|
/
LLVM / Emscripten
|
/
WASM
|
/
binary code (VM)

20. Emsripten
source-to-source compiler
uses LLVM compiler
game engines like Unreal Engine provide an export option to
HTML5, utilizing Emscripten
produces asm.js/WASM

21. WASM
language for a conceptual machine
runs on the same VM as JS
fast, efficient, and portable, "near-native speed"
readable and debuggable, "allows code to be written, viewed, and
debugged by hand"
"plays nicely with other web technologies and maintains
backwards compatibility"
W3C
its faster because JIT doesn't need to optimize it, it's already
optimized ahead of time
works as ES2015 module

22. https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts

23. Demo
http://webassembly.org/getting-started/developers-guide/

24. More useful demo
https://github.com/reklatsmasters/webassembly-examples/

25. Still MVP

26. ...but

28. WASM modules
+
Webpack
=
PROFIT!

29. Summary

30. 1. Is WebAssembly a cure for "slow" JavaScript?

31. No

32. "Premature optimization is the root of all evil"
~someone, somewhere

33. 2. Can FOMO be justified this time?

34. Still MVP

35. 3. Do I need to learn it right now? Can I do it later?

36. It depends

37. game engines
multimedia
performance
libraries
64-bit math

38. https://developer.mozilla.org/en-US/docs/WebAssembly
https://github.com/mbasso/awesome-wasm
https://en.wikipedia.org/wiki/LLVM
https://en.wikipedia.org/wiki/Emscripten
https://en.wikipedia.org/wiki/Asm.js
https://www.youtube.com/watch?v=HktWin_LPf4
https://www.youtube.com/watch?v=DKHuEkmsx3M