Melhores práticas em Angular - 5 Dicas importantes

Sobre o framework

Desde que comecei a estudar Angular, senti uma vontade renovada de me aprofundar no mundo do front-end. Apesar de ter uma curva de aprendizado um pouco mais acentuada em comparação à outras ferramentas como React e Vue, o Angular é extremamente completo e se torna relativamente simples quando se acostuma com sua organização e estrutura de arquivos.

Neste artigo, vamos abordar cinco pontos importantes que podem te ajudar a entender melhor e adicionar performance para esse framework incrível.

 1 - Disposição de módulos

Quando definir seus provedores e serviços de seus componentes, é uma boa idéia separá-los em módulos principais chamados Core Module e Shared Module, desta forma você organiza de maneira eficiente os serviços, diretivas e pipes que serão utilizados de forma exclusiva em certos componentes e outros que são compartilhados entre várias partes do seu código. A organização de pastas pode, mas não necessariamente deve, ser a seguinte:

Core Module: app/core/core.module.ts

Shared Module: app/shared/shared.module.ts 

Você pode ainda criar outros módulos específicos para outras finalidades, como Config Module, Home Module, etc. Use mais dessa funcionalidade que deixa o seu projeto extremamente organizado e conciso.

 2 - Cuidado com os Observables

Os Observables são muito importantes para tratar dados de forma assíncrona em nossa aplicação, e o fazem de maneira muito eficiente. Porém, criar subscribes sem um controle eficaz pode gerar o chamado "Memory Leak".

Para evitar isso, podemos usar o pipe "async", dessa forma a inscrição do Observable é destruida juntamente com o componente, exemplo:

<ul>
 <li *ngFor="let time of times | async">{{ time.name }}</li>
</ul>

 3 - Utilize o Index.ts

O arquivo index.ts acaba sendo esquecido quando construímos aplicações menores, mas não subestime sua utilidade, ele pode reduzir a quantidade de imports de módulos no seu Core Module. Exemplo:

times/index.ts:
 export * from './time.ts';  // exporta o meu Model
 export * from './time.service.ts'; // exporta o meu serviço
 export { TimeComponent } from './time.component.ts'; // exporta o arquivo logico do meu componente

 import { Time, TimeService, TimeComponent } from '../times';

4 - Crie seus pipes

Utilizar pipes é uma maneira bem eficiente de tratar dados em nossos componentes, mas poucos têm o costume de criar seus próprios pipes, e isso pode ajudar a melhorar a performance de sua aplicação quando você os utiliza no lugar de métodos, por exemplo: precisamos criar uma forma de adicionar um pronome de tratamento antes do nome de uma pessoa. 

Normalmente criaríamos um método no arquivo .ts do nosso componente para tratar a string do nome inserido, mas temos outra forma de fazer isso criando um pipe chamado "Tratamento", por exemplo. Ele identifica o gênero pelas strings "M" ou "F", e adiciona o pronome. O código seria mais ou menos assim:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
 name: 'tratamento',
})

export class TratamentoPipe implements PipeTransform {
 transform(value: string): any {
if (value === 'M') {
 return 'Sr.';
} else {
 return 'Sra.';
}
 }
}

5 - Parâmetro trackBy

Quando usamos a diretiva *ngFor para listar algo, ele irá renderizar novamente todos os elementos em nossa lista em qualquer mudança que seja feita à ela. Isso diminui a performance e para evitar isso podemos usar o parâmetro 'trackBy', que por padrão compara os elementos da lista por identidade, como ID e nome, e renderiza apenas os elementos diferentes. Exemplo de utilização:

*ngFor="let time of times; trackBy: trackByFn"

A função pode ser alterada para atender à nossa demanda e as características de nossos elementos.