20170319-wasm

A brief introduction of WebAssembly, talked at FOSSASIA 2017

Transcript

1. WebAssembly - Web is a new compiler target FOSSASIA | Mar 19th, 2017 | Mozilla TechSpeaker N.Shimizu (@chikoski)
6. WebAssembly: new binary format for the web ➔"WASM": acronym of WebAssembly ➔Discussed in W3C community group ◆ https://www.w3.org/community/webassembly/ ◆ https://webassembly.github.io/ ➔Features ◆Fast, efficient and portable ◆safety execution ◆WAST : text representation of WASM ◆Interaction between JavaScript 6
7. Supported in Firefox 52 Supported in Chrome 57 IUUQTFOXJLJQFEJBPSHXJLJ(PPHMF@$ISPNFNFEJB'JMF(PPHMF@$ISPNF@GPS@"OESPJE@*DPO@TWH
   IUUQTDPNNPOTXJLJNFEJBPSHXJLJ'JMF.JDSPTPGU@&EHF@MPHPTWH
   IUUQTFOXJLJQFEJBPSHXJLJ8FC,JU Under development https://webkit.org/status/#specification-webassembly Under development https://blogs.windows.com/msedgedev/2016/03/15/previewing- webassembly-experiments
8. WASM features ➔Fast and safety execution ➔Load and size efficiency ➔Portability ➔Text representation (WAST) ➔JavaScript API 8
9. IUUQTIBDLTNP[JMMBPSHXFCBTTFNCMZCSPXTFSQSFWJFX
10. Usage typologies 10 IUUQTIFMQTBLVSBBEKQIDKBBSUJDMFT7/$&#&#&#%&#$&"#&&"&"&&# Make whole thing with WASM •Game •CAD •VR / AR WASM+JS for UI development •React Vim component •Game engines •Emulators WASM for speeding up •VPN, Remote desktop •Codecs for audio / video •Image processing
11. Tank! https://webassembly.github.io/demo/
12. SION II HD https://github.com/toyoshim/sion2hd
13. AV1 bitstream analyzer https://medium.com/@mbebenita/av1-bitstream-analyzer-d25f1c27072b#.urjbiliul
14. Vim as a React component http://rhysd.github.io/react-vimjs/
15. WASMSobel screenshot originats from sobel repo
16. How to create WASM files 16 Write directly 
 with binary editors Write WASM in text format (WAST) and convert it Compile C / C++ / Rust codes into WASM
17. Example: counter implemented with WASM VOTJHOFE
    JOU
    DPVOUFS
    
    
    JOU
    JODSFNFOU \
    
    
    SFUVSO
    DPVOUFS
    ^
    17 NPEVMF
    
    NFNPSZ
    
    
    
    EBUB
    JDPOTU
    
    ====
    
    FYQPSU
    NFNPSZ
    NFNPSZ
    
    
    FYQPSU
    @;JODSFNFOUW
    GVOD
    @;JODSFNFOUW
    
    
    GVOD
    @;JODSFNFOUW
    SFTVMU
    J
    
    
    
    
    MPDBM
    
    J
    
    
    
    
    JTUPSF
    PGGTFU
    JDPOTU
    
    
    
    
    
    
    
    UFF@MPDBM
    
    
    
    
    
    
    
    
    
    JBEE
    JMPBE
    PGGTFU
    JDPOTU
    
    JDPOTU
    
    
    
    
    
    HFU@MPDBM
     Compile
18. Example: counter implemented with WASM (continued) NPEVMF
    
    NFNPSZ
    
    
    
    EBUB
    JDPOTU
    
    ====
    
    FYQPSU
    NFNPSZ
    NFNPSZ
    
    
    FYQPSU
    JODSFNFOU
    GVOD
    @;JODSFNFOUW
    
    
    GVOD
    @;JODSFNFOUW
    SFTVMU
    J
    
    
    
    
    MPDBM
    
    J
    
    
    
    
    JTUPSF
    PGGTFU
    JDPOTU
    
    
    
    
    
    
    
    UFF@MPDBM
    
    
    
    
    
    
    
    
    
    JBEE
    JMPBE
    PGGTFU
    JDPOTU
    
    JDPOTU
    
    
    
    
    
    HFU@MPDBM
     18
19. Example: counter implemented with WASM (continued) NPEVMF
    
    JNQPSU
    FOW
    VQEBUF
    GVOD
    VQEBUF
    QBSBN
    J
    
    NFNPSZ
    
    
    EBUB
    JDPOTU
    
    ====
    FYQPSU
    NFNPSZ
    NFNPSZ
    
    
    FYQPSU
    JODSFNFOU
    GVOD
    @;JODSFNFOUW
    
    
    GVOD
    @;JODSFNFOUW
    SFTVMU
    J
    
    
    
    
    MPDBM
    
    J
    
    
    
    
    JTUPSF
    PGGTFU
    JDPOTU
    
    
    
    
    
    
    
    UFF@MPDBM
    
    
    
    
    
    
    
    
    
    JBEE
    JMPBE
    PGGTFU
    JDPOTU
    
    JDPOTU
    
    
    
    
    
    DBMM
    VQEBUF
    
    
    
    
    
    HFU@MPDBM
     19
20. Example: counter implemented with WASM (continued) GFUDI DPVOUFSXBTN
    
    
    
    
    UIFO SFT
    
    SFTBSSBZ#VGGFS
    
    
    
    
    UIFO CVGGFS
    
    8FC"TTFNCMZDPNQJMF CVGGFS
    ѫѫ
    UIFO DPNQJMFE
    
    OFX
    $PVOUFS \
    
    
    
    
    
    
    
    UFNQMBUF
    EPDVNFOURVFSZ4FMFDUPS UFNQMBUF
    
    
    
    
    
    
    
    DPOUBJOFS
    EPDVNFOURVFSZ4FMFDUPS BQQ
    
    
    
    
    
    
    
    XBTN
    DPNQJMFE
    
    
    
    
    ^  20
21. Example: counter implemented with WASM (continued) DMBTT
    $PVOUFS
    \
    
    
    DPOTUSVDUPS \
    UFNQMBUF
    DPOUBJOFS
    XBTN
    ^
    \
    
    
    
    
    UIJTFM
    
    EPDVNFOUJNQPSU/PEF UFNQMBUFDPOUFOU
    USVF 
    
    
    
    
    DPOTU
    JNQPSU
    
    \
    FOW
    \VQEBUF
    WBMVF
    
    UIJTVQEBUF WBMVF
    ^
    
    
    
    
    8FC"TTFNCMZJOTUBOUJBUF XBTN
    JNQPSU
    
    
    
    
    
    
    
    UIFO DPNQJMFE
    
    \
    
    
    
    
    
    
    
    
    
    
    UIJTNPEFM
    
    DPNQJMFE
    UIJTJOJU)BOEMFST 
    
    
    
    
    
    
    
    ^
    
    
    ^ 21
22. Example: counter implemented with WASM (continued) UIJTFMRVFSZ4FMFDUPS <EBUBSPMFDPVOUVQ>
    
    
    
    
    
    
    BEE&WFOU-JTUFOFS DMJDL
    F
    
    \
    
    
    
    
    
    
    
    
    UIJTNPEFMFYQPSUTJODSFNFOU 
    
    
    
    
    
    
    ^  22
23. WASM debugger 
 (available on Firefox Developer Edition / Firefox Nightly)
24. WASM: module definition with 7 section types 24 IUUQTSTNTNFXBTNJOUSP Section type Containts Type Signatures Code Function bodies Import List of imports Export Exported function IDs Data Constants Table Tables (e.g function tables) Start start function
25. WebAssembly Explorer http://mbebenita.github.io/WasmExplorer/
26. How WASM describes: MFU
    B
    
    
    
    
    
     ➔Expressions are described with WASM VM's operators as ◆Abstract syntax tree (as left figure) ◆Sequence of stack operations ➔WASM VM features ◆Typed stack machine ◆i32, i64, f32, f64 operation ◆Direct / indirect function calls ◆Linear memory 26
27. WAST: a text format of WebAssembly NPEVMF
    
    GVOD
    BEE5ISFF
    QBSBN
    J
    SFTVMU
    J
    
    
    
    MPDBM
    B
    J
    
    
    
    TFU@MPDBM
    B
    
    
    
    
    
    
    JBEE
    JDPOTU
    
    JNVM
    JDPOTU
    
    JDPOTU
    
    
    
    
    HFU@MPDBM
    
    
    
    
    HFU@MPDBM
    B
    
    
    
    JBEE
    
    FYQPSU
    BEE5ISFF
    GVOD
    BEE5ISFF
    27
28. Compiler optimization NPEVMF
    
    
    UZQF
    
    GVOD
    QBSBN
    J
    SFTVMU
    J
    
    
    GVOD
    
    UZQF
    
    QBSBN
    J
    SFTVMU
    J
    
    
    
    
    HFU@MPDBM
    
    
    
    
    
    JDPOTU
    
    
    
    
    
    JBEE
    
    
    FYQPSU
    BEE4PNF
    GVOD
     28
29. Liner memory: heap and data segment ➔Byte granularity (8bit) access ➔Little endian ➔64KiB pages, 32bit address space, 4GiB maximum ➔Memory related WASM VM operators ◆HSPX@NFNPSZ: allocates specified pages ◆DVSSFOU@NFNPSZ: returns allocated pages ➔An ArrayBuffer object in JavaScript 29 ,J#  BEESFTT@TQBDF@NBY
30. String in WASM: a sequence of numbers
    
    GVOD
    IJ
    QBSBN
    
    J
    
    
    
    
    JTUPSF
    PGGTFU
    
    
    
    
    
    
    HFU@MPDBM
    
    
    
    
    
    
    
    JDPOTU
    
    
    
    
    
    
    
    
    
    
    JTUPSF
    BMJHO
    
    
    
    
    
    
    HFU@MPDBM
    
    
    
    
    
    
    
    JDPOTU
    
    
    
    
    
    
    
    
    
    
    SFUVSO
    
    
    30 I J = CVG WPJE
    IJ DIBS
    CVG \
    
    
    CVG<>
    
    I
    
    
    CVG<>
    
    J
    
    
    CVG<>
    
    =
    ^
31. Struct in WASM UZQFEFG
    TUSVDU
    1PJOU\
    
    
    GMPBU
    Y
    
    
    GMPBU
    Z
    ^
    1PJOU
    GMPBU
    HFU9 1PJOU
    Q \
    
    
    SFUVSO
    QY
    ^
    GMPBU
    HFU: 1PJOU
    Q \
    
    
    SFUVSO
    QZ
    ^ 31 GVOD
    G
    QBSBN
    WBS
    J
    SFTVMU
    G
    
    
    HFU@MPDBM
    WBS
    
    
    GMPBE
    
    GVOD
    G
    QBSBN
    WBS
    J
    SFTVMU
    G
    
    
    HFU@MPDBM
    WBS
    
    
    GMPBE
    PGGTFU
    
32. Struct in WASM (continued) GVOD
    G
    QBSBN
    WBS
    J
    SFTVMU
    G
    
    
    HFU@MPDBM
    WBS
    
    
    GMPBE
    
    GVOD
    G
    QBSBN
    WBS
    J
    SFTVMU
    G
    
    
    HFU@MPDBM
    WBS
    
    
    GMPBE
    PGGTFU
    32   CZUFT
    PGGTFU WBS
33. Data section: static data area on liner memory EBUB
    JDPOTU
    
    )FMMP
    XPSME=
    EBUB
    JDPOTU
    
    ====
    TOJQ
    JMPBE
    PGGTFU
    JDPOTU
     33 )FMMP
    XPSME= Y CZUF CZUF 1PJOUFS
    UP
    )FMMP
    8PSME=
