20171018-WASM - Speaker Deck

20171018-WASM

by chikoski

Slide 1

Slide 1 text

WASM1.0リリース記念（？）最近の状況アップデート @chikoski

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

IUUQTDBOJVTFDPNGFBUXBTN

Slide 4

Slide 4 text

IUUQTDBOJVTFDPNGFBUXBTN

Slide 5

Slide 5 text

Module deﬁnition https://rsms.me/wasm-intro

Slide 6

Slide 6 text

WAT: text format IUUQXFCBTTFNCMZPSHEPDTUFYUGPSNBUMJOFBSJOTUSVDUJPOT

Slide 7

Slide 7 text

JS API GFUDI BEEXBTN   UIFO SFTSFTBSSBZ#VGGFS UIFO CVG 8FC"TTFNCMZDPNQJMF CVG UIFO CJO 8FC"TTFNCMZJOTUBOUJBUF CJO \^ UIFO NPENPEBEE

Slide 8

Slide 8 text

WebEmbedding API 8FC"TTFNCMZ DPNQJMF4USFBNJOH BEEXBTN UIFO CJO 8FC"TTFNCMZJOTUBOUJBUF CJO \^ UIFO NPENPEBEE 8FC"TTFNCMZ JOTUBOUJBUF4USFBNJOH BEEXBTN \^ UIFO NPENPEBEE

Slide 9

Slide 9 text

Languages and Tools Tool Language Compiler website Emscripten C / C++ http://kripken.github.io/emscripten-site/ Clang C / C++ https://llvm.org/ Rustc Rust https://rust-lang.org/ AssemblyScript TypeScript https://github.com/AssemblyScript/assemblyscript Binaryen IR(LLVM / TS / Rust MIR) https://github.com/WebAssembly/binaryen Wabt S-expression / text https://github.com/WebAssembly/wabt Unity Unity(C#) http://unity3d.com/ mono-wasm C# https://github.com/lrz/mono-wasm

Slide 10

Slide 10 text

WASM Tool chains

Slide 11

Slide 11 text

Emscripten vs Clang • I have not compared in performance • Emscripten has advantage in • Porting project • Library support • File system support • Easy installation • Clang has advantage in • Creating relatively small modules

Slide 12

Slide 12 text

