Você está na página 1de 44

Investigando a aplicabilidade da tecnologia

WebAssembly na implementação de Virtual DOMs


mais eficientes para aplicações web
Trabalho de Graduação em Sistemas de Informação
Investigando a aplicabilidade da tecnologia
WebAssembly na implementação de Virtual DOMs
mais eficientes para aplicações web
Web App
● Eficiente
● Portável
● Compacto
Investigando a aplicabilidade da tecnologia
WebAssembly na implementação de Virtual DOMs
mais eficientes para aplicações web
DOM
Document Object Model
<html> html

<body>
<div class="header"> body
<h1>Hello World!</h1>
</div>
div div
<div class="main">
<span>Content</span>
</div> h1 span

</body>
</html> text text
DOM
Document Object Model
<html> html

<body>
<div class="header"> body
<h1>Hello World!</h1>
</div>
div div
<div class="main">
<span>Content</span>
</div> h1 span

</body>
</html> text text
React
Virtual DOM DOM
html
html

body
body

div div
div div

h1 span
h1 span

text text
text text
Virtual DOM DOM
html
html

body
body

div div
div div

h1 span
h1 span

text text
text text
Virtual DOM DOM
html
html

body
body

div div
div div

span
h1 span

text text
text
Virtual DOM DOM
html
html

body
body

ATUALIZAÇÃO div div


div div

span
h1 span

text text
text
Virtual DOM DOM
html
html

body
body

ATUALIZAÇÃO div div


div div

span
span

text
text
Virtual DOM
html

body ● Memória

div div
● Processamento

span

text
Virtual DOM
html

body ● Memória

div div
● Processamento

span

text
+ = ?
Metodologia
1 2 3 4
Plano GQM Coletar dados de Análise e discussão
Desenvolver protótipo desempenho dos resultados
Plano
Goal, Question, Metric
Objetivo
Analisar a aplicabilidade da tecnologia WebAssembly na
implementação de um Virtual DOM a fim de melhorar a eficiência
de aplicações web do ponto de vista do usuário.
Q1
O quão eficiente é o Virtual DOM
implementado pelo React?
● Tamanho da aplicação
● Tempo de carregamento
● Tempo de execução e renderização
● Consumo de memória
Q2
O quão eficiente pode ser um Virtual DOM
implementado em WebAssembly?
● Tamanho da aplicação
● Tempo de carregamento
● Tempo de execução e renderização
● Consumo de memória
Q3
É possível obter maior eficiência com um Virtual
DOM implementado em WebAssembly frente ao
React em aplicações web?
● Comparação do tamanho da aplicação
● Comparação do tempo de carregamento
● Comparação do tempo de execução e renderização
● Comparação do consumo de memória
1 2 3 4
Plano GQM Coletar dados de Análise e discussão
Desenvolver protótipo desempenho dos resultados
Desenvolvimento do protótipo
React Warc

WebAssembly powered
React Clone
1 2 3 4
Plano GQM Coletar dados de Análise e discussão
Desenvolver protótipo desempenho dos resultados
Coleta de dados
Aplicações

Chrome
DevTools
Coleta de dados
1 2 3 4
Plano GQM Coletar dados de Análise e discussão
Desenvolver protótipo desempenho dos resultados
Q1
O quão eficiente é o Virtual DOM implementado
pelo React?
Q2
O quão eficiente pode ser um Virtual DOM
implementado em WebAssembly?
Q3
É possível obter maior eficiência com um Virtual DOM
implementado em WebAssembly frente ao React em
aplicações web?
Análise dos resultados
Por quê?
Tamanho e tempo de carregamento

20 00 42 00 51 04 7e
42 01 05 20 00 20 00
42 01 7d 10 00 7e 0b

51kB 146kB
Por quê?
Execução e renderização

codificar

decodificar

Profile de execução do Warc


Proposta: Reference types
Por quê?
Consumo de memória

Alocação de
Funções anônimas
Por quê?
Consumo de memória

Fonte: https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen/closure/struct.Closure.html
Proposta: Function references
Conclusão

WebAssembly precisa de melhorias em sua interoperabilidade com


o JavaScript antes que seu uso em Virtual DOMs seja indicado.
Futuro

● Utilização das propostas futuras do WebAssembly


○ Reference types (objetos)
○ Function references (funções anônimas)

● Incluir mais otimizações no Warc


Obrigado!

Você também pode gostar