WebAssembly - ein Jahr danach

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

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. 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
   mirko@mirkosertic.de
   https://www.mirkosertic.de
   https://github.com/mirkosertic
   

   View Slide

7. 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. View Slide

15. 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. 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. 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
    mirko@mirkosertic.de
    https://www.mirkosertic.de
    https://github.com/mirkosertic
    

    View Slide