Neste blog, aprenderemos sobre as melhores práticas de Desenvolvimento Angular e garanto que você certamente aprenderá algo com este blog.
Angular é uma estrutura de aplicativo da Web gratuita e de código aberto baseada em TypeScript. Vamos aprender um por um.
Se você quiser saber mais sobre o novo recurso do angular, consulteaqui.
1. Evite "qualquer" tipo
Uma linguagem de verificação de tipo é Typescript. No entanto, pode haver outras situações, como quando exigimos conteúdo dinâmico ou quando não temos certeza do tipo de dados preciso de algumas variáveis. Nessas circunstâncias, podemos notificar o typescript de que a variável pode ser de qualquer tipo usando o tipo de dados 'any'.
Mas não é uma boa ideia sempre usar “any”. Qualquer instrução no typescript para ignorar a verificação de tipo. Portanto, isso pode colocar seu código em risco de problemas caros, difíceis de rastrear e difíceis de depurar.
const number_1: qualquer = 1; const number_2: qualquer = 3; const string_1: qualquer = ‘a’; const number_3: qualquer = number_1 + number_2; console.log(`O valor de number_3 é:', number_3); // Valor de saída de number_3 é 13Como podemos superar isso definindo seu tipo conforme mencionado abaixo
const number_1: number = 1;const number_2: number = 3;const string_1: string = 'a';const number_3: number = number_1 + number_2;console.log(`Value of number_3 is:', number_3);// OutputValue de number_3 é 13Se dermos o tipo errado a qualquer constante, obteremos o erro de tempo de compilação
const number_1: number = 1;const string_1: number = 'a';// Isso dará um erro de compilação dizendo:error TS2322: Type 'string' is not assignable to type 'number'.const string_1: number2. Use os recursos do ES6
ES6 significa ECMAScript 6, que oferece novos recursos e sintaxe para criar códigos mais contemporâneos e compreensíveis. Ele está sempre sendo atualizado com novos recursos e funcionalidades. A programação JavaScript é simplificada com recursos ES6 como Let e Const, Arrow Functions e interpolação de strings.
3. Use trackBy junto com ngFor
Um aplicativo angular que usa simplesmente a diretiva *ngFor sem a função trackBy destruirá todos os elementos DOM e os reconstruirá na árvore DOM. Portanto, mesmo quando os mesmos dados estão sendo usados, ter muitos dados fará com que o programa seja executado lentamente. As diretivas trackBy e *ngFor devem ser usadas juntas por causa disso.
Em Component.ts
trackByUserCode(index: number, user: any): string {return user.code;}Em Component.html
*ngFor='deixar usuário de usuários; trackBy:trackByUserCode'>4. Use carregamento lento
O processo de carregamento de vários módulos, como documentos, JS, CSS, vídeos, fotos, etc., é conhecido como carregamento lento. Dividir o tempo de carregamento do aplicativo em vários pacotes e carregá-los conforme necessário acelera o tempo de carregamento do aplicativo. O carregamento lento pode ser útil ao carregar um aplicativo grande, em vez de utilizar outras funções para carregar os módulos.
Quando qualquer coisa é usada, o carregamento lento apenas a carrega. Em vez de carregar o componente conforme especificado nas configurações de rotas AppRoutingModule, podemos apenas usar a função de carregamento lento para loadChildren. Uma das melhores práticas angulares é carregar lentamente ou carregar um determinado recurso do aplicativo quando necessário, e não quando o aplicativo é iniciado.
rotas const: Rotas = [{ path: 'users', loadChildren: () => import('./modules/users/user.module').then(m => m.UserModule)}];5. Evite vazamentos de memória em observável angular
O primeiro componente é removido e o segundo componente é inicializado quando passamos de um componente para o próximo. Portanto, o componente inicial, que se inscreveu no Observable, agora foi removido. Isso pode resultar em vazamentos de memória.
No entanto, podemos evitar isso seguindo técnicas
1. Usando takeUntil()
Levar atémonitora os segundos Observables, e quando o valor dos observables for gerado, ele se desfará da assinatura e o ciclo estará completo.
this.authService.GetUserList() .pipe(takeUntil(this.ngUnsubscribe)) .subscribe(res => {this.userList = res;});......ngOnDestroy() { this.ngUnsubscribe.next() ; this.ngUnsubscribe.complete();}2. Usando o canal Async
Ele retorna ao valor mais recente que foi emitido após a assinatura de um Observable ou Promise.
*ngFor="let item of userService.GetUserList() | async";{{item.userName}}3. Usando take(1)
Isso garante que você receba os dados apenas uma vez.
this.userService.GetUserList() .pipe(take(1)) .subscribe(res = {this.userList = res;})6. Evite a lógica nos modelos
Toda a lógica de negócios relacionada ao modelo pode ser isolada em um componente, mesmo quando as chamadas de função em modelos angulares estão tecnicamente corretas. Isso ajuda nos testes de unidade e também reduz os problemas caso ocorra uma alteração de modelo no futuro.
7. Declarar tipos de dados seguros
O primeiro passo será confirmar as categorias de dados e o intervalo de valores que contém. Depois disso, a variável aceitará apenas os valores possíveis. Podemos declarar uma variável como uma lista de valores potenciais ou um tipo diferente em vez de declará-la como uma variável de um tipo específico.
Exemplo
tipo Roles = "Admin" | "User";const user1: Roles = "Admin";const user2: Roles = "User";const user3: Roles = "Teacher";// A última linha dará este erro: Type '"Teacher"' is not assignable para digitar 'Funções'.8. Pergaminho virtual do CDK do usuário
CDK (Kit de Desenvolvimento de Componentes) Para apresentar longas listas de componentes de forma mais eficaz, utilize o Virtual Scroll. Ao definir a altura do elemento contêiner como a soma de todas as alturas dos elementos, a rolagem virtual permite simular todos os valores de forma eficaz.
9. Use variáveis de ambiente
Para todos os tipos de contextos, o Angular fornece várias configurações de ambiente para declarar variáveis individuais. Ambientes angulares para desenvolvimento e produção são padrão. Podemos até adicionar novos ambientes ou variáveis aos arquivos de ambiente já existentes.
10. Use regras de lint
O tslint fornece vários parâmetros integrados que podem ser personalizados no arquivo tslint.json, incluindo no-any, no-console, no-magic-numbers, etc. O programa é forçado a ser melhor e mais confiável como um resultado. No entanto, você pode configurá-lo com suas próprias regras e configurações do lint. Isso garante a clareza e coerência do nosso código.
11. Mantenha estruturas de pastas adequadas
Antes de iniciar qualquer projeto angular, todos devem levar em consideração a importância de criar e manter uma estrutura de pastas correta. Ao longo do desenvolvimento, a estrutura de pastas deve ser adaptável a novos desenvolvimentos.
12. Divida os componentes grandes em pequenos componentes reutilizáveis.
Também pode ser visto como um princípio de desenvolvimento com uma única responsabilidade. É desafiador gerenciar, testar e depurar componentes enormes. Portanto, para reduzir a duplicação de código e simplificar o gerenciamento, a manutenção e a depuração do componente, dividindo-o em componentes menores e mais reutilizáveis se ele aumentar de tamanho.
13. Gestão do Estado
Uma das áreas mais desafiadoras do desenvolvimento de software é o gerenciamento de estado. Ao salvar o estado de qualquer tipo de dado, o gerenciamento de estado do Angular facilita o tratamento das transições de estado.
NGRX, NGXS, Akita e outras bibliotecas de gerenciamento de estado para Angular estão disponíveis no mercado e cada uma delas serve a um propósito diferente. O gerenciamento de estado ideal para nosso aplicativo pode ser escolhido antes de ser colocado em uso.
Portanto, algumas das vantagens de utilizar o gerenciamento de estado.
- Ele permite que os dados sejam compartilhados entre vários componentes.
- Ele permite o controle de transição de estado centralizado.
- O código ficará mais limpo e fácil de ler.
- É simples solucionar problemas quando algo dá errado.
- Existem ferramentas de desenvolvimento disponíveis para rastreamento e depuração em bibliotecas de gerenciamento de estado.
14. Documentação em código
A documentação do código é uma jogada inteligente. Isso ajudará um novo desenvolvedor a compreender a lógica e a legibilidade do projeto. Uma prática Angular inteligente é documentar cada variável e método.
A tarefa real que um método executa deve ser especificada
/*** Esta é a função get* @param age Este é o parâmetro age* @returns retorna uma versão string de age*/function getUserAge(age: number): string { return age.toString();}em comentários de várias linhas que acompanham cada definição de método.
15.Princípio da Responsabilidade Única
Em vez de agrupá-los todos em um único arquivo ts, é preferível criar arquivos ts distintos para componentes, modelos, estilos e serviços. Você pode escrever um código claro, legível e sustentável se tratar cada arquivo como se fosse responsável por uma única funcionalidade.
16.Usando Interfaces
Sempre que estivermos elaborando um contrato para nossa classe, devemos empregar interfaces. Ao utilizá-los, podemos obrigar a classe a implementar os atributos e funções declarados na interface. O melhor exemplo disso é quando seu componente possui ganchos de ciclo de vida angulares:
A classe HomeComponent implementa OnInit e OnDestroy.
As interfaces são a melhor técnica para descrever com precisão os objetos declarados.
O TypeScript produzirá um erro, ativará o IntelliSense para nós e começará a preencher um objeto se ele não incluir as propriedades da interface:
interface de exportação Usuário { id: número; nome: string; e-mail: string; número da classe; gênero: "masculino" | "fêmea"; fluxo : "ECE" | "CSE" | "ISTO"; estado: booleano;}17.Otimizações de Detecção de Mudanças.
- Em vez de ocultar componentes DOM não visíveis com CSS, é uma boa ideia removê-los do DOM usando *ngIf.
- Transfira cálculos difíceis para o gancho de ciclo de vida ngDoCheck para tornar suas expressões mais rápidas.
- Cálculos complexos devem ser armazenados em cache pelo maior tempo possível.
- Use o método de detecção de alteração OnPush para informar ao Angular que nenhuma alteração foi feita. Você pode ignorar todo o procedimento de detecção de alterações.
18.Usando componentes Smart-Dumb / Use a Técnica de Componentes Smart-Dumb
Ao informar ao Angular que os componentes estúpidos não foram alterados, esta solução torna mais fácil empregar o mecanismo de detecção de alteração OnPush. Os componentes inteligentes são empregados para processar dados por meio de chamadas de API, concentrando-se na funcionalidade e no gerenciamento de estados. Eles estão mais preocupados com a aparência do que os componentes burros, que estão interessados apenas nas aparências.
Conclusão:
Portanto, neste blog, aprendemos sobre as melhores práticas em Angular. Espero que todos esses pontos o ajudem quando você começar a criar o aplicativo angular.
Por fim, para mais postagens desse tipo, siga nossa página no LinkedIn-Competência Front-End.