34. WASM JavaScript API DPOTU
    JNQPSU0CKFDU
    
    \
    
    
    IFMMP
    
    
    DPOTPMFMPH )FMMP
    ^
    GFUDI TBNQMFXBTN UIFO SFTQPOTF
    
    SFTQPOTFBSSBZ#VGGFS
    
    
    UIFO CVGGFS
    
    

    
    
    
    
    8FC"TTFNCMZJOTUBOUJBUF CVGGFS
    JNQPSU0CKFDU
    
    
    UIFO \NPEVMF
    JOTUBODF^
    
    
    
    
    
    
    
    DPOTPMFMPH JOTUBODFFYQPSUTBEE4PNF   34 ArrayBuffer WASM module WASM instance 8FC"TTFNCMZDPNQJMF 8FC"TTFNCMZJOTUBOUJBUF
35. WebAssembly.Module is clonable GVODUJPO
    TUPSF.PEVMF LFZ
    XBTN.PEVMF \
    
    
    MPDBMGPSBHFTFU%SJWF MPDBMGPSBHF*/%&9&%%# 
    
    
    SFUVSO
    MPDBMGPSBHFTFU*UFN LFZ
    XBTN.PEVMF 
    ^
    35 • WebAssemlby.Module can be stored into IndexedDB's object store • The code listed above uses localForage as a interface against IndexedDB • c.f. https://developer.mozilla.org/docs/WebAssembly/Caching_modules
