My talk about what WebAssembly brings to the Web and how other Web frameworks will be affected by it, Angular in particular

1. How WebAssembly is changing
the Web and what
it means for Angular
Boyan Mihaylov
@boyanio
boyan.io

2. WebAssembly (WASM) is compiler
target for programs on the Web
@boyanio

3. function add(a, b) {
return a + b;
}
@boyanio

4. @boyanio

5. @boyanio
weak typing, implicit conversion
…not really consistent
string – string = number ?
“+” is for concatenation
“+ +” is for addition ?

6. @boyanio

7. WebAssembly is a typed language
It supports 32 and 64-bit integers (i32, i64) and floating points (f32, f64)
@boyanio

8. Binary representation (.wasm)
@boyanio
0061 736d 0100 0000 0187 8080 8000 0160
027f 7f01 7f03 8280 8080 0001 0004 8480
8080 0001 7000 0005 8380 8080 0001 0001
0681 8080 8000 0007 9080 8080 0002 066d
656d 6f72 7902 0003 6164 6400 000a 8d80
8080 0001 8780 8080 0000 2001 2000 6a0b

9. Textual representation (.wat)
@boyanio
(module
(table 0 anyfunc)
(memory $0 1)
(export “memory” (memory $0))
(export “add” (func $add))
(func $add (; 0 ;) (param $0 i32) (param $1 i32) (result i32)
(i32.add
(get_local $1)
(get_local $0)
)
)
)

10. @boyanio
Parse
Compile
+
optimize
Re-
optimize
Execute GCFetch
Decode
Compile
+
optimize
ExecuteFetch
Execute
Fetch / Decode /
Compile + optimize
(streaming API)

11. WebAssembly provides consistent,
predictable performance
@boyanio

12. @boyanio
3D animation performance
https://github.com/sessamekesh/wasm-3d-animation-demo

13. Performance comparison
Average animation time (ms)
@boyanio
98.3
91.3
111.7
6.8
4.6
7.5
Chrome Firefox Edge
JavaScript
WebAssembly
https://www.lucidchart.com/techblog/2017/05/16/webassembly-overview-so-fast-so-fun-sorta-difficult/

14. Reusing code on the Web
@boyanio

15. WebAssembly enables code reusability
between native andWeb
@boyanio

16. Traditional multi-target compilation
@boyanio
.cpp
Source code
Windows
MAC
Linux x86
x64
x86
x64
x86
x64
ARM v8
ARM v7

17. Multi-target compilation with WebAssembly
@boyanio
.cpp
Source code
.wasm
WebAssembly
module

18. WebAssembly brings second life
to your legacy code
@boyanio https://techcrunch.com/2016/07/05/lzlabs-launches-product-to-move-mainframe-cobol-code-to-linux-cloud/

19. How to produceWebAssembly
@boyanio
.cpp
.wasm .html
WASM module HTML page Browser
compilation
loading with
JavaScript execution
.rs
…

20. @boyanio
Open Source LLVM to JavaScript compiler

21. emcc index.c –s WASM=1 –o index.js
@boyanio

22. @boyanio
Wasm Fiddle
https://wasdk.github.io/WasmFiddle/

23. The distributable, loadable, and
executable unit of code in
WebAssembly is called a module.
@boyanio https://github.com/WebAssembly/design/blob/master/Modules.mdhttps://github.com/WebAssembly/design/blob/master/Modules.md

24. Module imports & exports
@boyanio
const imports = {
“name”: {
“first”: “Anna”,
“last”: “Nanna”
},
“print”: function (what) {
console.log(what);
}
};
const exports = module.exports;
exports.printName();
exports.reverseName();

25. LoadingWebAssembly
@boyanio
.wasm
ArrayBuffer
WASM
module
WASM
instance
fetch WebAssembly.instantiate

26. WebAssembly modules are clonable
@boyanio
.wasm
ArrayBuffer
WASM
module
WASM
instance
fetch
WebAssembly.compile
IndexedDB
store / load

27. @boyanio

28. Focus on the desired benefits
performance & code reusability
@boyanio http://evolvechile.com/meditate/

29. Angular architecture
@boyanio https://angular.io/guide/architecture

30. WebAssembly as Angular service
@boyanio
API wrapper

31. WebAssembly as Angular service
@boyanio
.wasm
service.method(a, b)
service.initalize() fetchAndInstantiateWasm()
wasm.exports.method(a, b)
.component.ts .service.ts.component.ts
.component.html
.wasm

32. WebAssembly as Angular component
@boyanio
Angular
component
interacting
with
WebAssembly

33. WebAssembly as Angular component
@boyanio
.wasm
fetchAndInstantiateWasm()
wasm.exports.method(a, b)
.component.ts
.component.html
.wasm
callback()
this.ngZone.run(() => { … })

34. What about rewriting
Angular in WebAssembly?
No direct DOM access at the moment.
Do you really want to program in C/C++?
But…
@boyanio

35. What about rewriting
Angular in WebAssembly?
…will improve compilation to native
@boyanio

36. What about rewriting
helper libraries for Angular in
WebAssembly?
Zone.js / RxJS
@boyanio

37. @boyanio

38. @boyanio
“WebAssembly fills in the gaps that would
be awkward to fill with JavaScript.”
Eric Elliott
https://jeremybutterfield.files.wordpress.com/2014/12/conclusion.jpg

39. @boyanio
Angular &WebAssembly
https://boyan.io/angular-wasm/

40. How secure is WebAssembly?
@boyanio

41. @boyanio

42. WebAssembly runs in a memory-safe
sandboxed environment
@boyanio

43. @boyanio http://caniuse.com/#search=WebAssembly

44. @boyanio
What languages
can be compiled
to WebAssembly?
https://boyan.io/wasm-wheel

45. From MVP to next
Direct access to the DOM andWebAPIs
Integration with browser’s GC
Multi-threading ?
@boyanio

46. The future of Web
belongs to those, who compile
Boyan Mihaylov / @boyanio / boyan.io