$30 off During Our Annual Pro Sale. View Details »

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).

Mirko Sertic

March 13, 2018
Tweet

More Decks by Mirko Sertic

Other Decks in Technology

Transcript

  1. WebAssembly
    … ein Jahr danach …

    View Slide

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

    View Slide

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

    View Slide

  4. 2018

    View Slide

  5. 1995 2018

    View Slide

  6. Mirko Sertic
    Software Craftsman im Web / eCommerce Umfeld
    Ich baue wirtschaftliche und moderne IT Lösungen
    @mirkosertic
    [email protected]
    https://www.mirkosertic.de
    https://github.com/mirkosertic

    View Slide

  7. 1995

    View Slide

  8. LiveScript
    in Netscape Navigator
    1995

    View Slide

  9. LiveScript
    in Netscape Navigator
    1995
    JavaScript

    View Slide

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

    View Slide

  11. NaN === NaN // false ???
    data[[]] = “ Test“ // {"": "Test"} WTF!!!
    1995
    JavaScript

    View Slide

  12. 1995 2018

    View Slide

  13. 1995 2018
    Normierung der Sprache

    View Slide

  14. 2007

    View Slide

  15. 2009

    View Slide

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

    View Slide

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

    View Slide

  18. 2010

    View Slide

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

    View Slide

  20. 2013
    JS code size

    View Slide

  21. 2013
    JS code size
    execution time

    View Slide

  22. 2013
    asm.js

    View Slide

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

    View Slide

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

    View Slide

  25. 2013
    asm.js
    "use asm";
    function f(i) {
    i = I | 0;
    return (i + 1) | 0;
    }

    View Slide

  26. 2013

    View Slide

  27. 2013
    JS code size
    execution time

    View Slide

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

    View Slide

  29. 1995 2018
    Normierung der Sprache

    View Slide

  30. 1995 2018
    Normierung der Sprache

    View Slide

  31. 1995 2018
    Normierung der Sprache

    View Slide

  32. 1995 2018
    Normierung der Sprache

    View Slide

  33. 1995 2018
    Normierung der Sprache

    View Slide

  34. 2015
    WebAssembly

    View Slide

  35. 2015
    WebAssembly
    Bytecode für das Web
    Binäres Format
    Optimiert für Größe und
    Geschwindigkeit

    View Slide

  36. 2015
    WebAssembly
    kompaktes binäres Format

    View Slide

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

    View Slide

  38. 2015
    WebAssembly
    kompaktes binäres Format
    integer und floating point typen
    integrierbar in Host-Umgebungen

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  42. View Slide

  43. View Slide

  44. View Slide

  45. View Slide

  46. View Slide

  47. (Cross)
    Compiler

    View Slide

  48. (Cross)
    Compiler
    WebAssembly

    View Slide

  49. 2017
    WebAssembly 1.0

    View Slide

  50. 2017
    WebAssembly 1.0
    Mozilla
    Microsoft
    Google
    Apple

    View Slide

  51. 2017
    MVP

    View Slide

  52. 2017
    MVP
    nur lineares Memory, kein GC

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  56. Imports Exports

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  61. Bootstrap
    request.onload = function() {
    var bytes = request.response;
    WebAssembly.instantiate(bytes, {
    // Imports
    mymodule: {
    add: function(a, b) { return a + b; }
    }
    }
    );
    };

    View Slide

  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();
    });

    View Slide

  63. Ich möchte
    spielen ☺

    View Slide

  64. WebAssembly Studio

    View Slide

  65. WebAssembly Studio

    View Slide

  66. WebAssembly Studio

    View Slide

  67. Unity Tanks Demo

    View Slide

  68. Unreal Sun Temple

    View Slide

  69. Pocketsphinx.js

    View Slide

  70. WebSight / OpenCV

    View Slide

  71. WebSight / OpenCV
    30
    fps
    30
    fps
    2.2
    fps

    View Slide

  72. Size &
    Performance

    View Slide

  73. Size ~ -20%

    View Slide

  74. Parsing time ----
    dank Streaming Compiler

    View Slide

  75. Speed++
    ~ 0 - 1000%

    View Slide

  76. Missing parts

    View Slide

  77. Tooling
    Debugger
    Missing parts

    View Slide

  78. GC
    Missing parts

    View Slide

  79. Opaque
    Datatypes
    Missing parts

    View Slide

  80. 0 - Cost
    Exceptions
    Missing parts

    View Slide

  81. Threading
    Missing parts

    View Slide

  82. Threading
    WebWorker
    Missing parts

    View Slide

  83. Und nun?

    View Slide

  84. Gaming
    Interaktive Produktdemos
    Migration von „Legacy Code“ ins Web
    VR / Augmented reality
    Live video
    Simulationen
    Einsatzgebiete

    View Slide

  85. Ausblick

    View Slide

  86. Danke !!
    @mirkosertic
    [email protected]
    https://www.mirkosertic.de
    https://github.com/mirkosertic

    View Slide