Beto Muniz Picture

WorkerDOM: O renascimento do AMP

2 min read

Neste artigo você vai descobrir a relação de dois assuntos independentes, mas que se complementam dependendo da ótica que você abordá-los, Accelerated Mobile Pages e WorkerDOM.

E direto ao ponto...

Accelerated Mobile Pages

Accelerated Mobile Pages, ou melhor, AMP, é um framework de normas criadas pelo AMP Project, que através de alguns web components, fornecem soluções para otimização na renderização de páginas web.

O foco principal do AMP Project são dispositivos móveis, mas pela natureza universal da web, a maioria dos efeitos são refletidos no desktop também.

WorkerDOM

A WorkerDOM é uma biblioteca open source JavaScript escrita em TypeScript e criada pelo AMP Project com a proposta de utilizar a Web Worker API para possibilitar o uso de arquiteturas de multiprocessamento (programação multi-thread) no desenvolvimento web.

Atualmente, sem a WorkerDOM, somos limitados a focar apenas na otimização de arquiteturas single-thread para manipulação do DOM para reduzir o custo de processamento.

com a WorkerDOM, podemos também otimizar a velocidade de processamento, uma vez que a biblioteca almeja oferecer todas as APIs de manipulação contidas no Document Object Model (DOM) via Web Workers para que assim seja possível criar instâncias (threads) secundárias do DOM para manipulações intermediárias do mesmo e deixar apenas mutações necessárias para a instância principal do DOM.

Por fim, a WorkerDOM nos permite utilizar todos os recursos de processamento disponíveis e adotar vantagens da programação concorrente na web, que principalmente em dispositivos móveis, são imediatamente perceptíveis.

O renascimento do AMP com WorkerDOM

Apesar do envolvimento do AMP Project na criação da biblioteca WorkderDOM, por sua natureza conceitual, a biblioteca não será integrada como solução exclusiva do AMP Project, mas sim com uma recomendação de uso genérico no desenvolvimento web, ou seja, sem dependência dos AMP Web Components.

E nesta perspectiva, vemos que a biblioteca WorkerDOM é um passo adiante na missão de oferecer uma melhor experiência para o usuário e uma renovação dos meios de abordagem do AMP Project, oferencendo mais perspectiva de futuro e poder para o mesmo.

Toda via, já é possível experimentar a biblioteca WorkerDOM em conjunto com React, Angular, Vue ou com as atuais soluções do AMP Project.

Demos

Não irei desenvolver nenhuma demonstração prática, pois no repositório da biblioteca WorkerDOM existem uma variedade delas, porém destaco a react-map e a filtered-hydration, pois respectivamente exemplificam a interoperabilidade com ferramentas atuais do mercado e com técnicas recomendadas pelo AMP Project.

Bônus: WorkerDOM vs VDOM

Como não é o foco do post, vou deixar um link nas referências explicando o que é VDOM (Virtual DOM), mas como estamos falando sobre isolamento do processamento de operações no DOM em instâncias independentes da main thread do DOM, é comum confundir WorkerDOM e VDOM, porém no caso do WorkerDOM, mesmo isolando as operações DOM em threads diferentes, as operações de manipulação do DOM continuarão acontecendo, ou seja, VDOM e WorkerDOM podem coexistir. E certamente é algo sem precedentes em termos de performance na manipulação do DOM.

E era isso pessoal, se gostou do post e do assunto, deixa um comentário.

Referências