Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How WebAssembly is changing the Web and what it means for Angular

244 views

Published on

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

Published in: Internet
  • Be the first to comment

  • Be the first to like this

How WebAssembly is changing the Web and what it means for Angular

  1. 1. How WebAssembly is changing the Web and what it means for Angular Boyan Mihaylov @boyanio boyan.io
  2. 2. WebAssembly (WASM) is compiler target for programs on the Web @boyanio
  3. 3. function add(a, b) { return a + b; } @boyanio
  4. 4. @boyanio
  5. 5. @boyanio weak typing, implicit conversion …not really consistent string – string = number ? “+” is for concatenation “+ +” is for addition ?
  6. 6. @boyanio
  7. 7. WebAssembly is a typed language It supports 32 and 64-bit integers (i32, i64) and floating points (f32, f64) @boyanio
  8. 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. 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. 10. @boyanio Parse Compile + optimize Re- optimize Execute GCFetch Decode Compile + optimize ExecuteFetch Execute Fetch / Decode / Compile + optimize (streaming API)
  11. 11. WebAssembly provides consistent, predictable performance @boyanio
  12. 12. @boyanio 3D animation performance https://github.com/sessamekesh/wasm-3d-animation-demo
  13. 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. 14. Reusing code on the Web @boyanio
  15. 15. WebAssembly enables code reusability between native andWeb @boyanio
  16. 16. Traditional multi-target compilation @boyanio .cpp Source code Windows MAC Linux x86 x64 x86 x64 x86 x64 ARM v8 ARM v7
  17. 17. Multi-target compilation with WebAssembly @boyanio .cpp Source code .wasm WebAssembly module
  18. 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. 19. How to produceWebAssembly @boyanio .cpp .wasm .html WASM module HTML page Browser compilation loading with JavaScript execution .rs …
  20. 20. @boyanio Open Source LLVM to JavaScript compiler
  21. 21. emcc index.c –s WASM=1 –o index.js @boyanio
  22. 22. @boyanio Wasm Fiddle https://wasdk.github.io/WasmFiddle/
  23. 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. 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. 25. LoadingWebAssembly @boyanio .wasm ArrayBuffer WASM module WASM instance fetch WebAssembly.instantiate
  26. 26. WebAssembly modules are clonable @boyanio .wasm ArrayBuffer WASM module WASM instance fetch WebAssembly.compile IndexedDB store / load
  27. 27. @boyanio
  28. 28. Focus on the desired benefits performance & code reusability @boyanio http://evolvechile.com/meditate/
  29. 29. Angular architecture @boyanio https://angular.io/guide/architecture
  30. 30. WebAssembly as Angular service @boyanio API wrapper
  31. 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. 32. WebAssembly as Angular component @boyanio Angular component interacting with WebAssembly
  33. 33. WebAssembly as Angular component @boyanio .wasm fetchAndInstantiateWasm() wasm.exports.method(a, b) .component.ts .component.html .wasm callback() this.ngZone.run(() => { … })
  34. 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. 35. What about rewriting Angular in WebAssembly? …will improve compilation to native @boyanio
  36. 36. What about rewriting helper libraries for Angular in WebAssembly? Zone.js / RxJS @boyanio
  37. 37. @boyanio
  38. 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. 39. @boyanio Angular &WebAssembly https://boyan.io/angular-wasm/
  40. 40. How secure is WebAssembly? @boyanio
  41. 41. @boyanio
  42. 42. WebAssembly runs in a memory-safe sandboxed environment @boyanio
  43. 43. @boyanio http://caniuse.com/#search=WebAssembly
  44. 44. @boyanio What languages can be compiled to WebAssembly? https://boyan.io/wasm-wheel
  45. 45. From MVP to next Direct access to the DOM andWebAPIs Integration with browser’s GC Multi-threading ? @boyanio
  46. 46. The future of Web belongs to those, who compile Boyan Mihaylov / @boyanio / boyan.io

×