Waiting for refactory

In this presentation, We discuss some points for starting a refactory in your angular application.

Transcript

1. A ESPERA DE UMA REFATORAÇÃO
2. SUGESTÕES DE REFATORAÇÃO
3. SUGESTÕES DE REFATORAÇÃO OPÇÕES CARREGAMENTO TARDIO (LAZY LOADING) ELIMINAR MÓDULOS COMPARTILHADOS ANÁLISE DE CÓDIGO ESTÁTICO (LINT) GERENCIAMENTO DE EVENTOS DE ERRO GERENCIAMENTO DE DADOS UNIDIRECIONAL (FLUX) AJUSTE NA ESTRUTURA DE PASTAS E ARQUIVOS CHECAR COMPONENTES “ESPERTOS” DEMAIS
4. CARREGAMENTO TARDIO (LAZY LOADING)
5. SUGESTÕES DE REFATORAÇÃO - OPÇÕES - CARREGAMENTO TARDIO (LAZY LOADING) definição {• é uma técnica de otimização de desempenho de páginas que tem como objetivo fazer com que conteúdos sejam carregados de forma assíncrona ou condicional
6. EAGER LOADING (ANTECIPADO) caixa de ferramentas 1. pedir chave de fenda 3kg 1,5kg 5kg APP AÇÃO RESULTADO (5kg) 0,5kg
7. LAZY LOADING (ANTECIPADO) caixa de ferramentas 1. pedir chave de fenda 5kg APP AÇÃO RESULTADO (0,5kg) 0,5kg
8. LAZY LOADING (ANTECIPADO) caixa de ferramentas 2. pedir martelo 5kg APP AÇÃO RESULTADO (3,5kg) 0,5kg 3kg
9. LAZY LOADING (ANTECIPADO) caixa de ferramentas 3. pedir chave de fenda 5kg APP AÇÃO RESULTADO (3,5kg) 0,5kg 3kg
10. MUNDO REAL
11. ELIMINAR MÓDULOS COMPARTILHADOS
12. SUGESTÕES DE REFATORAÇÃO - OPÇÕES - ELIMINAR MÓDULOS COMPARTILHADOS módulo compartilhado (definição) {• a criação de módulos compartilhados permite organizar e otimizar seu código • uso de diretivas, pipes e componentes comumente usados em um módulo, para importar apenas esse módulo sempre que precisar através da aplicação módulo scam (definição) {• significa um módulo para cada componente criado • permite que não haja dúvidas em relação aos componentes necessários para o funcionamento de um determinado componente, assim como evita que um componente não utilizado permanece na aplicação
13. MÓDULOS COMPARTILHADOS MÓDULO COMPARTILHADO CONTÉM CONSTRÓI MESA ARMÁRIO CHAVE DE FENDA MARTELO CHAVE DE FENDA MÓDULOS COMPARTILHADOS: CONSTRUINDO UM CÔMODO
14. QUANDO ISSO SE TORNA UM PROBLEMA?
15. MÓDULOS COMPARTILHADOS MÓDULO COMPARTILHADO CONTÉM CONSTRÓI MESA CHAVE DE FENDA MÓDULOS COMPARTILHADOS: CONSTRUINDO UM CÔMODO
16. MÓDULO SCAM (SINGLE COMPONENT ANGULAR MODULE)
17. MÓDULOS COMPARTILHADOS CONTÉM MESA ARMÁRIO SCAM CONTÉM SCAM CONSTRÓI CONSTRÓI MÓDULOS SCAM: CONSTRUINDO UM CÔMODO
18. ???
19. MÓDULOS COMPARTILHADOS MESA ARMÁRIO MARTELO CHAVE DE FENDA SCAM CONTÉM SCAM CONTÉM CONTÉM MÓDULOS SCAM: CONSTRUINDO UM CÔMODO (REAPROVEITAMENTO DE COMPONENTES)
20. MUNDO REAL
21. ANÁLISE DE CÓDIGO ESTÁTICO (LINT)
22. SUGESTÕES DE REFATORAÇÃO - OPÇÕES - ANÁLISE DE CÓDIGO ESTÁTICO (LINT) definição {• lint é o processo de rodar uma aplicação que analisa um código em busca de erros potenciais • falta de ";" quando requerido, variáveis declaradas e não usadas, uso de variáveis antes de declaradas, etc
23. MUNDO REAL
24. GERENCIAMENTO DE EVENTOS DE ERRO
25. SUGESTÕES DE REFATORAÇÃO - OPÇÕES - GERENCIAMENTO DE EVENTOS DE ERRO definição {• coleta constantemente dados de erro e ajuda você a decidir se há uma ameaça iminente • permite que você tome as medidas apropriadas para lidar com esses problemas antes que eles aumentem
26. FRONTEND BACKEND SERVER 1. REQUISITA 2. PROCESSA 2.1 REGISTRA O ERRO (DISCO) 3. RESPONDE 4. INFORMA CENÁRIO: GERENCIANDO ERROS (BACKEND)
27. FRONTEND BACKEND SERVER 2.1 REGISTRA O ERRO (DISCO CLIENTE) (???) CENÁRIO: GERENCIANDO ERROS (FRONTEND - ANTERIORMENTE)
28. FRONTEND BACKEND SERVER 1. REQUISITA 2. PROCESSA 2.1 REGISTRA O ERRO (DISCO) 3. RESPONDE CENÁRIO: GERENCIANDO ERROS (FRONTEND - ATUALMENTE)
29. MUNDO REAL
30. AJUSTE NA ESTRUTURA DE PASTAS E ARQUIVOS
31. SUGESTÕES DE REFATORAÇÃO - OPÇÕES - AJUSTE NA ESTRUTURA DE PASTAS E ARQUIVOS objetivo {• permitir com que a equipe identifique rapidamente a localização de componentes do projeto • diminuir a curva de aprendizado para novos ingressantes
32. MUNDO REAL
33. CHECAR COMPONENTES “ESPERTOS DEMAIS”
34. SUGESTÕES DE REFATORAÇÃO - OPÇÕES - CHECAR COMPONENTES “ESPERTOS” DEMAIS definição {• é o componente que controla o atual estado estado da aplicação • tem forte noção do funcionamento da aplicação
35. GERENCIAMENTO DE DADOS UNIDIRECIONAL (FLUX)
36. SUGESTÕES DE REFATORAÇÃO - OPÇÕES - GERENCIAMENTO DE DADOS UNIDIRECIONAL (FLUX) programação reativa (definição) {• programação reativa é um modelo ou um paradigma de programação criado inicialmente pela Microsoft que é orientado a fluxo de dados e propagações de estados • estes fluxos de dados (que também são chamados de streams) são em grande parte assíncronos flux (definição) {• arquitetura que serve para controlar os estados globais numa aplicação • os estados globais dão entender, pelo próprio nome, que não tem um dono em si, ou seja, toda aplicação pode utilizar tal estado para cumprir alguma tarefa responsividade - resiliência - elasticidade - guiado por mensagem
37. MODEL-VIEW-VIEW-MODEL (MODELO ATUAL)
38. MUNDO REAL
39. FLUX 1. 2.
40. BIBLIOTECAS PARA IMPLEMENTAR O FLUX ANGULAR REACT NGRX REDUX
42. MUNDO REAL
43. DÚVIDAS
44. OBRIGADO!