AngularJS #17 - Aumentando a Performance - Parte 2 - Rodrigo Branas

a sejam todos muito bem vindos à continuação da série sobre irs bruno rodrigo branã saltou do livro em 2d é seis shows e hoje no 17º episódio a gente vai continuar falando sobre performance vamos conversar com o toque bairro sempre define o truque bairro quando for utilizar o ingênuo e pedir o ng o bicho tá tem um grande grande performance associado ao uso do cheque bairro ponte que vai já existe há bastante tempo na verdade foi introduzido na versão 1. 1 1. 4 ea versão de 2013 então já faz um certo tempo e aí muita gente já teve problemas com o cheque bahia quer ver um exemplo imagine nesse caso aqui eu tenho um ligeiro e pitty e aí eu faço contato em contatos né então tô fazendo essa renderização aqui e aí muita gente que usa o windows no dia a dia já deve ter caído na seguinte situação eu tenho um elemento repetido olha só estou pegando o primeiro elemento dessa lista e inserindo no final da mesma lista você vai ver que nesse caso ele tinha a seguinte mensagem olha tem um elemento duplicado aqui isso não é permitido né use o craque bairro para especificar uma chave única tá bom isso acontece muito se você fizer um ligeiro e pitty baseado numa lista de streams numa lista de objetos em que você está tentando de alguma forma reaproveita a mesma instância tá bom tá bom um jeito que vai resolver isso né que não é o jeito definitivo é fazer um chek vai você até pode usar essa estratégia sei que ela resolve clã pára de repente numa lista de streamings né já se você tiver dois tempos iguais pode usar essa estratégia quando você tem mios de distinguir os objetos por exemplo eu tenho aids não é o contato pontuais de então eu posso colocar o contato pontue dia aqui e aí você vai ver que vai voltar o problema já que eu tenho uma duplicação entre o primeiro eo último elemento então realmente nesse caso eu não poderia ter se eu quisesse teria que usar realmente o tek bond index mas assim eu consigo rastrear cada elemento bom onde está o impacto de performance isso é muito simples eu vou forçar por meio de um botão em que eu vou fazer o seguinte ó ng clique igual à do eset provou redefinir essa lista inteira tá eu redefini essa lista sente aqui vai pra você ver o impacto em termos de performance bom vou criar uma função aqui chamada horizonte e aí você sabe que o angola ele tem a possibilidade de você utilizar uma p e dentre as operações existe o cope então embora ponto cop ele vai copiar os contatos bom então eu vou trocar essas referências se não tocar referência vai fazer diferença alguma neve já que o truque bairro deixou acontece o referência tá então vou fazer aqui uma cópia dos dois e você vai perceber o seguinte ó vamos analisar o tempo levado pelos ciclos notificação quando faço um reset olha só como esse tempo está bem alto a 9.

