Post on 08-Jan-2020
WebAssembly… ein Jahr danach …
WebAssembly… ein Jahr danach …
… und die Zeit davor …
WebAssembly… ein Jahr danach …
… und die Zeit davor …
2018
1995 2018
Mirko Sertic
Software Craftsman im Web / eCommerce UmfeldIch baue wirtschaftliche und moderne IT Lösungen
@mirkoserticmirko@mirkosertic.de
https://www.mirkosertic.dehttps://github.com/mirkosertic
1995
LiveScriptin Netscape Navigator
1995
LiveScriptin Netscape Navigator
1995
JavaScript
angelehnt an Self / Schemeprototyp basierend
double precision data types
1995
JavaScript
NaN === NaN // false ???data[[]] = “ Test“ // {"": "Test"} WTF!!!
1995
JavaScript
1995 2018
1995 2018
Normierung der Sprache
2007
2009
2009SSJS LiveWire
In Netscape Enterprise Server (1995) ☺
2010
JavaScript ist DIE Sprache für dynamische
Inhalte im Web
2010
2010
C++ Programme im Browser dank Cross
Compiler
2013
JS code size
2013
JS code size
execution time
2013
asm.js
2013
asm.jsUntermenge von JavaScript
AOT annotierte Datentypen
2013
asm.jsUntermenge von JavaScript
AOT annotierte DatentypenWir haben wieder Integer ☺
2013
asm.js"use asm";function f(i) {
i = I | 0;return (i + 1) | 0;
}
2013
2013
JS code size
execution time
2013
JS code size
execution time
Download &
Parsing ????
1995 2018
Normierung der Sprache
1995 2018
Normierung der Sprache
1995 2018
Normierung der Sprache
1995 2018
Normierung der Sprache
1995 2018
Normierung der Sprache
2015
WebAssembly
2015
WebAssemblyBytecode für das Web
Binäres FormatOptimiert für Größe und
Geschwindigkeit
2015
WebAssemblykompaktes binäres Format
2015
WebAssemblykompaktes binäres Format
integer und floating point typen
2015
WebAssemblykompaktes binäres Format
integer und floating point typenintegrierbar in Host-Umgebungen
JavaScript
function factorial(n) {
if (n == 0)return 1;
elsereturn n *
factorial(n-1);}
WAT
get_local 0i32.eqzif i32
i32.const 1else
get_local 0get_local 0i32.const 1i32.subcall 0i32.mul
end
JavaScript
function factorial(n) {
if (n == 0)return 1;
elsereturn n *
factorial(n-1);}
WAT
get_local 0i32.eqzif i32
i32.const 1else
get_local 0get_local 0i32.const 1i32.subcall 0i32.mul
end
WASM
20 005004 7E42 010520 0020 0042 017D10 007E0B
JavaScript
function factorial(n) {
if (n == 0)return 1;
elsereturn n *
factorial(n-1);}
(Cross)
Compiler
(Cross)
Compiler
WebAssembly
2017
WebAssembly 1.0
2017
WebAssembly 1.0MozillaMicrosoftGoogleApple
2017
MVP
2017
MVP
nur lineares Memory, kein GC
2017
MVP
nur lineares Memory, kein GCkein DOM / opaque Datatypes
2017
MVP
nur lineares Memory, kein GCkein DOM / opaque Datatypeskein Threading
2017
MVP
nur lineares Memory, kein GCkein DOM / opaque Datatypeskein Threadingdynamic Linking
Imports Exports
Imports Exports
z.B. „main“ function
Imports Exports
z.B. „main“ functionz.B. I/O
Imports Exports
z.B. „main“ functionz.B. I/ODOM Zugriff
Bootstrapvar request = new XMLHttpRequest();
request.open('GET', 'bytecoder.wasm');request.responseType = 'arraybuffer';request.send();
Bootstraprequest.onload = function() {
var bytes = request.response;
WebAssembly.instantiate(bytes, {// Importsmymodule: {
add: function(a, b) { return a + b; }}
});
};
BootstrapWebAssembly.instantiate(… ).then(function(result) {
// Zugriff auf Modul und Instanzvar wasmModule = result.module;var runningInstance = result.instance;
// Exportierte Funktion aufrufenrunningInstance.exports.main();
});
Ich möchte spielen ☺
WebAssembly Studio
WebAssembly Studio
WebAssembly Studio
Unity Tanks Demo
Unreal Sun Temple
Pocketsphinx.js
WebSight / OpenCV
WebSight / OpenCV
30 fps
30 fps
2.2fps
Size &Performance
Size ~ -20%
Parsing time ----dank Streaming Compiler
Speed++~ 0 - 1000%
Missing parts
ToolingDebugger
Missing parts
GC
Missing parts
OpaqueDatatypes
Missing parts
0 - CostExceptions
Missing parts
Threading
Missing parts
Threading WebWorker
Missing parts
Und nun?
GamingInteraktive ProduktdemosMigration von „Legacy Code“ ins WebVR / Augmented realityLive videoSimulationen
Einsatzgebiete
Ausblick
Danke !!
@mirkosertic
mirko@mirkosertic.de
https://www.mirkosertic.de
https://github.com/mirkosertic