Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

20171018-WASM

chikoski
October 18, 2017

 20171018-WASM

A summary of WASM toolchains

chikoski

October 18, 2017
Tweet

More Decks by chikoski

Other Decks in Technology

Transcript

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

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

    \^  UIFO NPENPEBEE    8FC"TTFNCMZ JOTUBOUJBUF4USFBNJOH BEEXBTN  \^  UIFO NPENPEBEE   
  3. 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
  4. 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
  5. 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"
  6. MOSS Program funded Webpack to implement first-class support for WASM

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

    DPOTPMFMPH SBOHF      /PUF 5IJTMPBEFSHFOFSBUFTBTNKT "WBJMBCMFPOMZPO8JOEPXT  
  10. 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
  11. 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
  12. Only "export function" is exported FYQPSUGVODUJPOBEE BJ CJ J\ SFUVSOB

    C ^ GVODUJPOJOWFSU4JHO BJ J\ SFUVSOB ^ FYQPSUGVODUJPOTVC BJ CJ J\ SFUVSOBEE B JOWFSU4JHO C  ^
  13. 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 
  14. 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 
  15. 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 
  16. 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