JS Experience 2017 - WebAssembly na Prática

WEBASSEMBLY NA PRÁTICA
Desmistificando o binário na Web

NOVO PROJETO DO
CRIADOR DO
JAVASCRIPT:
MATAR
O JAVASCRIPT

O WebAssembly é um novo tipo de código que
pode ser executado em browsers modernos — se
trata de uma linguagem de baixo nível como
assembly, com um formato binário compacto que
executa com performance quase nativa e que
fornece um novo alvo de compilação para
linguagens como C/C++, para que possam ser
executadas na web. Também foi projetado para
executar em conjunto com o JavaScript, permitindo
que ambos trabalhem juntos.
https://developer.mozilla.org/pt-BR/docs/WebAssembly

editor de vídeo online
pesquisas na última década

const asmModule = (() => {
'use asm';
function acrescentarUnidade(valor) {
valor = valor |0;
return valor + 1 |0;
}
return acrescentarUnidade;
})();
js com superpoderes
de baixo nível

// heap de memória com 10 slots para guardar valores de 8 bits
const HEAP8 = new Int8Array(10);
// alocando um valor em um endereço de memória
HEAP8[0] = 1;
// liberando um endereço de memória
HEAP8[0] = 0;
gerenciamento de
memória

● Compile Target para C/C++
● Não precisa recompilar para
diferentes plataformas
● Executa em Sandbox
● Não é um plugin
● Funciona mal em browsers sem
suporte
● Performance quase nativa
deu

deu ● Sem multithread com memória
compartilhada
● Boilerplate enorme
● Não tem SIMD
● Herda limitações do JavaScript

arquivos menores
graças ao formato binário e instruções limitadas
download
download

1 byte a cada 8 bits
valores hexadecimais para diminuir o payload
0xa4 0xd5 0x0f
1010 0100 1101 0101 0000 1111

magic number
padrão utilizado para indicar o tipo do binário
0x00
o
0x61
a
0x73
s
0x73
m

vetores
identificando os blocos de operações
02 01 01
tamanho do bloco
opcodes, section id,
dados, etc

parse mais rápido
menos tokens com AST mais simples
download
download parse

i n s t r u ç õ e s p a r a
escritas para ser entendidas
por
mentes
humanas

(module
(func (param $a i32) (param $b i32) (result i32)
(i32.add
(get_local $a)
(get_local $b)
)
)
)
s-expression
instruções de máquina escritas para humanos

()
delimitador
para agrupar instruções

(ação argumentos)
instruções
instruções podem conter outras instruções

(module
(func (param $a i32) (param $b i32) (result
i32)
(i32.add
(get_local $a)
(get_local $b)
)
)
)

(module
i32)
(i32.add
(get_local $a)
(get_local $b)
)
)
)
module

(module
i32)
(i32.add
(get_local $a)
(get_local $b)
)
)
)
module
func

(module
i32)
(i32.add
(get_local $a)
(get_local $b)
)
)
)
module
func
signature

(module
i32)
(i32.add
(get_local $a)
(get_local $b)
)
)
)
module
func
param $a
signature

(module
i32)
(i32.add
(get_local $a)
(get_local $b)
)
)
)
module
func
param $a param $b
signature

(module
i32)
(i32.add
(get_local $a)
(get_local $b)
)
)
)
module
func
param $a param $b result i32
signature

(module
i32)
(i32.add
(get_local $a)
(get_local $b)
)
)
)
body
module
func
signature

(module
i32)
(i32.add
(get_local $a)
(get_local $b)
)
)
)
body
i32.add
module
func
signature

(module
i32)
(i32.add
(get_local $a)
(get_local $b)
)
)
)
body
i32.add
get_local $a
module
func
signature

(module
i32)
(i32.add
(get_local $a)
(get_local $b)
)
)
)
body
i32.add
get_local $bget_local $a
module
func
signature

compila mais rápido
sem presunções de tipos e menos dinamismos
download
download parse compila
compila

execução mais rápida
instruções simples feitas para máquina
download
compila
executa
executa

stack machine
basicamente adiciona e remove valores da stack
(i32.add
(i32.const 3)
(i32.const 2)
)

stack machine
(i32.add
(i32.const 3)
(i32.const 2)
) stack

stack machine
virtual
(i32.add
(i32.const 3)
(i32.const 2)
)
3
stack

stack machine
(i32.add
(i32.const 3)
(i32.const 2)
)
2
3
stack

stack machine
(i32.add
(i32.const 3)
(i32.const 2)
)
5
stack

sem garbage collector
gerenciamento de memória talvez mais eficiente
download
compila
executa
executa
GC

otimização aot
lembra que não é dinâmico?
download
compila
executa
executa
GC otimiza

não nos
preocupamos
com a memória

não precisa ser
zica em
matemáticas

linguagem escrita
para humanos

desenvolviment
o é mais rápido

Centro
Rua São José, 90
Sala 2121
(21) 2240-2030
Cidade Monções
Av. Nações Unidas,
11.541 - 3º andar
(11) 4119-0449
Savassi
Av. Getúlio Vargas, 671
Sala 800 - 8º andar
(31) 3360-8900
www.concrete.com.b
r

JS Experience 2017 - WebAssembly na Prática

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (10)

Semelhante a JS Experience 2017 - WebAssembly na Prática

Semelhante a JS Experience 2017 - WebAssembly na Prática (20)

Mais de iMasters

Mais de iMasters (20)

JS Experience 2017 - WebAssembly na Prática