Como funciona por debaixo dos panos o data-binding do Angular e como ele consegue atualizar o HTML de forma tão rápida um input para a declaração com {{}}
e não só no Angular, mas também em outros casos como EmberJS. Sei que ele usa o dirty-checking, mas como exatamente funciona esses dois casos?
1 Resposta
Primeiro responderei quanto ao dirty-checking, no caso do angular, uma vez que um objeto esteja atrelado ao escopo, todos os valores do estado atual do objeto são guardados e o objeto é "marcado". A cada ciclo de $digest
, o angular verifica as alterações e replica para todos os lugares que se referenciavam para a mesma variável no escopo.
Quando você utiliza o {{expressao}}
no angular, o que ele faz é marcar esta posição de substituição na tela, para que após a o ciclo de $digest
, se houver alteração, ela seja aplicada na expressão.
Quanto ao EmberJS, o mesmo utiliza "change listeners" que fazem uma análise da alteração apenas, e não de todos os objetos demarcados no escopo, isso traz um grande ganho em relação a desempenho que vou falar abaixo.
Então, posto os dois conceitos, qual a diferença e no que isso implica?
No caso no Angular, todas os atributos contidos são comparados com suas respectivas versões originais para dizer se algo foi mudado ou não, isso é bom no aspecto de que tudo foi verificado, é uma comparação, não tem como dar errado, por outro lado, ela é ruim em performance. Quando uma mudança é encontrada, o angular se encarrega de disparar efetivamente o evento informando que aquilo foi alterado, e os listeners na tela efetuam a atualização.
No caso do EmberJs, uma alteração dispara um evento para atualização nos pontos específicos da aplicação, não é necessário verificar se algo mudou, pois já existe um listener que é avisado quando isso acontece. Isso claramente implica em uma melhoria de performance. A questão aqui está no suporte ao navegador, que nem sempre é feito da mesma forma.
Caso queira extender um pouco mais a questão, deixo este link que além de explicar sobre a técnica utiliza no Angular e no Ember, ainda explica sobre o React: http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html
-
O artigo linkado foi adicionado ao meu pocket para uma leitura com calma. Mas a resposta está excelente. Obrigado.– flpmsCommented 12/11/2015 às 18:33
-
Caso tenha alguma dúvida adicional, não deixe de complementar a questão. Commented 12/11/2015 às 18:59