20170319-wasm

WebAssembly - Web is a new compiler target FOSSASIA |
Mar 19th, 2017 | Mozilla TechSpeaker N.Shimizu (@chikoski)

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

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/#speciﬁcation-webassembly Under development https://blogs.windows.com/msedgedev/2016/03/15/previewing- webassembly-experiments

WASM features ➔Fast and safety execution ➔Load and size efficiency
➔Portability ➔Text representation (WAST) ➔JavaScript API 8

IUUQTIBDLTNP[JMMBPSHXFCBTTFNCMZCSPXTFSQSFWJFX

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

Tank! https://webassembly.github.io/demo/

SION II HD https://github.com/toyoshim/sion2hd

AV1 bitstream analyzer https://medium.com/@mbebenita/av1-bitstream-analyzer-d25f1c27072b#.urjbiliul

Vim as a React component http://rhysd.github.io/react-vimjs/

WASMSobel screenshot originats from sobel repo

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

Example: counter implemented with WASM VOTJHOFEJOUDPVOUFS JOUJODSFNFOU \ SFUVSO DPVOUFS
^ 17 NPEVMF NFNPSZ EBUB JDPOTU ==== FYQPSUNFNPSZ NFNPSZ FYQPSU@;JODSFNFOUW GVOD@;JODSFNFOUW GVOD@;JODSFNFOUW SFTVMUJ MPDBMJ JTUPSFPGGTFU JDPOTU UFF@MPDBM JBEE JMPBEPGGTFU JDPOTU JDPOTU HFU@MPDBM Compile

Example: counter implemented with WASM (continued) NPEVMF NFNPSZ
EBUB JDPOTU ==== FYQPSUNFNPSZ NFNPSZ FYQPSUJODSFNFOU GVOD@;JODSFNFOUW GVOD@;JODSFNFOUW SFTVMUJ MPDBMJ JTUPSFPGGTFU JDPOTU UFF@MPDBM JBEE JMPBEPGGTFU JDPOTU JDPOTU HFU@MPDBM 18

Example: counter implemented with WASM (continued) NPEVMF JNQPSUFOWVQEBUF GVODVQEBUF
QBSBNJ NFNPSZ EBUB JDPOTU ==== FYQPSUNFNPSZ NFNPSZ FYQPSUJODSFNFOU GVOD@;JODSFNFOUW GVOD@;JODSFNFOUW SFTVMUJ MPDBMJ JTUPSFPGGTFU JDPOTU UFF@MPDBM JBEE JMPBEPGGTFU JDPOTU JDPOTU DBMMVQEBUF HFU@MPDBM 19

Example: counter implemented with WASM (continued) GFUDI DPVOUFSXBTN UIFO
SFTSFTBSSBZ#VGGFS UIFO CVGGFS8FC"TTFNCMZDPNQJMF CVGGFS ѫѫUIFO DPNQJMFEOFX$PVOUFS \ UFNQMBUFEPDVNFOURVFSZ4FMFDUPS UFNQMBUF DPOUBJOFSEPDVNFOURVFSZ4FMFDUPS BQQ XBTNDPNQJMFE ^ 20

Example: counter implemented with WASM (continued) DMBTT$PVOUFS\ DPOTUSVDUPS \UFNQMBUF DPOUBJOFS
XBTN^ \ UIJTFMEPDVNFOUJNQPSU/PEF UFNQMBUFDPOUFOU USVF DPOTUJNQPSU\FOW\VQEBUFWBMVFUIJTVQEBUF WBMVF ^ 8FC"TTFNCMZJOTUBOUJBUF XBTN JNQPSU UIFO DPNQJMFE\ UIJTNPEFMDPNQJMFEUIJTJOJU)BOEMFST ^ ^ 21

Example: counter implemented with WASM (continued) UIJTFMRVFSZ4FMFDUPS <EBUBSPMFDPVOUVQ> BEE&WFOU-JTUFOFS
DMJDL F\ UIJTNPEFMFYQPSUTJODSFNFOU ^ 22

WASM debugger   (available on Firefox Developer Edition / Firefox
Nightly)

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

WebAssembly Explorer http://mbebenita.github.io/WasmExplorer/

How WASM describes: MFUB ➔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

WAST: a text format of WebAssembly NPEVMF GVODBEE5ISFF QBSBNJ
SFTVMUJ MPDBMBJ TFU@MPDBMB JBEE JDPOTU JNVM JDPOTU JDPOTU HFU@MPDBM HFU@MPDBMB JBEE FYQPSUBEE5ISFF GVODBEE5ISFF 27

Compiler optimization NPEVMF UZQF GVOD QBSBNJ
SFTVMUJ GVOD UZQF QBSBNJ SFTVMUJ HFU@MPDBM JDPOTU JBEE FYQPSUBEE4PNF GVOD 28

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

String in WASM: a sequence of numbers GVODIJ QBSBNJ
JTUPSFPGGTFU HFU@MPDBM JDPOTU JTUPSFBMJHO HFU@MPDBM JDPOTU SFUVSO 30 I J = CVG WPJEIJ DIBS CVG \ CVG<>I CVG<>J CVG<>= ^

Struct in WASM UZQFEFGTUSVDU1PJOU\ GMPBUY GMPBUZ ^1PJOU GMPBUHFU9 1PJOU Q
\ SFUVSOQY ^ GMPBUHFU: 1PJOU Q \ SFUVSOQZ ^ 31 GVODG QBSBNWBSJ SFTVMUG HFU@MPDBMWBS GMPBE GVODG QBSBNWBSJ SFTVMUG HFU@MPDBMWBS GMPBEPGGTFU

Struct in WASM (continued) GVODG QBSBNWBSJ SFTVMUG HFU@MPDBMWBS
GMPBE GVODG QBSBNWBSJ SFTVMUG HFU@MPDBMWBS GMPBEPGGTFU 32 CZUFTPGGTFU WBS

Data section: static data area on liner memory EBUB JDPOTU
)FMMP XPSME= EBUB JDPOTU ==== TOJQ JMPBEPGGTFU JDPOTU 33 )FMMP XPSME= Y CZUF CZUF 1PJOUFSUP)FMMP 8PSME=

