Pro Yearly is on sale from $80 to $50! »

20171018-WASM

00580f6c11851d2fff0b3e2f7392226b?s=47 N. Shimizu
October 18, 2017

 20171018-WASM

A summary of WASM toolchains

00580f6c11851d2fff0b3e2f7392226b?s=128

N. Shimizu

October 18, 2017
Tweet

Transcript

  1. WASM1.0リリース記念(?) 最近の状況アップデート @chikoski

  2. None
  3. IUUQTDBOJVTFDPNGFBUXBTN

  4. IUUQTDBOJVTFDPNGFBUXBTN

  5. Module definition https://rsms.me/wasm-intro

  6. WAT: text format IUUQXFCBTTFNCMZPSHEPDTUFYUGPSNBUMJOFBSJOTUSVDUJPOT

  7. JS API GFUDI BEEXBTN 
 UIFO SFTSFTBSSBZ#VGGFS  UIFO CVG

    8FC"TTFNCMZDPNQJMF CVG  UIFO CJO 8FC"TTFNCMZJOTUBOUJBUF CJO \^  UIFO NPENPEBEE   
  8. WebEmbedding API 8FC"TTFNCMZ DPNQJMF4USFBNJOH BEEXBTN  UIFO CJO 8FC"TTFNCMZJOTUBOUJBUF CJO

    \^  UIFO NPENPEBEE    8FC"TTFNCMZ JOTUBOUJBUF4USFBNJOH BEEXBTN  \^  UIFO NPENPEBEE   
  9. 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
  10. WASM Tool chains

  11. 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
  12. Tool installation: Emscripten 63-IUUQTTBNB[POBXTDPN NP[JMMBHBNFTFNTDSJQUFOSFMFBTFT FNTELQPSUBCMFUBSH[ DVSM63-]UBS[Y DEFNTELQPSUBCMF FNTELJOTUBMMMBUFTU FNTELBDUJWBUFMBUFTU

    TPVSDFFNTEL@FOWTI
  13. 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
  14. Tool dependencies (In macOS)

  15. 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"
  16. Tool installation: rustc & wasm32 JOTUBMM&NTDSJQUFOQSJPSUPUIJT DVSMIUUQTTISVTUVQSTT4G]TI SVTUVQUBSHFU= BEEXBTNVOLOPXOFNTDSJQUFO TPVSDF_DBSHPFOW

  17. Webpack • http://webpack.js.org/ • A bundler: • Resolve module dependencies

    • Packs multiple files into 1 file
  18. MOSS Program funded Webpack to implement first-class support for WASM

    IUUQTNFEJVNDPNXFCQBDLXFCQBDLBXBSEFEGSPNNPTTQSPHSBNGFFBBGF
  19. Loader • WebPack: bundler framework • Loader • Defines 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
  20. wasm-loader IUUQTHJUIVCDPNCBMMFSDBUXBTNMPBEFS JNQPSUNBLF'BDUPSJBM GSPNXBTNGBDUPSJBM NBLF'BDUPSJBM UIFO JOTUBODF\ DPOTUGBDUPSJBM JOTUBODFFYQPSUTGBDUPSJBM DPOTPMFMPH

    GBDUPSJBM   DPOTPMFMPH GBDUPSJBM   DPOTPMFMPH GBDUPSJBM   ^ 
  21. 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^  ^ ^
  22. cpp-loader https://github.com/arcanis/cpp-loader JNQPSU\BEEJUJPO SBOHF^ GSPNMJCDD DPOTPMFMPH BEEJUJPO   

    DPOTPMFMPH SBOHF      /PUF 5IJTMPBEFSHFOFSBUFTBTNKT "WBJMBCMFPOMZPO8JOEPXT  
  23. rust-wasm-loader
 IUUQTHJUIVCDPNJBOKTJLFTSVTUXBTNMPBEFS DPOTUXBTNSFRVJSF NBJOST  XBTNJOJUJBMJ[F UIFO NPEVMF\ DPOTUEPVC NPEVMFDXSBQ

    EPVC  OVNCFS  <OVNCFS>  DPOTPMFMPH EPVC   ^ 
  24. AssemblyScript

  25. 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 undefined are not supported by design • The result of logical && / || expressions is always bool
  26. Installation OQNJOTUBMMBTTFNCMZTDSJQU

  27. Compiler usage BTD<PQUJPOT>FOUSZ'JMF BTDPNBJOXBTNNBJOUT BTDPNBJOXBTNUFYU'JMFNBJOXBUNBJOUT BTDOP3VOUJNFPNBJOXBTNUFYU'JMFNBJOXBUNBJOUT BTDOP3VOUJNF0PNBJOXBTNUFYU'JMFNBJOXBUNBJOUT

  28. Sample code FYQPSUGVODUJPOBEE BJ CJ J\ SFUVSOB C ^

  29. Generated WASM file NPEVMF  UZQF   GVOD QBSBNJJ

     SFTVMUJ   UZQF   GVOD QBSBNJ  SFTVMUJ   GVODBEE UZQF  QBSBNJJ  SFTVMUJ  HFU@MPDBM HFU@MPDBM JBEE   NFNPSZ     FYQPSUBEE GVODBEE   FYQPSUNFNPSZ NFNPSZ
  30. Only "export function" is exported FYQPSUGVODUJPOBEE BJ CJ J\ SFUVSOB

    C ^ GVODUJPOJOWFSU4JHO BJ J\ SFUVSOB ^ FYQPSUGVODUJPOTVC BJ CJ J\ SFUVSOBEE B JOWFSU4JHO C  ^
  31. 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 
  32. 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 
  33. 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 
  34. Summary • All major modern browsers provide default support to

    WebAssembly MVP • Web Embedding: http://webassembly.org/docs/web/ • WebPack will support WASM as its first class language • AssemblyScript: a TypeScript subset compiler emits WASM