WebAssembly
![](https://s3.amazonaws.com/media-p.slid.es/uploads/295321/images/4273634/WebAssembly_Logo.jpg)
@ethebault
![](https://upload.wikimedia.org/wikipedia/fr/thumb/c/c8/Twitter_Bird.svg/1259px-Twitter_Bird.svg.png)
![](https://jobs.zenika.com/wp-content/uploads/2017/05/LOGO-rond-ROUGE-gris_horizontal_sanstagline.png)
Demo
![](https://d32xvgr96w2oxp.cloudfront.net/2013/06/media-image-346120-article-ajust_930.jpg)
Il était une fois
le web
1995
![](https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/1200px-Unofficial_JavaScript_logo_2.svg.png)
![](https://2.imimg.com/data2/WE/TT/MY-/6-250x250.jpg)
Avenir du web (1995)
![](http://c861135.r35.cf2.rackcdn.com/HelloWorldApplet.jpg)
- Abandonné par les navigateurs
- Déprécié en Java 9
![](http://s2.quickmeme.com/img/be/be121b5083222db005c900544ce4e34af9907bcfa6cf6d2cf1c70f75b5d67b5f.jpg)
DHTML
Fin 90
![](https://www.online-sciences.com/wp-content/uploads/2016/08/Dynamic-HTML-10.gif)
![](https://images-na.ssl-images-amazon.com/images/I/51TUVM0TvZL._SX379_BO1,204,203,200_.jpg)
Optimisation
![](https://cdn-images-1.medium.com/max/800/1*ksFQo_CqXyvEkFFcXEtMRg.png)
ASM JS
Ajout d'un ensemble d'instruction
- Typage des variable
- Gestion manuelle de la mémoire
Web Assembly
enfin...
Annoncé en 2015
Demo en 2016
Supporte par les navigateurs
depuis mi 2017
Cas d'utilisation
- Edition d'image/vidéo
- Réalité augmenté
- Machine learning
- Server web local
- Application hybride native pour mobile
- ...
MVP
- Iso-fonctionnel avec ASM
- Module WASM
- Instructions "assembleurs"
- Format binaire
- Format texte (assembleur, debuggeur)
- Implementations
- navigateurs
- mobile
- IOT device
- serveur
Runtime
![](https://s3.amazonaws.com/media-p.slid.es/uploads/295321/images/4285309/WebAssembly.png)
WASM
0000000: 0061 736d ; WASM_BINARY_MAGIC
0000004: 0100 0000 ; WASM_BINARY_VERSION
; section "Type" (1)
0000008: 01 ; section code
0000009: 00 ; section size (guess)
000000a: 02 ; num types
; type 0
000000b: 60 ; func
000000c: 01 ; num params
000000d: 7f ; i32
000000e: 00 ; num results
; type 1
000000f: 60 ; func
0000010: 00 ; num params
0000011: 00 ; num results
0000009: 08 ; FIXUP section size
; section "Import" (2)
0000012: 02 ; section code
0000013: 00 ; section size (guess)
0000014: 01 ; num imports
; import header 0
0000015: 07 ; string length
0000016: 696d 706f 7274 73 imports ; import module name
000001d: 0d ; string length
000001e: 696d 706f 7274 6564 5f66 756e 63 imported_func ; import field name
000002b: 00 ; import kind
000002c: 00 ; import signature index
0000013: 19 ; FIXUP section size
; section "Function" (3)
000002d: 03 ; section code
000002e: 00 ; section size (guess)
000002f: 01 ; num functions
0000030: 01 ; function 0 signature index
000002e: 02 ; FIXUP section size
; section "Export" (7)
0000031: 07 ; section code
0000032: 00 ; section size (guess)
0000033: 01 ; num exports
0000034: 0d ; string length
0000035: 6578 706f 7274 6564 5f66 756e 63 exported_func ; export name
0000042: 00 ; export kind
0000043: 01 ; export func index
0000032: 11 ; FIXUP section size
; section "Code" (10)
0000044: 0a ; section code
0000045: 00 ; section size (guess)
0000046: 01 ; num functions
; function body 0
0000047: 00 ; func body size (guess)
0000048: 00 ; local decl count
0000049: 41 ; i32.const
000004a: 2a ; i32 literal
000004b: 10 ; call
000004c: 00 ; function index
000004d: 0b ; end
0000047: 06 ; FIXUP func body size
0000045: 08 ; FIXUP section size
wast2wasm module.wast -v
Format binaire
- Taille
- Temps de chargement
- Cible la vitesse d’exécution d'une app native
- "Sécurité"
WAST
(func (;18;) (type 5) (param i32 i32)
get_global 14
i32.const 0
i32.eq
if ;; label = @1
get_local 0
set_global 14
get_local 1
set_global 15
end)
(func (;19;) (type 3) (param i32)
get_local 0
set_global 25)
(func (;20;) (type 2) (result i32)
get_global 25
return)
WABT
WebAssembly Build Tool
wast2wasm module.wast -o module.wasm
WAST
WASM
Demo
![](https://s3.amazonaws.com/media-p.slid.es/uploads/295321/images/6045150/demo_cat.jpg)
Inutilisable !!!
![](https://m5.paperblog.com/i/76/760850/the-worlds-top-10-best-images-of-surprised-ca-L-m4S40p.jpeg)
Utilisation d'un langage de
"haut niveau"
Langages compatibles
![](https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Rust_programming_language_black_logo.svg/1200px-Rust_programming_language_black_logo.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/295321/images/6045161/logo_c_plus.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/295321/images/6045160/logo_c.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/295321/images/6053659/assemblyscript.png)
C#:Blazor
LLVM
![](https://s3.amazonaws.com/media-p.slid.es/uploads/295321/images/4285637/llvm-fr.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/295321/images/4285722/c_file.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/295321/images/4285723/compiler.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/295321/images/4285738/binary_file.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/295321/images/4285723/compiler.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/295321/images/4285738/binary_file.png)
Source file
LLVM Compiler
*.s
LLVM IR files
WebAssembly
Compiler
*.wasm
Pas simple
![](http://p9.storage.canalblog.com/95/44/492412/80185792_o.jpg)
git clone https://github.com/juj/emsdk.git
cd emsdk
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh
emcc hello.c -s WASM=1 -s NO_EXIT_RUNTIME=1 -g4 -o index.js
emrun --no_browser --port 8080 .
![](https://s3.amazonaws.com/media-p.slid.es/uploads/295321/images/4285722/c_file.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/295321/images/4285738/binary_file.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/295321/images/4285723/compiler.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/295321/images/4285832/js_file.png)
Demo
![](http://i.imgur.com/JBwf1.jpg)
Lecteur audio FLAC
- Décodeur flac
- API Audio
![](https://xiph.org/flac/images/logo130.gif)
LibFlac
- autogen
- configure
- make
=> Réussir à le compiler normalement !!!
API Multimedia
![](https://s3.amazonaws.com/media-p.slid.es/uploads/295321/images/4414882/Capture_d__cran_de_2017-12-06_13-59-11.png)
![](http://kripken.github.io/emscripten-site/_images/FileSystemArchitecture.png)
API Fichier
A suivre
- Threads
- Exception handling
- Garbage collection
- ECMAScript module integration
- Autres langages/compilateurs
![](https://s3.amazonaws.com/media-p.slid.es/uploads/295321/images/6054253/WASI.png)
Merci
Web Asembly (BrestJS)
By erwann thebault
Web Asembly (BrestJS)
- 1,304