36. WebAssembly.Memory: WASM's linear memory GFUDI TBNQMFXBTN UIFO SFT
    
    SFTBSSBZ#VGGFS UIFO CVG
    
    \
    
    
    DPOTU
    NFNPSZ
    
    OFX
    8FC"TTFNCMZ.FNPSZ \JOJUJBM
    ^
    
    
    DPOTU
    WJFX
    
    OFX
    6JOU"SSBZ NFNPSZCVGGFS 
    
    
    DPOTU
    JOTUBODF
    
    

    
    
    
    
    8FC"TTFNCMZJOTUBOUJBUF CVG
    \JNQPSUT
    \NFNPSZ
    NFNPSZ^ 
    
    
    NFNPSZHSPX  
    
    
    DPOTPMFMPH WJFXMFOHUI 
    
    
    
    
    ^  36
37. Wrap up: WebAssembly is a portable binary program ➔Fast & effective ◆Fast: Ahead of Time (AOT) compilation & compiler optimization ◆Size & load time efficient due to its VM design and binary encode ➔JavaScript API to control WASM module compilation and instantiation ➔NOT a replacement for JavaScript / Flash / Siliverlight etc ➔WASM debugger is available on Firefox 37
38. What WASM does not provide ➔Native binary execution ◆Web browsers are responsible to generate native codes from WASM ◆WASM is a portable binary format ➔Native API call features ➔Binary format but code obfuscation mechanism ◆We can "view source" ◆Text format (WAST) / wasm2wast 38