396. 548 por trás disso vamos analisar os elementos né fica mais fácil sem o craque bairro pessoal que vai se repara que sempre que o reserva essa lista olha só eu forço uma interação com a dom para que eles sejam renderizadas novamente apesar de serem os mesmos tá você vê que eu tenho um feedback visual aqui nos meus elementos e aí o ângulo vai ter que rodar o ciclo de novo para reavaliar cada um deles né e aí vai ter que é gastar desnecessariamente lembra que a gente falou do episódio passado o grande plano de performance é gastar desnecessariamente recursos com coisas que não seriam saias tá bom então nesse caso estou gastando e aí pra evitar esse comportamento e evitar é que o tempo desse ciclo seja tão alto a gente pode então voltar à ideia do track bairro e aí você vai ver que nos elementos eu não vou renderizar de novo olha só como não tem um feedback visual aqui dessa vez então qualquer qualquer ideia tá é claro que vai depender de implementação da implementação ganho de performance mas vamos supor que você tem uma lista como essa e sempre que você adiciona um novo contato você vai no backhand salvo contato e faz de repente é uma renderização de novo de tudo você vai lá e obtém a lista completa e renderiza novamente esse é um cenário que você vai ganhar bastante performance já que é a maior parte dos alimentos que já estão liberalizados por exemplo uma lista de cem elementos e coloca mais um então você vai deixar de renderizar de novo sem alimentos focando só naquele que mudou tá bom então o truque vai acabar sendo uma boa ideia tá legal vamos falar um pouco então de filtros é o filtro é na minha opinião acaba sendo um grande vilão quando a gente fala em performance está época por conta claro do mecanismo do ciclo de notificação do freiburg ele acaba sendo chamado de uma forma misra gerada e vou te mostrar agora com essa ideia tá se imagina então que a gente tem aqui ó a interpolação de uma variável essa variável que é a variável app que está em risco então coloquei app aqui fiz um refresh vamos analisar agora pelo console né e aí ela tá lá até então você não está percebendo mudança nenhum né e eu vou aplicar um filtro e vou começar a ver o que acontece então vou aplicar um filtro e eu vou é o chamado ppi senhora que ele a pesquisa nessa ver que vou render e agora vai quebrar porque o filtro apenas existe né então eu vou criar esse filtro tá bom olha só dentro aqui djs filtros eu vou criar o perfil ter ponto js tá legal vamos então o nosso index não criar seu perfil é um perfil e aí em vigor módulo lista telefônica filtro a gente falou bastante sobre a criação de filtros e episódios anteriores mas basicamente o filtro ele retorna uma função que recebe o input e retorna alguma coisa que você faz com que se impute essencialmente é um tipo de componente que transforma tá bom que vou fazer aqui input ponto to peer case certo uma função bem simples né lembra que se não houver um input você não vai querer votar nada se não dá problema né legal mínima isso faço um refresh então é legal todo esse cara aqui em letra maiúscula tá agora analisa que a gente tem que fazer é o seguinte queremos saber quantas vezes então a call center é igual a zero o console ponto love cauter mais mais assim eu consigo saber quantas vezes efetivamente essa função foi invocada tá faça um refresh não sabia que já foram olha só seis vezes está possivelmente fora e seis vezes em que o ciclo foi executado né e aí você começa a observar perceber que cada vez que começa a interagir com a aplicação olha só que legal estou usando normalmente está coordenando de novo né clicando na sede é em pouquíssimo tempo de operação a gente achava mais de 30 vezes um mesmo filtro então isso acontece por conta da forma como tio e do trabalho funciona baseado na índia de check in o embargo é obrigado a ficar reavaliando né alguns tipos de interpolação e com isso evocando os filtros de novo tá aí pessoal a gente chega num cenário em que é legal avaliar bom a pesado se tiver pesado eu recomendo que você tinha esse filtro aqui da vila e passe a aplicá lo diretamente no controle está então eu posso trazer o filtro para cá e aí fazer um filtro o filtro basicamente vai permitir com que você construa qualquer tipo de filtro disponível na sua aplicação tá então eu vou dizer o nome desse filtro nesse caso é óbvio né e aí repara isso aqui vai me retornar uma função que é exatamente essa função do filtro tá bom na sequência eu vou passar o primeiro parâmetro que é o input simples não estivessem mais parâmetro passaria na sequência tá então desse jeito olha só chamei apenas uma única vez esse filtro independente ó da interação que eu tenho com esse aplicativo tá bom então isso faz com que você usa o recurso de um jeito mais racional sem dúvida alguma claro que ele pode trazer alguns prejuízos o primeiro deles seria bom é muito mais fácil aplicar o filtro diretamente navios e ver que aqui já tem um pouco mais de trabalho né e também claro de certa forma a gente quer facilidade o nosso dia-a-dia desenvolvimento ninguém que é é dificultar as coisas imagina se todos os filtros e ver que aqui eu tenho filtro de carnes é é a que eu tenho filtro de desde então muitas vezes sentem interesse em passar tudo isso o controle e nem deveria ter o que tem que fazer é analisar se a degradação de performance tá certo então basicamente o que vai mandar é o quanto de performance sendo degradada e aí você embasa a sua decisão de implementação nisso bom então cuidado com os filtros tá os filtros ele sem dúvida alguma é podem trazer problemas se mal utilizados principalmente filtros privados quando pensa em filtros uma lista a coisa pode se complicar ainda mais se a gente for falar se pouco mas eu tenho uma lista com mil elementos assim elementos vão ser constantemente filtrados né então mais um motivo para se pensar em aplicar isso no controle tá bom na sequência vamos falar da diferença de mg es preencho então se sabe a gente já falou no episódio é que falava sobre diretivas que o ng e fili interage com a dom ou seja ele adiciona e remove elementos por meio da don nichol só manipula propriedades é como display como dando panone ou não para mudar a visibilidade do elemento tá e aí acaba sendo uma dúvida muito constante né seu uso e enfim o seu uso o show já que eles têm aparentemente o mesmo comportamento é para quem está de fora vê simplesmente elementos é é sendo escondido ou aparecendo na decorrente do uso de show e diz bom vamos pegar esse caso aqui olha só tem um nome e cpf telefone e data agora se imagina que eu tivesse aqui mais um campo então vou colocar um campo chamado select e vou dizer que esse campo aqui é o ng móvel igual a contato ponto tipo é eu quero pra simplesmente dizer se isso aqui é uma pessoa jurídica uma pessoa física então eu tenho lá um vazio selecione o tipo e aí eu vou muito bem bem direto tá pessoa física e pessoa jurídica de novo aí eu vou selecionar um ou vou selecionar o outro tá então você começa a perceber que os campos vão mudar ó eu tenho aqui nome e cpf vou colocar uma dívida e vamos começar com o ng e com o time já está aqui embaixo só parece esse bloco aqui se contato ponto tipo for igual a pessoa física então por aí já viu né não tem nada que quem pessoa física parecer esses dois campos e aí na sequência eu vou ter algo bem só que para a pessoa jurídica em vez de nome vai ser nome fantasia é ao invés de cpf cnpj cnpj e aí eu vou botar um campo mais vou colocar um campo mais chamado razão social social social e razão social é perfeito fiz um refresh então se for física tem dois campos se for jurídica tem outros três bombas e aí qual será a melhor implementação vem pra cá fazer refresh aqui vamos analisar duas coisas tá bom eu tenho 19 waters aqui certo e o ciclo né e 2. 650 ponto 2005 quando eu seleciono pessoa física você repara o seguinte eu levei 8.

825 de segundos realmente houve uma degradação nesse ponto na hora que eu escolhi eu levei mais tempo que eu tive obviamente que interage com a dom para introduzir novos elementos não é para quando eu troco também à la 7.