WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche...

86
WebAssembly … ein Jahr danach …

Transcript of WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche...

Page 1: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

WebAssembly… ein Jahr danach …

Page 2: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

WebAssembly… ein Jahr danach …

… und die Zeit davor …

Page 3: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

WebAssembly… ein Jahr danach …

… und die Zeit davor …

Page 4: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

2018

Page 5: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

1995 2018

Page 6: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

Mirko Sertic

Software Craftsman im Web / eCommerce UmfeldIch baue wirtschaftliche und moderne IT Lösungen

@[email protected]

https://www.mirkosertic.dehttps://github.com/mirkosertic

Page 7: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

1995

Page 8: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

LiveScriptin Netscape Navigator

1995

Page 9: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

LiveScriptin Netscape Navigator

1995

JavaScript

Page 10: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

angelehnt an Self / Schemeprototyp basierend

double precision data types

1995

JavaScript

Page 11: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

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

1995

JavaScript

Page 12: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

1995 2018

Page 13: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

1995 2018

Normierung der Sprache

Page 14: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

2007

Page 15: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

2009

Page 16: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

2009SSJS LiveWire

In Netscape Enterprise Server (1995) ☺

Page 17: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

2010

JavaScript ist DIE Sprache für dynamische

Inhalte im Web

Page 18: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

2010

Page 19: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

2010

C++ Programme im Browser dank Cross

Compiler

Page 20: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

2013

JS code size

Page 21: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

2013

JS code size

execution time

Page 22: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

2013

asm.js

Page 23: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

2013

asm.jsUntermenge von JavaScript

AOT annotierte Datentypen

Page 24: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

2013

asm.jsUntermenge von JavaScript

AOT annotierte DatentypenWir haben wieder Integer ☺

Page 25: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

2013

asm.js"use asm";function f(i) {

i = I | 0;return (i + 1) | 0;

}

Page 26: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

2013

Page 27: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

2013

JS code size

execution time

Page 28: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

2013

JS code size

execution time

Download &

Parsing ????

Page 29: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

1995 2018

Normierung der Sprache

Page 30: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

1995 2018

Normierung der Sprache

Page 31: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

1995 2018

Normierung der Sprache

Page 32: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

1995 2018

Normierung der Sprache

Page 33: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

1995 2018

Normierung der Sprache

Page 34: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

2015

WebAssembly

Page 35: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

2015

WebAssemblyBytecode für das Web

Binäres FormatOptimiert für Größe und

Geschwindigkeit

Page 36: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

2015

WebAssemblykompaktes binäres Format

Page 37: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

2015

WebAssemblykompaktes binäres Format

integer und floating point typen

Page 38: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

2015

WebAssemblykompaktes binäres Format

integer und floating point typenintegrierbar in Host-Umgebungen

Page 39: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

JavaScript

function factorial(n) {

if (n == 0)return 1;

elsereturn n *

factorial(n-1);}

Page 40: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

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

Page 41: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

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

Page 42: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de
Page 43: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de
Page 44: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de
Page 45: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de
Page 46: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de
Page 47: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

(Cross)

Compiler

Page 48: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

(Cross)

Compiler

WebAssembly

Page 49: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

2017

WebAssembly 1.0

Page 50: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

2017

WebAssembly 1.0MozillaMicrosoftGoogleApple

Page 51: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

2017

MVP

Page 52: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

2017

MVP

nur lineares Memory, kein GC

Page 53: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

2017

MVP

nur lineares Memory, kein GCkein DOM / opaque Datatypes

Page 54: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

2017

MVP

nur lineares Memory, kein GCkein DOM / opaque Datatypeskein Threading

Page 55: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

2017

MVP

nur lineares Memory, kein GCkein DOM / opaque Datatypeskein Threadingdynamic Linking

Page 56: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

Imports Exports

Page 57: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

Imports Exports

z.B. „main“ function

Page 58: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

Imports Exports

z.B. „main“ functionz.B. I/O

Page 59: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

Imports Exports

z.B. „main“ functionz.B. I/ODOM Zugriff

Page 60: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

Bootstrapvar request = new XMLHttpRequest();

request.open('GET', 'bytecoder.wasm');request.responseType = 'arraybuffer';request.send();

Page 61: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

Bootstraprequest.onload = function() {

var bytes = request.response;

WebAssembly.instantiate(bytes, {// Importsmymodule: {

add: function(a, b) { return a + b; }}

});

};

Page 62: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

BootstrapWebAssembly.instantiate(… ).then(function(result) {

// Zugriff auf Modul und Instanzvar wasmModule = result.module;var runningInstance = result.instance;

// Exportierte Funktion aufrufenrunningInstance.exports.main();

});

Page 63: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

Ich möchte spielen ☺

Page 64: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

WebAssembly Studio

Page 65: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

WebAssembly Studio

Page 66: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

WebAssembly Studio

Page 67: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

Unity Tanks Demo

Page 68: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

Unreal Sun Temple

Page 69: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

Pocketsphinx.js

Page 70: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

WebSight / OpenCV

Page 71: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

WebSight / OpenCV

30 fps

30 fps

2.2fps

Page 72: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

Size &Performance

Page 73: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

Size ~ -20%

Page 74: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

Parsing time ----dank Streaming Compiler

Page 75: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

Speed++~ 0 - 1000%

Page 76: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

Missing parts

Page 77: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

ToolingDebugger

Missing parts

Page 78: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

GC

Missing parts

Page 79: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

OpaqueDatatypes

Missing parts

Page 80: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

0 - CostExceptions

Missing parts

Page 81: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

Threading

Missing parts

Page 82: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

Threading WebWorker

Missing parts

Page 83: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

Und nun?

Page 84: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

GamingInteraktive ProduktdemosMigration von „Legacy Code“ ins WebVR / Augmented realityLive videoSimulationen

Einsatzgebiete

Page 85: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

Ausblick

Page 86: WebAssembly · Mirko Sertic Software Craftsman im Web / eCommerce Umfeld Ich baue wirtschaftliche und moderne IT Lösungen @mirkosertic mirko@mirkosertic.de

Danke !!

@mirkosertic

[email protected]

https://www.mirkosertic.de

https://github.com/mirkosertic