Tool installation: Emscripten 63-IUUQTTBNB[POBXTDPN NP[JMMBHBNFTFNTDSJQUFOSFMFBTFT FNTELQPSUBCMFUBSH[ DVSM63-]UBS[Y DEFNTELQPSUBCMF FNTELJOTUBMMMBUFTU FNTELBDUJWBUFMBUFTU TPVSDFFNTEL@FOWTI

Slide 13

Slide 13 text

Tool installation: LLVM x Clang DVSMIUUQSFMFBTFTMMWNPSHMMWNTSDUBSY[]UBS+YG DEMMWNTSDUPPMT DVSMIUUQSFMFBTFTMMWNPSHDGFTSDUBSY[]UBS+YG DE NLEJSCVJME DECVJME DNBLF%--7.@&91&3*.&/5"-@5"3(&54@50@#6*-%8FC"TTFNCMZ= MMWNTSD NBLF NBLFJOTUBMM

Slide 14

Slide 14 text

Tool dependencies (In macOS)

Slide 15

Slide 15 text

Env. setup to dev. with Rust 1. Install XCode 2. Install XCode Command Line Tools 3. Install Homebrew 4. Install cmake with Homebrew 5. Install emsdk 6. Install Emscripten 7. Install rustup 8. Add target architecture   "wasm32-unkown-emscripten"

Slide 16

Slide 16 text

Tool installation: rustc & wasm32 JOTUBMM&NTDSJQUFOQSJPSUPUIJT DVSMIUUQTTISVTUVQSTT4G]TI SVTUVQUBSHFU= BEEXBTNVOLOPXOFNTDSJQUFO TPVSDF_DBSHPFOW

Slide 17

Slide 17 text

Webpack • http://webpack.js.org/ • A bundler: • Resolve module dependencies • Packs multiple ﬁles into 1 ﬁle

Slide 18

Slide 18 text

MOSS Program funded Webpack to implement ﬁrst-class support for WASM IUUQTNFEJVNDPNXFCQBDLXFCQBDLBXBSEFEGSPNNPTTQSPHSBNGFFBBGF

Slide 19

Slide 19 text

Loader • WebPack: bundler framework • Loader • Deﬁnes a transformation applied on the source module • E.g. css-loader, ts-loader, babel-loader • Loaders for development with WASM • wasm-loader • cpp-loader, rs-wasm-loader

Slide 20

Slide 20 text

wasm-loader IUUQTHJUIVCDPNCBMMFSDBUXBTNMPBEFS JNQPSUNBLF'BDUPSJBM GSPNXBTNGBDUPSJBM NBLF'BDUPSJBM UIFO JOTUBODF\ DPOTUGBDUPSJBM JOTUBODFFYQPSUTGBDUPSJBM DPOTPMFMPH GBDUPSJBM DPOTPMFMPH GBDUPSJBM DPOTPMFMPH GBDUPSJBM ^

Slide 21

Slide 21 text

JOTUBOUJBUFXJUIGFFEJOHJNQPSUT NBLF'BDUPSJBM \ HMPCBM\^ FOW\ NFNPSZOFX8FC"TTFNCMZ.FNPSZ \JOJUJBM MJNJU^ UBCMFOFX8FC"TTFNCMZ5BCMF \JOJUJBM FMFNFOUBOZGVOD^ ^ ^ UIFO JOTUBODF\DPEFIFSF^ EFGBVMUJNQPSUT \ HMPCBM\^ FOW\ NFNPSZOFX.FNPSZ \JOJUJBM MJNJU^ UBCMFOFX5BCMF \JOJUJBM FMFNFOUBOZGVOD^ ^ ^

Slide 22

Slide 22 text

cpp-loader https://github.com/arcanis/cpp-loader JNQPSU\BEEJUJPO SBOHF^ GSPNMJCDD DPOTPMFMPH BEEJUJPO DPOTPMFMPH SBOHF /PUF 5IJTMPBEFSHFOFSBUFTBTNKT "WBJMBCMFPOMZPO8JOEPXT

Slide 23

Slide 23 text

rust-wasm-loader  IUUQTHJUIVCDPNJBOKTJLFTSVTUXBTNMPBEFS DPOTUXBTNSFRVJSF NBJOST XBTNJOJUJBMJ[F UIFO NPEVMF\ DPOTUEPVC NPEVMFDXSBQ EPVC OVNCFS <OVNCFS> DPOTPMFMPH EPVC ^

Slide 24

Slide 24 text

AssemblyScript

Slide 25

Slide 25 text

TypeScript -> WASM • TypeScript compiler API +   Binaryen's WASM backend • Compiler itself are written in TypeScript • What to except • All types must be annotated • Optional function parameters require an initializer expression • Union types (except classType | null representing a nullable), any and undeﬁned are not supported by design • The result of logical && / || expressions is always bool

Slide 26

Slide 26 text

Installation OQNJOTUBMMBTTFNCMZTDSJQU

Slide 27

Slide 27 text

Compiler usage BTDFOUSZ'JMF BTDPNBJOXBTNNBJOUT BTDPNBJOXBTNUFYU'JMFNBJOXBUNBJOUT BTDOP3VOUJNFPNBJOXBTNUFYU'JMFNBJOXBUNBJOUT BTDOP3VOUJNF0PNBJOXBTNUFYU'JMFNBJOXBUNBJOUT

Slide 28

Slide 28 text

Sample code FYQPSUGVODUJPOBEE BJ CJ J\ SFUVSOBC ^

Slide 29

Slide 29 text

Generated WASM ﬁle NPEVMF UZQF GVOD QBSBNJJ SFTVMUJ UZQF GVOD QBSBNJ SFTVMUJ GVODBEE UZQF QBSBNJJ SFTVMUJ HFU@MPDBM HFU@MPDBM JBEE NFNPSZ FYQPSUBEE GVODBEE FYQPSUNFNPSZ NFNPSZ

Slide 30

Slide 30 text

Only "export function" is exported FYQPSUGVODUJPOBEE BJ CJ J\ SFUVSOBC ^ GVODUJPOJOWFSU4JHO BJ J\ SFUVSOB ^ FYQPSUGVODUJPOTVC BJ CJ J\ SFUVSOBEE B JOWFSU4JHO C ^

Slide 31

Slide 31 text

Only "export function" is exported NPEVMF UZQF GVOD QBSBNJJ SFTVMUJ UZQF GVOD QBSBNJ SFTVMUJ GVODBEE UZQF QBSBNJJ SFTVMUJ TOJQ GVODJOWFSU4JHO UZQF QBSBNJ SFTVMUJ TOJQ GVODTVC UZQF QBSBNJJ SFTVMUJ TOJQ NFNPSZ FYQPSUBEE GVODBEE FYQPSUTVC GVODTVC FYQPSUNFNPSZ NFNPSZ

Slide 32

Slide 32 text

Constructor: memory initializer FYQPSUDMBTT1PJOU\ QVCMJDYJ QVCMJDZJ DPOTUSVDUPS YJ ZJ \ UIJTYY UIJTZZ ^ ^ GVOD1PJOU UZQF QBSBNJJJ SFTVMUJ CMPDL SFTVMUJ MBCFM! HFU@MPDBM HFU@MPDBM JTUPSF HFU@MPDBM HFU@MPDBM JTUPSFPGGTFU HFU@MPDBM FOE

Slide 33

Slide 33 text

Methods are translated into functions FYQPSUDMBTT1PJOU\ QVCMJDYJ QVCMJDZJ DPOTUSVDUPS YJ ZJ \ UIJTYY UIJTZZ ^ QVCMJDOPSN J\ SFUVSOBEE UIJTY UIJTZ ^ QVCMJDEJTUBODF QPJOU1PJOU J\ SFUVSOUIJTOPSN QPJOUOPSN ^ ^ GVOD1PJOUOPSN UZQF QBSBNJ SFTVMUJ HFU@MPDBM JMPBE HFU@MPDBM JMPBEPGGTFU DBMMBEE GVOD1PJOUEJTUBODF UZQF QBSBNJJ SFTVMUJ HFU@MPDBM DBMM1PJOUOPSN HFU@MPDBM DBMM1PJOUOPSN JTVC

Slide 34

Slide 34 text

Summary • All major modern browsers provide default support to WebAssembly MVP • Web Embedding: http://webassembly.org/docs/web/ • WebPack will support WASM as its ﬁrst class language • AssemblyScript: a TypeScript subset compiler emits WASM