Vi um framework que trabalhava com Virtual DOM e por esse fato se tornava mais rápido que os demais. (framework : facebook reactjs)
Qual é a vantagem e desvantagem em cada um? Como se trabalha com cada um?
Exemplo em js puro
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeDOM é a representação dos compomentes na página. Você manipula o DOM a fim de manipular estes componentes (criar, recriar, alterar seu estado).
Virtual DOM é um framework para manipulação do DOM.
Virtual DOM oferece três recursos:
Deste modo, utilizando Virtual DOM você:
Não necessariamente é mais rápido. Ele pode ser mais rápido se o teu código para verificar e manipular o DOM não for tão eficiente quanto o código dele.
Como DOM e Virtual DOM são duas coisas distintas, não há como compará-los.
O que pode ser comparado é o Virtual DOM com outro mecanismo para manipular o DOM (JavaScript puro, JQuery ou outros frameworks como BackboneJS e AngularJS).
Neste caso, sobre a vantagem do Virtual DOM, embora a propaganda do React seja de que ele é mais rápido por usar Virtual DOM, a propaganda do próprio Virtual DOM diz que sua principal vantagem é a organização do código, que o deixa mais significativo, e a capacidade que ele te oferece de se focar em outras coisas que não a manipulação do DOM. É claro que ele afirma também que faz tudo isso de maneira muito performática.
Ir além na lista de vantagens e desvantagens me parece entrar no opinativo, e eu nem posso opinar porque nunca usei Virtual DOM.
Obtido do repositório do Virtual DOM no GitHub.
var h = require('virtual-dom/h');
var diff = require('virtual-dom/diff');
var patch = require('virtual-dom/patch');
var createElement = require('virtual-dom/create-element');
// 1: Cria a função que declara como o DOM deve ser
function render(count) {
return h('div', {
style: {
textAlign: 'center',
verticalAlign: 'center',
lineHeight: (100 + count) + 'px',
border: '1px solid red',
width: (100 + count) + 'px',
height: (100 + count) + 'px'
}
}, [String(count)]);
}
// 2: Inicializa o documento
var count = 0; // Precisamos de algum dado do aplicativo. Aqui nós apenas armazenamos um contador.
var tree = render(count); // Nós precisamos de uma árvore inicial (representação do DOM)
var rootNode = createElement(tree); // Cria um nó raiz DOM inicial a partir da representação...
document.body.appendChild(rootNode); // ... e adiciona o nó raiz no documento
// 3: Dispara a lógica de atualização
setInterval(function () {
// atualiza o dado do aplicativo
count++;
// passando como parâmetro o dado atualizado, recria uma árvore completa para representar a view
var newTree = render(count);
// compara a representação recém criada com o DOM real e obtém as diferenças
var patches = diff(tree, newTree);
// aplica as diferenças no DOM real
rootNode = patch(rootNode, patches);
tree = newTree;
}, 1000);
Traduzido do repositório do Virtual DOM no GitHub.
Manipulação manual do DOM é uma bagunça e manter o controle do estado anterior do DOM é difícil. Uma solução para este problema é escrever seu código como se você estivesse recriando o DOM inteiro toda vez que o estado mudasse. Claro, se você de fato recriasse o DOM inteiro toda vez que o estado da aplicação mudasse, seu aplicativo seria muito lento e os seus campos de entrada perderiam o foco.
Virtual-DOM é uma coleção de módulos designados para prover uma forma declarativa de se representar o DOM. Então em vez de atualizar o DOM quando o estado da sua aplicação muda, você simplesmente cria uma árvore virtual (ou "VTRee"), a qual se parece com o estado que você deseja para o DOM. Virtual-DOM vai então descobrir como fazer o DOM ficar igual a esta árvore virtual (com o mesmo estado dela) de maneira eficiente, sem recriar todos os nós do DOM.
Virtual-DOM permite a você atualizar a view sempre que o estado mude através da recriação completa da VTRee da view e através da eficiente atualização do DOM para que ele se pareça exatamente como você o descreveu. Isto resulta em manter a manipulação manual do DOM e também o rastreamento de estado fora do seu código, promovendo uma lógica de renederização limpa e de fácil manutenção para aplicativos Web.
Outras fontes:
Virtual DOM, nada mais é que um Mini DOM, que é uma pequena parte do DOM, que seria a recriação dos objetos DOM utilizados contendo apenas o conteúdo necessário, e deixando de lado todas as partes do DOM que não vão ser utilizadas.
E então temos um objeto menor e desvinculado do DOM, por isso podemos modifica-lo e utiliza-lo muito mais rapidamente, sem necessidade nenhuma de ficar acessando o DOM novamente, apenas em algumas pequenas ocasiões, mas de forma muito rápida.
Por isso você pode entender que o Virtual DOM é mais rápido, afinal o que seria melhor, manipular um pequeno objeto desvinculado ou manipular um objeto dentro do DOM que é uma imensa arvore de objetos?
A vantagem dele é esta performance que é obtida mediante a estes fatos, sua desvantagem seria não ser tão completo como o DOM, mas acredito que isto não seria um problema, pois há muita coisa no DOM para que você consiga utiliza-lo por completo.
Mas não só isso, o Virtual DOM também se torna mais fácil de dar manutenção, por ser mais compacto e menos complexo.
Há alguns frameworks e algumas libs que estão utilizando atualmente o virtual-dom, dentre elas cito algumas:
Código em Virtual Dom:
var tree = virtualH('footer', {
id: 'footer',
className: 'footer'
}, [
virtualH('span', {
id: 'todo-count',
className: 'todo-count'
}, [
virtualH('strong', String(todosLeft)),
todosLeft === 1 ? ' item' : ' items',
' left'
]),
virtualH('ul', {
id: 'filters',
className: 'filters'
}, [
virtualLink('#/', 'All', route === 'all'),
virtualLink('#/active', 'Active', route === 'active'),
virtualLink('#/completed', 'Completed', route === 'completed')
]),
virtualH('button', {
id: 'clear-completed',
className: 'clear-completed',
hidden: todosCompleted === 0
}, 'Clear completed (' + String(todosCompleted) + ')')
]);
return tree;
Código em Dom:
var tree = domH('footer', {
id: 'footer',
className: 'footer'
}, [
domH('span', {
id: 'todo-count',
className: 'todo-count'
}, [
domH('strong', String(todosLeft)),
todosLeft === 1 ? ' item' : ' items',
' left'
]),
domH('ul', {
id: 'filters',
className: 'filters'
}, [
domLink('#/', 'All', route === 'all'),
domLink('#/active', 'Active', route === 'active'),
domLink('#/completed', 'Completed', route === 'completed')
]),
domH('button', {
id: 'clear-completed',
className: 'clear-completed',
hidden: todosCompleted === 0
}, 'Clear completed (' + String(todosCompleted) + ')')
]);
return tree;
Fonte: JSPERF
No site tem um test case.