Hoje publicamos a segunda parte da tradução do artigo, que contém um conjunto de recomendações para desenvolvedores Angular. Na
parte anterior, 11 dicas foram apresentadas, e consideraremos a mesma quantidade.
1. Pequenos componentes adequados para reutilização
Encontre fragmentos nos componentes que podem ser reutilizados e crie novos componentes com base neles. Torne os componentes o mais burros possível, pois isso permitirá que eles sejam usados em mais cenários. Um componente "estúpido" é aquele que não contém nenhuma lógica específica, cuja operação depende apenas dos dados de entrada fornecidos a ele.
Ao trabalhar com componentes, a regra geral a seguir deve ser respeitada: o componente aninhado mais profundo na árvore de componentes deve ser o mais "estúpido".
▍ Explicações
Reutilizar componentes reduz a duplicação de código, o que simplifica o suporte e as alterações do projeto.
Componentes estúpidos são mais simples que outros, por isso é menos provável que erros apareçam neles. O uso desses componentes faz com que o desenvolvedor pense melhor sobre a API aberta do componente e ajuda a resolver problemas.
2. Sobre as tarefas resolvidas pelos componentes
Sempre que possível, evite a presença nos componentes da lógica que não sejam os usados para visualizar dados.
▍ Explicações
Os componentes são projetados como ferramentas para apresentar informações e controlar como as interfaces devem funcionar. Qualquer lógica de negócios deve ser removida dos componentes e colocada, quando possível, em métodos ou serviços separados, separando assim a lógica de negócios da lógica da apresentação de informações.
A lógica de negócios, quando apresentada como serviços separados, geralmente é mais fácil para o teste de unidade. Com essa abordagem, ela pode ser reutilizada por diferentes componentes que precisam dos mesmos recursos.
3. Sobre ótimos métodos
Se o código do método for muito longo, isso geralmente indica que esse módulo resolve muitos problemas. Talvez um método como uma entidade independente resolva apenas um problema, mas dentro dele pode haver um código que executa várias operações diferentes. Esse código pode ser emitido na forma de métodos separados, cada um dos quais, novamente, deve resolver um único problema, após o qual esses métodos devem ser usados em vez dos fragmentos de código correspondentes no método original.
▍ Explicações
Métodos de código longo são difíceis de ler, entender e manter. Além disso, esses métodos são propensos a erros, pois a alteração de um deles pode afetar muitos outros mecanismos do método. Código longo significa refatoração mais complicada e essa operação é muito importante em qualquer aplicativo.
Nesse sentido, podemos mencionar um indicador como a
complexidade ciclomática do programa . Existem
regras do TSLint para identificar a complexidade ciclomática que podem ser usadas em um projeto para evitar erros que possam aparecer no código que é muito complexo. Com a ajuda deles, você pode avaliar a qualidade do código e evitar possíveis problemas com seu suporte.
4. Princípio SECO
DRY (Não se repita, não repita) é um princípio que deve ser seguido para garantir que em locais diferentes do projeto não haja cópias dos mesmos fragmentos de código. Esses fragmentos de código devem ser criados na forma de entidades independentes, métodos, por exemplo, e usar suas chamadas onde o código repetido foi usado anteriormente.
▍ Explicações
Se o mesmo código for usado em locais diferentes do aplicativo, isso levará ao fato de que, se você precisar fazer alterações nesse código, precisará fazer isso em muitos lugares. Como resultado, o programa será mais difícil de manter, estará sujeito a erros relacionados, por exemplo, ao fato de que nem todos os fragmentos do mesmo código foram editados corretamente. Além disso, aumenta o tempo necessário para fazer alterações no código e testá-lo.
Se você encontrar algo semelhante - formate o código repetido como uma entidade independente e use-o em vez de repetir fragmentos. Isso levará ao fato de que para fazer alterações, você precisará fazer edições em apenas um local e, durante o teste, precisará testar apenas um trecho de código, não vários. Além disso, quanto menos código duplicado no aplicativo, mais rápido ele será baixado pelos usuários.
5. Mecanismos de armazenamento em cache
Ao fazer chamadas para várias APIs, você notará que as respostas de algumas delas quase nunca mudam. Nesses casos, você pode adicionar ferramentas de armazenamento em cache de dados ao programa e armazenar no cache o retorno de APIs semelhantes. Ao executar a próxima solicitação, você pode acessar o cache e, se ele já tiver o que você precisa, poderá usar esses dados e, se não precisar do que é, execute a solicitação real e coloque uma resposta no cache.
Se os dados recebidos de determinadas APIs mudarem em alguns intervalos, você poderá armazená-los em cache por um certo tempo. Como resultado, ao fazer uma solicitação para essas APIs, será possível decidir de onde obter os dados necessários.
▍ Explicações
Ter um mecanismo de armazenamento em cache permite evitar solicitações de API desnecessárias. Se as chamadas do aplicativo para a API forem realizadas apenas quando absolutamente necessário, e os dados que o aplicativo já recebeu não forem solicitados novamente, o desempenho da solução melhorará, principalmente porque ele não precisa esperar constantemente pelas respostas de determinados serviços de rede. Essa abordagem permite, além disso, economizar tráfego, uma vez que os mesmos dados não são baixados repetidamente.
6. Padrões lógicos
Se seus modelos tiverem pelo menos alguma lógica, mesmo uma expressão simples
&& , essa lógica deverá ser extraída e colocada no componente apropriado.
▍ Explicações
Se o modelo tiver lógica, isso significa que ele não poderá ser submetido a testes de unidade e, portanto, aumentará a probabilidade de erros ao alterar o código do modelo.
▍Para
// <p *ngIf="role==='developer'"> Status: Developer </p> // public ngOnInit (): void { this.role = 'developer'; }
▍Depois
// modelo
<p * ngIf = "showDeveloperStatus"> Status: desenvolvedor
// public ngOnInit (): void { this.role = 'developer'; this.showDeveloperStatus = true; }
7. Trabalhe com linhas
Se você tiver uma variável do tipo sequência, que pode ter valores de um conjunto limitado, em vez de declará-la como uma sequência regular, especifique uma lista de valores possíveis ao declará-la.
▍ Explicações
Uma descrição bem pensada do tipo de variável permite simplificar a detecção e eliminação de erros, pois com essa abordagem eles são detectados no estágio de compilação do programa e não no tempo de execução.
▍Para
private myStringValue: string; if (itShouldHaveFirstValue) { myStringValue = 'First'; } else { myStringValue = 'Second' }
▍Depois
private myStringValue: 'First' | 'Second'; if (itShouldHaveFirstValue) { myStringValue = 'First'; } else { myStringValue = 'Other' } // Type '"Other"' is not assignable to type '"First" | "Second"' (property) AppComponent.myValue: "First" | "Second"
8. Sobre o gerenciamento do estado do aplicativo
Considere usar
@ ngrx / store para controlar o estado do seu aplicativo e
@ ngrx / effects para implementar efeitos colaterais. Mudanças de estado são descritas por ações e executadas por funções puras chamadas redutores.
▍ Explicações
O @ ngrx / store isola a lógica relacionada ao estado do aplicativo em um único local e o torna uniforme em todo o projeto. Além disso, existe um mecanismo de memorização que funciona ao trabalhar com armazenamento, o que melhora o desempenho do aplicativo. O mecanismo @ ngrx / store, combinado com a estratégia de detecção de alterações da Angular, leva a aplicativos mais rápidos.
9. Sobre imutabilidade do estado da aplicação
Ao usar @ ngrx / store, considere usar a
biblioteca ngrx-store-freeze para tornar o estado do aplicativo imutável. Essa biblioteca evita mutações de estado lançando exceções. Isso evita alterações acidentais no estado do aplicativo que levam a consequências imprevisíveis.
▍ Explicações
A alteração do estado do aplicativo nos componentes leva ao fato de que o comportamento do aplicativo muda dependendo da ordem em que os componentes são carregados. Isso viola o modelo mental do modelo redux. Como resultado, as alterações podem ser redefinidas se o estado do repositório mudar e o trabalho subsequente com ele já estiver usando o novo estado. Aqui, aplicamos o princípio da separação de responsabilidades, segundo o qual os componentes estão no nível da apresentação e eles não devem saber como alterar o estado do aplicativo.
10. Ferramentas de teste de aplicativos
Use ferramentas especializadas para testar aplicativos. Entre eles estão
Jest e
Karma .
▍ Explicações
Jest é uma estrutura de aplicativo de teste de unidade desenvolvida pelo Facebook. Ele suporta mecanismos de execução de testes paralelos, o que acelera o trabalho. Devido ao fato de ele poder levar em consideração as alterações na base de código, na próxima sessão de teste, apenas os testes relacionados ao código alterado são executados. Isso melhora a capacidade de analisar os resultados dos testes. Além disso, o Jest fornece métricas de cobertura de teste e é suportado pelo editor de código VS e pelo IDE WebStorm.
O corredor de teste do Karma foi desenvolvido pela equipe do AngularJS. Para executar os testes, ele precisa de um navegador e DOM reais. Karma permite que você execute testes em vários navegadores. O Jest, por sua vez, não precisa, por exemplo, de um navegador Chrome sem uma interface de usuário ou phantom.js, pois apenas a plataforma Node.js. é necessária para que essa estrutura funcione.
11. Renderização do servidor
Se você ainda não usou
a tecnologia
Angular Universal , agora é a hora de testá-la. Ele permite que você organize a renderização no servidor de aplicativos Angular. Como resultado, páginas HTML estáticas pré-renderizadas são enviadas ao usuário. Isso torna os aplicativos incrivelmente rápidos, pois seu conteúdo aparece nos navegadores quase instantaneamente devido ao fato de o navegador não precisar baixar e analisar pacotes JS e perder tempo, garantindo a operação dos mecanismos angulares.
Além disso, os aplicativos angulares renderizados no servidor têm vantagens sobre os aplicativos regulares em termos de CEOs. O Angular Universal cria páginas estáticas, e isso facilita para os mecanismos de pesquisa indexar essas páginas, pois eles não precisam executar o código JavaScript para formar páginas.
▍ Explicações
O uso do Angular Universal pode melhorar drasticamente o desempenho do aplicativo. Recentemente, atualizamos nosso aplicativo, adicionando recursos de renderização ao servidor. Isso levou a uma redução no tempo de carregamento do site de alguns segundos para dezenas de milissegundos.
Além disso, graças a essa abordagem, as páginas são exibidas corretamente nas áreas de visualização de conteúdo usadas nas redes sociais. O tempo para a primeira exibição de página significativa (Primeira pintura significativa) é muito curto, o que evita que os usuários esperem desnecessariamente.
Sumário
Desenvolvimento de aplicativos é o caminho pelo qual o programador constantemente encontra oportunidades para melhorar o que ele cria. Você, seguindo esse caminho, pode aproveitar as dicas fornecidas aqui para otimizar aplicativos Angular. Temos certeza de que sua aplicação consistente beneficiará qualquer equipe de desenvolvimento e que o resultado resultante atrairá os usuários, pois, do ponto de vista deles, isso levará ao fato de que eles trabalharão com aplicativos mais estáveis e produtivos.
Caros leitores! Se você puder compartilhar dicas úteis para melhorar aplicativos com a comunidade de desenvolvedores Angular, faça isso.
