O WebAssembly dużo się słyszy w ostatnim czasie. Ale co to w ogóle takiego? Czego potrzebujemy, by w tym pisać? Kiedy warto się zastanowić nad wykorzystaniem? Czy można to już stosować w projektach? Na te oraz inne pytania odpowiem podczas mojej prezentacji.

1. START WRITING IN
WEBASSEMBLY

2. ALEKSANDER PATSCHEK
FRONTEND DEVELOPER
SILESIA UNIVERSITY OF TECHNOLOGY STUDENT
ALEKSANDER.PATSCHEK@THESOFTWAREHOUSE.PL
OLEK@TSH.IO

3. START WRITING IN WEBASSEMBLY
AGENDA
▸ What is WebAssembly?
▸ Languages
▸ How to use it in JavaScript?
▸ AssemblyScript
▸ WebAssembly performance

4. WHAT IS
WEBASSEMBLY?

5. NEW LANGUAGE?

6. HISTORY

7. PNACL

8. ASM.JS

9. WEBASSEMBLY COMMUNITY
GROUP

10. ▸ Efficient and fast
▸ Safe
▸ Open
▸ Already in browsers
ADVANTAGES
START WRITING IN WEBASSEMBLY

12. WASI

13. ▸ Port existing code from other languages
▸ Image/video edititng
▸ Games
▸ Music
▸ Simulations
▸ ML
▸ Much more …..
USE CASES
START WRITING IN WEBASSEMBLY

14. USAGE EXAMPLES

16. SQUOOSH

17. FASTQ.BIO

18. END OF JS?

20. LANGUAGES

21. BINARY FORMAT - WASM

22. 0000000: 0061 736d
0000004: 0100 0000
0000008: 01
0000009: 00
000000a: 02
…

24. TEXT FORMAT - WAT

25. local.get $0
i32.const 1
i32.add
local.tee $7
i32.load8_u
f64.convert_i32_s

26. START WRITING IN WEBASSEMBLY
LANGUAGES
▸ C Family - C, C++, C#
▸ Rust
▸ AssemblyScript
▸ ….more and more other languages

27. https://github.com/appcypher/awesome-wasm-langs

28. HOW TO USE IN JAVASCRIPT?

30. <script type='module'>

31. <script type='module'>

32. START WRITING IN WEBASSEMBLY
IMPORT TO JAVASCRIPT

33. START WRITING IN WEBASSEMBLY
IMPORT TO JAVASCRIPT
▸ *.wasm file => ArrayBuffer

34. const { instance } = await WebAssembly.instantiate(
await fetch(`file.wasm`)
.then(r => r.arrayBuffer()),
{ env: { memory } }
);

35. START WRITING IN WEBASSEMBLY
IMPORT TO JAVASCRIPT
▸ *.wasm file => ArrayBuffer
▸ Compile into WebAssembly.Module

36. START WRITING IN WEBASSEMBLY
IMPORT TO JAVASCRIPT
▸ *.wasm file => ArrayBuffer
▸ Compile into WebAssembly.Module
▸ Instantiate WebAssembly.Module with imports

37. function instantiate(bytes, imports) {
return WebAssembly.compile(bytes)
.then(m => new
WebAssembly.Instance(m, imports));
}

38. const { instance } = await WebAssembly.instantiate(
await fetch(`file.wasm`)
.then(r => r.arrayBuffer()),
importObject
);

39. START WRITING IN WEBASSEMBLY
IMPORT OBJECT
▸ Functions
▸ Globals
▸ Memory
▸ Tables

40. START WRITING IN WEBASSEMBLY
MEMORY
▸ Linear
▸ Build of pages - each page is 64KiB
▸ Max size 4 GiB
▸ grow()

41. instance.exports.func_name()

42. BE CAREFUL WITH
FUNCTION NAMES

43. ASSEMBLYSCRIPT

44. npm install --save-dev AssemblyScript/assemblyscript

45. asc assembly/index.ts -b build/
output.wasm --validate -O3

46. HOW TO WRITE SOMETHING?

47. TYPESCRIPT

48. BUT NOT EXACTLY …

49. START WRITING IN WEBASSEMBLY
NEW TYPES
▸ i32/u32
▸ i64/u64
▸ f32
▸ f64
▸ i8/u8
▸ i16/u16
▸ bool

50. START WRITING IN WEBASSEMBLY
TRAPS
▸ const variables
▸ size of variables

51. EXAMPLE #1 - SEPIA

52. START WRITING IN WEBASSEMBLY
const MAX:u32 = 255;
export function sepia(size: i32):void {
for (let i = 0; i < size; i = i + 4) {
let r = load<u8>(i);
let g = load<u8>(i + 1)
let b = load<u8>(i + 2);
let nr = 0.393 * r + 0.769 * g + 0.189 * b;
let ng = 0.349 * r + 0.686 * g + 0.168 * b;
let nb = 0.272 * r + 0.534 * g + 0.131 * b;
let min_r = min(nr, MAX)
let min_g = min(ng, MAX)
let min_b = min(nb, MAX)
store<u8>(i, <u8>min_r);
store<u8>(i + 1, <u8>min_g);
store<u8>(i + 2, <u8>min_b);
}
}
SEPIA ALGORITHM

53. const MAX:u32 = 255;
export function sepia(size: i32):void {
for (let i = 0; i < size; i = i + 4) {
}
}

54. let r = load<u8>(i);
let nr = 0.393 * r + 0.769 * g + 0.189 * b;
let min_r = min(nr, MAX)
store<u8>(i, <u8>min_r);

55. const Umemory = new
Uint8ClampedArray(memory.buffer, 0);
Umemory.set(originalBuffer);
instance.exports.sepia(width * height * 4)

56. EXAMPLE #2 - FIBONACCI

57. START WRITING IN WEBASSEMBLY
export function fib_rec(number:u32):u32{
if (number == 0){
return 0;
}
if (number == 1) {
return 1;
}
return fib_rec(number - 1) + fib_rec(number - 2);
}
FIBONACCI NUMBERS

58. export function fib_rec(number:u32):u32{
}

59. instance.exports.fib(30)

60. LET’S TALK ABOUT PERFORMANCE

61. FIBONACCI

62. START WRITING IN WEBASSEMBLY
FIBONACCI NUMBERS DYNAMIC ALGORITHM - AVG.TIME N=30
0,000
0,001
0,002
0,003
0,004
Chrome Edge Firefox
Javascript Webasembly

63. START WRITING IN WEBASSEMBLY
0,00
5,00
10,00
15,00
20,00
Chrome Edge Firefox
Javascript Webasembly
FIBONACCI NUMBERS RECURSION ALGORITHM - AVG.TIME N=30

64. START WRITING IN WEBASSEMBLY
FIBONACCI NUMBERS DYNAMIC ALGORITHM - AVG.TIME. N=10 000 000
0,000
100,000
200,000
300,000
400,000
Chrome Edge Firefox
JavaScript WebAssembly

65. SEPIA

66. START WRITING IN WEBASSEMBLY
SEPIA ON 4000 X 2662- AVG.TIME
0,000
35,000
70,000
105,000
140,000
Chrome Edge Firefox
JavaScript WebAssembly

67. QUESTIONS ?

68. THANK YOU