Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • Investigando A Aplicabilidade Da Tecnologia WebAssembly Na Implementação de Virtual DOMs Mais Eficientes para Aplicações Web (Apresentação)

    Загружено:

    Vinicius Cardoso Garcia
    53 просмотров44 страницы
    Trabalho de Conclusão de Curso apresentado ao Sistemas de Informação, como parte dos requisitos necessários à obtenção do título de Bacharel em Sistemas de Informação. Resumo: O React, uma ferramenta bastante utilizada no desenvolvimento de aplicações web, utiliza o mecanismo de Virtual DOM (Virtual Document Object Model) para otimizar atualizações à interface de usuário. Apesar de trazer benefícios, seu uso também exige um maior consumo de memória e processamento, o que pode afetar a qualidade da experiência do usuário. Com isso, novas iniciativas aplicam a tecnologia WebAssembly (Wasm) em virtual DOMs para atingir maior eficiência, porém exigem o uso de linguagens como C++ e Rust na construção de aplicações web. Portanto, este trabalho propõe o desenvolvimento do Warc, uma biblioteca baseada no React que permite que aplicações JavaScript adotem um virtual DOM implementado em WebAssembly. Foi realizada uma análise comparativa entre a eficiência do React e Warc com base em testes de benchmark para verificar a aplicabilidade de WebAssembly na implementação de Virtual DOMs mais eficientes. Com a análise dos resultados, concluiu-se que apesar do WebAssembly ter diminuído o tamanho e o tempo de carregamento da aplicação, limitações em sua interoperabilidade com o JavaScript causaram um desempenho inferior em comparação ao React. A perspectiva para futuros trabalhos é continuar avaliando o amadurecimento da tecnologia WebAssembly antes que seu uso em virtual DOMs reais seja indicado. Palavras-chave: Virtual DOM, WebAssembly, React.

    Оригинальное название

    Investigando a aplicabilidade da tecnologia WebAssembly na implementação de Virtual DOMs mais eficientes para aplicações web (Apresentação)

    Авторское право

    © Attribution Non-Commercial ShareAlike (BY-NC-SA)

    Доступные форматы

    PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ
    Trabalho de Conclusão de Curso apresentado ao Sistemas de Informação, como parte dos requisitos necessários à obtenção do título de Bacharel em Sistemas de Informação. Resumo: O React, uma ferramenta bastante utilizada no desenvolvimento de aplicações web, utiliza o mecanismo de Virtual DOM (Virtual Document Object Model) para otimizar atualizações à interface de usuário. Apesar de trazer benefícios, seu uso também exige um maior consumo de memória e processamento, o que pode afetar a qualidade da experiência do usuário. Com isso, novas iniciativas aplicam a tecnologia WebAssembly (Wasm) em virtual DOMs para atingir maior eficiência, porém exigem o uso de linguagens como C++ e Rust na construção de aplicações web. Portanto, este trabalho propõe o desenvolvimento do Warc, uma biblioteca baseada no React que permite que aplicações JavaScript adotem um virtual DOM implementado em WebAssembly. Foi realizada uma análise comparativa entre a eficiência do React e Warc com base em testes de benchmark para verificar a aplicabilidade de WebAssembly na implementação de Virtual DOMs mais eficientes. Com a análise dos resultados, concluiu-se que apesar do WebAssembly ter diminuído o tamanho e o tempo de carregamento da aplicação, limitações em sua interoperabilidade com o JavaScript causaram um desempenho inferior em comparação ao React. A perspectiva para futuros trabalhos é continuar avaliando o amadurecimento da tecnologia WebAssembly antes que seu uso em virtual DOMs reais seja indicado. Palavras-chave: Virtual DOM, WebAssembly, React.

    Авторское право:

    Attribution Non-Commercial ShareAlike (BY-NC-SA)
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    53 просмотров44 страницы

    Investigando A Aplicabilidade Da Tecnologia WebAssembly Na Implementação de Virtual DOMs Mais Eficientes para Aplicações Web (Apresentação)

    Загружено:

    Vinicius Cardoso Garcia
    Trabalho de Conclusão de Curso apresentado ao Sistemas de Informação, como parte dos requisitos necessários à obtenção do título de Bacharel em Sistemas de Informação. Resumo: O React, uma ferramenta bastante utilizada no desenvolvimento de aplicações web, utiliza o mecanismo de Virtual DOM (Virtual Document Object Model) para otimizar atualizações à interface de usuário. Apesar de trazer benefícios, seu uso também exige um maior consumo de memória e processamento, o que pode afetar a qualidade da experiência do usuário. Com isso, novas iniciativas aplicam a tecnologia WebAssembly (Wasm) em virtual DOMs para atingir maior eficiência, porém exigem o uso de linguagens como C++ e Rust na construção de aplicações web. Portanto, este trabalho propõe o desenvolvimento do Warc, uma biblioteca baseada no React que permite que aplicações JavaScript adotem um virtual DOM implementado em WebAssembly. Foi realizada uma análise comparativa entre a eficiência do React e Warc com base em testes de benchmark para verificar a aplicabilidade de WebAssembly na implementação de Virtual DOMs mais eficientes. Com a análise dos resultados, concluiu-se que apesar do WebAssembly ter diminuído o tamanho e o tempo de carregamento da aplicação, limitações em sua interoperabilidade com o JavaScript causaram um desempenho inferior em comparação ao React. A perspectiva para futuros trabalhos é continuar avaliando o amadurecimento da tecnologia WebAssembly antes que seu uso em virtual DOMs reais seja indicado. Palavras-chave: Virtual DOM, WebAssembly, React.

    Авторское право:

    Attribution Non-Commercial ShareAlike (BY-NC-SA)
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 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!

    Вам также может понравиться