Pro Yearly is on sale from $80 to $50! »

WebAssembly - ein Jahr danach

WebAssembly - ein Jahr danach

The slides of JavaLand 2018 session this year. I've been talking about WebAssembly and its usage scenarios. (German).

219cd340806b9ddcaee60427c2d07d26?s=128

Mirko Sertic

March 13, 2018
Tweet

Transcript

  1. WebAssembly … ein Jahr danach …

  2. WebAssembly … ein Jahr danach … … und die Zeit

    davor …
  3. WebAssembly … ein Jahr danach … … und die Zeit

    davor …
  4. 2018

  5. 1995 2018

  6. Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich

    baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de https://www.mirkosertic.de https://github.com/mirkosertic
  7. 1995

  8. LiveScript in Netscape Navigator 1995

  9. LiveScript in Netscape Navigator 1995 JavaScript

  10. angelehnt an Self / Scheme prototyp basierend double precision data

    types 1995 JavaScript
  11. NaN === NaN // false ??? data[[]] = “ Test“

    // {"": "Test"} WTF!!! 1995 JavaScript
  12. 1995 2018

  13. 1995 2018 Normierung der Sprache

  14. 2007

  15. 2009

  16. 2009 SSJS LiveWire In Netscape Enterprise Server (1995) ☺

  17. 2010 JavaScript ist DIE Sprache für dynamische Inhalte im Web

  18. 2010

  19. 2010 C++ Programme im Browser dank Cross Compiler

  20. 2013 JS code size

  21. 2013 JS code size execution time

  22. 2013 asm.js

  23. 2013 asm.js Untermenge von JavaScript AOT annotierte Datentypen

  24. 2013 asm.js Untermenge von JavaScript AOT annotierte Datentypen Wir haben

    wieder Integer ☺
  25. 2013 asm.js "use asm"; function f(i) { i = I

    | 0; return (i + 1) | 0; }
  26. 2013

  27. 2013 JS code size execution time

  28. 2013 JS code size execution time Download & Parsing ????

  29. 1995 2018 Normierung der Sprache

  30. 1995 2018 Normierung der Sprache

  31. 1995 2018 Normierung der Sprache

  32. 1995 2018 Normierung der Sprache

  33. 1995 2018 Normierung der Sprache

  34. 2015 WebAssembly

  35. 2015 WebAssembly Bytecode für das Web Binäres Format Optimiert für

    Größe und Geschwindigkeit
  36. 2015 WebAssembly kompaktes binäres Format

  37. 2015 WebAssembly kompaktes binäres Format integer und floating point typen

  38. 2015 WebAssembly kompaktes binäres Format integer und floating point typen

    integrierbar in Host-Umgebungen
  39. JavaScript int factorial(int n) { if (n == 0) return

    1; else return n * factorial(n-1); }
  40. JavaScript int factorial(int n) { if (n == 0) return

    1; else return n * factorial(n-1); } WAT get_local 0 i32.eqz if i32 i32.const 1 else get_local 0 get_local 0 i32.const 1 i32.sub call 0 i32.mul end
  41. JavaScript int factorial(int n) { if (n == 0) return

    1; else return n * factorial(n-1); } WAT get_local 0 i32.eqz if i32 i32.const 1 else get_local 0 get_local 0 i32.const 1 i32.sub call 0 i32.mul end WASM 20 00 50 04 7E 42 01 05 20 00 20 00 42 01 7D 10 00 7E 0B
  42. None
  43. None
  44. None
  45. None
  46. None
  47. (Cross) Compiler

  48. (Cross) Compiler WebAssembly

  49. 2017 WebAssembly 1.0

  50. 2017 WebAssembly 1.0 Mozilla Microsoft Google Apple

  51. 2017 MVP

  52. 2017 MVP nur lineares Memory, kein GC

  53. 2017 MVP nur lineares Memory, kein GC kein DOM /

    opaque Datatypes
  54. 2017 MVP nur lineares Memory, kein GC kein DOM /

    opaque Datatypes kein Threading
  55. 2017 MVP nur lineares Memory, kein GC kein DOM /

    opaque Datatypes kein Threading dynamic Linking
  56. Imports Exports

  57. Imports Exports z.B. „main“ function

  58. Imports Exports z.B. „main“ function z.B. I/O

  59. Imports Exports z.B. „main“ function z.B. I/O DOM Zugriff

  60. Bootstrap var request = new XMLHttpRequest(); request.open('GET', 'bytecoder.wasm'); request.responseType =

    'arraybuffer'; request.send();
  61. Bootstrap request.onload = function() { var bytes = request.response; WebAssembly.instantiate(bytes,

    { // Imports mymodule: { add: function(a, b) { return a + b; } } } ); };
  62. Bootstrap WebAssembly.instantiate(… ).then(function(result) { // Zugriff auf Modul und Instanz

    var wasmModule = result.module; var runningInstance = result.instance; // Exportierte Funktion aufrufen runningInstance.exports.main(); });
  63. Ich möchte spielen ☺

  64. WebAssembly Studio

  65. WebAssembly Studio

  66. WebAssembly Studio

  67. Unity Tanks Demo

  68. Unreal Sun Temple

  69. Pocketsphinx.js

  70. WebSight / OpenCV

  71. WebSight / OpenCV 30 fps 30 fps 2.2 fps

  72. Size & Performance

  73. Size ~ -20%

  74. Parsing time ---- dank Streaming Compiler

  75. Speed++ ~ 0 - 1000%

  76. Missing parts

  77. Tooling Debugger Missing parts

  78. GC Missing parts

  79. Opaque Datatypes Missing parts

  80. 0 - Cost Exceptions Missing parts

  81. Threading Missing parts

  82. Threading WebWorker Missing parts

  83. Und nun?

  84. Gaming Interaktive Produktdemos Migration von „Legacy Code“ ins Web VR

    / Augmented reality Live video Simulationen Einsatzgebiete
  85. Ausblick

  86. Danke !! @mirkosertic mirko@mirkosertic.de https://www.mirkosertic.de https://github.com/mirkosertic