Olá Habr!Hoje eu queria abordar o tópico do código correto ao trabalhar com o Angular. Essas recomendações tornarão seu código mais eficaz na prática, além de permitir que eu seja menos exigente no código júnior.
1. Evite lógica nos padrões
E a primeira coisa que quero mencionar é a lógica nos modelos. Se você tem algum tipo de lógica em seus modelos, mesmo que seja simples &&, é útil extraí-la para seu componente. A presença de lógica no modelo significa que é impossível testá-lo e, portanto, é mais propenso a erros ao alterar o código do modelo.
<p *ngIf="isShow"> Example </p>
public ngOnInit(): void { this.isShow = true; }
2. Linhas "seguras"
Suponha que você tenha uma variável do tipo string que pode ter apenas um conjunto específico de valores. Em vez de declará-lo como um tipo de sequência, você pode declarar essa mesma lista de valores possíveis como um tipo.
private value: 'One' | 'Two'; if (isShow) { value = 'One'; } else { value = 'Two' }
Ao declarar o tipo de uma variável dessa maneira, podemos evitar erros ao escrever código em tempo de compilação, em vez de em tempo de execução.
3. A regra dos métodos longos
Aqui está uma demonstração de código é redundante. É importante entender que ninguém gosta de métodos longos.
Métodos longos geralmente indicam que eles fazem muitas coisas. É possível que o próprio método faça uma coisa, mas dentro dele existem várias outras operações que podem ser colocadas em outro método que possui seu próprio objetivo lógico. Métodos longos são difíceis de ler, entender e manter. Eles também são propensos a erros, pois alterar uma coisa pode afetar muitas outras coisas nesse método. Tenho certeza de que, não somente para mim, esses métodos tornam a refatoração (que é a chave em qualquer aplicativo) mais difícil do que poderia ser.
4. Duplicação de código
Se você tiver um código que se repita em diferentes locais do projeto. Extraia o código repetido em um método separado e use-o em vez do código repetido.
O problema com a duplicação de código é que, se queremos fazer alterações na lógica desse código, precisamos fazê-lo em vários lugares. Isso dificulta a manutenção do código, o que, por sua vez, aumenta o risco de erros. Também leva mais tempo para fazer alterações na lógica. Com menos código duplicado, o aplicativo será mais rápido.
5. trackBy
Vamos diluir a lista de sutilezas de trabalhar com Angular.
Freqüentemente usado pelo ngFor para iterar sobre uma matriz em modelos, geralmente é privado na prática de uma função como trackBy. Use-o no trabalho com ngFor. Graças a essa ninharia, você receberá um identificador exclusivo para cada elemento.
<li *ngFor="let item of items; trackBy: trackByFn">{{ item }}</li>
trackByFn(index, item) { return item.id;
Quando a matriz muda, o Angular exibe novamente a árvore DOM inteira. Mas se você usar trackBy, o Angular saberá qual elemento foi alterado e alterará apenas o DOM desse elemento em particular.
6. Inscreva-se no modelo
Preste atenção ao exemplo de assinatura do componente observado:
<p>{{ text }}</p>
blablaObservable .pipe( map(value => value.item), takeUntil(this._destroyed$) ) .subscribe(item => this.text = item);
Agora você viu como não fazê-lo. Não pedi que você seguisse estritamente minhas recomendações, apenas os desenvolvedores frequentemente não se aprofundam no que está acontecendo em seu código. Então, por que é ruim e como se sai bem? O fato é que corremos o risco de cancelar a inscrição acidentalmente de uma assinatura em um componente, o que pode levar a um vazamento de memória. A melhor opção é usar uma assinatura no próprio modelo:
<p>{{ text$ | async }}</p>
this.text$ = blablaObservable .pipe( map(value => value.item) );
Graças à assíncrona, não precisamos nos preocupar com o cancelamento da inscrição, porque isso ocorre automaticamente, e isso simplifica o código, eliminando a necessidade de gerenciar manualmente as assinaturas. Também reduz o risco de cancelar a inscrição acidentalmente do componente mencionado acima.
7. carregamento preguiçoso
Sempre que possível, use o carregamento lento do módulo em seu aplicativo Angular. O carregamento lento é quando você baixa algo apenas quando é usado, por exemplo, carregando um componente apenas quando você precisa vê-lo. Isso reduzirá o tamanho do aplicativo para download e pode melhorar o tempo de carregamento do aplicativo sem carregar os módulos que não estão em uso.
// app.routing.ts
{ path: 'dashboard', loadChildren: 'lazy-load.module#DashboardModule' }
8. Assinatura dentro da assinatura
Às vezes, você pode precisar de valores de mais de um observável para concluir uma ação. Nesse caso, evite assinar um observável no bloco de inscrição de outro observável. Em vez disso, use os operadores de encadeamento apropriados. As instruções da cadeia são executadas em observáveis a partir da instrução na frente deles. Alguns operadores de cadeia, como withLatestFrom, combineLatest, etc ...
Para:
oneObservable$.pipe( take(1) ) .subscribe(oneValue => { twoObservable$.pipe( take(1) ) .subscribe(twoValue => { console.log([oneValue, twoValue].join(', ')); }); });
Depois:
oneObservable$.pipe( withLatestFrom(twoObservable$), first() ) .subscribe(([oneValue, twoValue]) => { console.log([oneValue, twoValue].join(', ')); });
9. Cache
Ao fazer solicitações para a API, as respostas de algumas delas geralmente não são alteradas. Nesses casos, você pode adicionar um mecanismo de armazenamento em cache e salvar o valor da API. Quando a solicitação deve ser repetida para a mesma API, verifique se ela possui um valor no cache e, se houver, use-a. Caso contrário, faça uma chamada de API e armazene em cache o resultado. Se necessário, você pode inserir o tempo do cache, onde poderá verificar quando foi a última vez e decidir se deseja chamar a API. Ter um mecanismo de armazenamento em cache evita solicitações de API indesejadas. Devido a essa solicitação de duplicação, a velocidade do aplicativo é aprimorada, pois não precisamos esperar por uma resposta e, assim, baixar as mesmas informações repetidamente.
10. Esmagando em componentes reutilizáveis
Divida os componentes grandes em outros menores. Simplifique esses componentes e torne-os o mais burros possível, pois isso os fará funcionar em mais cenários. A criação de um componente desse tipo significa que o componente não possui nenhuma lógica especial e funciona apenas com base nas entradas e saídas fornecidas a ele. Normalmente, o último descendente na árvore de componentes será o mais simples de todos. Isso é feito com base na facilidade de uso desses componentes, é menos provável que esses componentes obtenham erros. Componentes reutilizáveis também reduzem a duplicação de código, o que facilita a manutenção e a alteração.
Deseja continuar com essa coluna?