WASM JavaScript API DPOTUJNQPSU0CKFDU\ IFMMP DPOTPMFMPH )FMMP ^ GFUDI
TBNQMFXBTN UIFO SFTQPOTF SFTQPOTFBSSBZ#VGGFS UIFO CVGGFS  8FC"TTFNCMZJOTUBOUJBUF CVGGFS JNQPSU0CKFDU UIFO \NPEVMF JOTUBODF^ DPOTPMFMPH JOTUBODFFYQPSUTBEE4PNF 34 ArrayBuﬀer WASM module WASM instance 8FC"TTFNCMZDPNQJMF 8FC"TTFNCMZJOTUBOUJBUF

WebAssembly.Module is clonable GVODUJPOTUPSF.PEVMF LFZ XBTN.PEVMF \ MPDBMGPSBHFTFU%SJWF MPDBMGPSBHF*/%&9&%%#
SFUVSOMPDBMGPSBHFTFU*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

WebAssembly.Memory: WASM's linear memory GFUDI TBNQMFXBTN UIFO SFTSFTBSSBZ#VGGFS UIFO CVG\
DPOTUNFNPSZOFX8FC"TTFNCMZ.FNPSZ \JOJUJBM^ DPOTUWJFXOFX6JOU"SSBZ NFNPSZCVGGFS DPOTUJOTUBODF  8FC"TTFNCMZJOTUBOUJBUF CVG \JNQPSUT\NFNPSZNFNPSZ^ NFNPSZHSPX DPOTPMFMPH WJFXMFOHUI ^ 36

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

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

20170319-wasm

20170319-wasm

More Decks by chikoski

Other Decks in Technology

Featured

Transcript