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 …
2. WebAssembly … ein Jahr danach … … und die Zeit davor …
3. WebAssembly … ein Jahr danach … … und die Zeit davor …
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
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
16. 2009 SSJS LiveWire In Netscape Enterprise Server (1995) ☺
17. 2010 JavaScript ist DIE Sprache für dynamische Inhalte im Web
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; }
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
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