[ANGULAR-SP] rxjs, lifecyclehooks e eventbinding de um angular diferente

Transcript

1. RXJS, Lifecycle hooks e EventBinding De um angular diferente @kamilah_santos
2. Olar, eu sou a Kamila Santos @kamilah_santos DEV BACKEND https://linktr.ee/kamila.dev
3. Introdução ao rxjs Lifecycle Hooks Event Binding Agenda @kamilah_santos
4. Biblioteca para desenvolver aplicações assíncronas baseadas em eventos usando sequências de observables. O QUE É RXJS? @kamilah_santos
5. Tem um tipo "core" que é o Observable e os chamados tipos "secundários" ( Schedulers, Subscriptions,Subjects) O QUE É RXJS? @kamilah_santos
6. API para programação assíncrona com streams "observáveis" FAZ PARTE DO REACTIVEX @kamilah_santos
7. @kamilah_santos
8. RxJava, Rx.Net, RxClojure, RxGo, RxGroovy.... TEM PARA DIVERSAS LINGUAGENS @kamilah_santos
9. Evite problemas com estados complexos, utilizando funções limpas de input/output em fluxos de Observables. REACTIVEX - FUNCIONAL @kamilah_santos
10. Os operators reduzem códigos complexos em poucas linhas de código. MENOS É MAIS @kamilah_santos
11. Muito mais que o clássico try/catch ASYNC ERROR HANDLING @kamilah_santos
12. Observables e Schedulers eliminam problemas de threads e sincronização TRABALHE COM CONCORRÊNCIA DE UM JEITO FÁCIL @kamilah_santos
13. OK... MAS O QUE É ESSE TAL DE REATIVO? @kamilah_santos
14. @kamilah_santos
15. O sistema responde em tempo hábil, se possível RESPONSIVO @kamilah_santos
16. O sistema permanece responsivo diante de falhas RESILIENTE @kamilah_santos
17. O sistema permanece responsivo diante de uma carga de trabalho variável. ELÁSTICO @kamilah_santos
18. Aplicações reativas dependem da passagem de mensagens assíncronas para estabelecer um limite entre os componentes, garantindo um acoplamento flexível , isolamento e transparência MESSAGE DRIVEN @kamilah_santos
19. Uma das grandes vantagens do Rxjs é porder criar funções puras, que tornam o seu código menos propenso a erros. PURITY @kamilah_santos
20. Com funções impuras, outras partes do código podem interferir no estado. PURITY @kamilah_santos
21. SEM RXJS @kamilah_santos
22. COM RXJS https://stackblitz.com/edit/angular-purityangularsp-rxjs @kamilah_santos
23. QUAL A DIFERENÇA? Utilizando o rxjs, isolamos o estado do contador. O operador scan funciona de forma semelhante ao map em arrrays . O valor retornado do callback se tornará o próximo valor exposto na próxima vez que o retorno de chamada for executado. @kamilah_santos
24. Para melhor controle do fluxo dos eventos, temos uma série de operadores para controlar nossas aplicações. FLOW @kamilah_santos
25. EM JS: @kamilah_santos
26. COM RXJS https://angular-rxjs-flow-example.stackblitz.io @kamilah_santos
27. Filtra os itens emitidos pela fonte Observável emitindo apenas aqueles que satisfazem um predicado específico. FLOW - FILTER @kamilah_santos
28. @kamilah_santos https://angular-filter-flow.stackblitz.io
29. Atrasa a emissão de itens da fonte Observable por um determinado tempo limite. FLOW - DELAY @kamilah_santos
30. @kamilah_santos
31. Emite apenas os primeiros valores de contagem emitidos pela fonte Observable FLOW - TAKE @kamilah_santos
32. @kamilah_santos https://stackblitz.com/edit/angular-take
33. Retorna um Observable que emite todos os itens emitidos pelo Observable de origem que são distintos por comparação dos itens anteriores. FLOW - DISTINCT @kamilah_santos
34. @kamilah_santos
35. Podemos transformar os valores que são passados através dos nossos Observables. VALUES @kamilah_santos
36. COM JS @kamilah_santos
37. COM RXJS @kamilah_santos https://stackblitz.com/edit/angular-values
38. Mapeia cada valor de origem (um objeto) para sua propriedade aninhada especificada VALUES- PLUCK @kamilah_santos
39. @kamilah_santos
40. Emite o valor emitido mais recentemente da fonte Observable sempre que outro Observable, o notificador, emite VALUES- SAMPLE @kamilah_santos
41. @kamilah_santos
42. Por definição é uma coleção que funciona de forma unidirecional, ou seja, ele emite notificações sempre que ocorre uma mudança em um de seus itens e a partir disto podemos executar uma ação OBSERVABLES @kamilah_santos
43. O Construtor Observable recebe a função subscribe como argumento CRIANDO OBSERVABLES @kamilah_santos
44. @kamilah_santos
45. Se "inscrever" em um Observable é semelhante a chamar uma função e fornecer callbacks onde os dados serão entregues. SE "INSCREVENDO" PARA OBSERVABLES @kamilah_santos
46. @kamilah_santos
47. O código dentro da função subscribe o que será executado dentro do nosso Observable. EXECUTANDO OBSERVABLES @kamilah_santos
48. Envia um valor (número, string...) EXECUTANDO OBSERVABLES - "NEXT" @kamilah_santos
49. Informa o erro ocorrido ou lança uma exception. EXECUTANDO OBSERVABLES - ERROR @kamilah_santos
50. Envia um notificação de que a operação foi concluida, mas não passa nenhum valor. EXECUTANDO OBSERVABLES - COMPLETE @kamilah_santos
51. @kamilah_santos
52. @kamilah_santos
53. @kamilah_santos
54. Operators são peças essenciais que possibilitam que códigos assíncronos complexos sejam facilmente desenvolvidos de forma declarativa. OPERATORS @kamilah_santos
55. Podem ser chamados como standalone functions para criar um novo Observable CREATION OPERATORS @kamilah_santos
56. É uma função que recebe um Observable e retorna outro Observable, é uma operação pura, pois o Observable anterior permanece inalterado. PIPEABLE OPERATORS @kamilah_santos
57. • creation • transformation • filtering • joining, • multicasting • error handling • utility, etc CATEGORIAS DE OPERATORS @kamilah_santos
58. É um objeto que representa um recurso "discartável" , geralmente a execução de um observable. SUBSCRIPTIONS @kamilah_santos
59. @kamilah_santos
60. @kamilah_santos
61. É um tipo especial de Observable que permite que valores sejam multicasted para vários Observers. SUBJECTS @kamilah_santos
62. Todo subject é um Observable, dado um Subject, você pode se inscrever nele por meio de um Observer, que vai passar a receber valores normalmente. SUBJECTS @kamilah_santos
63. Do ponto de vista do Observer, não de pode dizer se a execução do Observable é vinda de um simples Observable ou um Subject Unicast. SUBJECTS @kamilah_santos
64. @kamilah_santos
65. Controla quando a subscription começa e quando as notificações são entregues. SCHEDULERS @kamilah_santos
66. • É uma estrutura de dados • É um contexto de execução • Tem um relógio virtual SCHEDULERS @kamilah_santos
67. @kamilah_santos
68. @kamilah_santos
69. @kamilah_santos Dúvidas?
70. Todo componente angular tem um ciclo de vida: passa pelo processo de criação, execução e possível destruição. O QUE SÃO LIFECYCLE HOOKS? @kamilah_santos
71. Isso é realizado pelo Angular criando o componente, renderizando, criando e renderizando seus filhos, verificando modificações nas propriedades e no DOM, realizando alterações, destruindo e removendo do DOM. O QUE SÃO LIFECYCLE HOOKS? @kamilah_santos
72. É o primeiro lifeCycle Hook é chamado logo após a inicialização da classe e o componente é criado ngOnChanges() @kamilah_santos
73. Também é chamado quando há alteração de propriedade dentro do seu componente. ngOnChanges() @kamilah_santos
74. Este é chamado depois do ngOnChanges(), só é chamado uma única vez, inicializa o componente, define e exibe suas propriedades de entrada. ngOnInit() @kamilah_santos
75. É o lifeCycle mais importante do Angular, pois "alerta" que um componente foi criado. ngOnInit() @kamilah_santos
76. É recomendado ser utilizado para buscar dados de fontes externas. ngOnInit() @kamilah_santos
77. É chamado durante todas verificações de mudança durante a execução, geralmente depois que o NgOnInit é chamado ngDoCheck() @kamilah_santos
78. Só é executado uma vez depois que o primeiro ngDoCheck é chamado, semelhando ao ngDoCheck, mas projetado para visualização do componente. ngAfterContentInit() @kamilah_santos
79. Este hook é chamado depois que o conteúdo projetado para a visualização do componente é inicializado, após o ngAfterContentInit e ngDoCheck forem chamados. ngAfterContentChecked() @kamilah_santos
80. Chamado após as visualizações dos componentes e seus subsequentes filhos, após a execução do hook ngAfterContentChecked ngAfterViewInit() @kamilah_santos
81. Nosso penúltimo lifecycle hook, executados após todos os demais. ngAfterViewChecked() @kamilah_santos
82. O último lifeCycle , é chamado antes do componente ser ser removido do DOM ngOnDestroy() @kamilah_santos
83. É feita a limpeza do componente, desde a desanexação de event handlers até a desinscrição de observables. ngOnDestroy() @kamilah_santos
84. https://stackblitz.com/edit/angular-lifec ycle-hooks-example-angularsp Exemplo lifeCycle Hooks @kamilah_santos
85. @kamilah_santos Dúvidas?
86. Utilizamos o eventBinding para vincular um código da aplicação a um determinado evento do disparado pelo navegador. Event Binding
87. 1-Qual elemento emitirá o evento? 2- Qual o nome do evento que será emitido? 3- Qual o nome do método do componente que será executado em resposta ao evento? O que precisamos saber?
88. Quando o mouse clica algum elemento ele é disparado. (click)
89. @kamilah_santos
90. @kamilah_santos
91. Ouve o pressionamento da tecla Enter, pois sinaliza que o usuário terminou de digitar. Keyup.enter
92. @kamilah_santos
93. @kamilah_santos
94. Temos vários outros eventos:
95. @kamilah_santos
96. @kamilah_santos
97. @kamilah_santos
98. @kamilah_santos
99. @kamilah_santos
100. @kamilah_santos Dúvidas?
101. Referencias https://rxjs-dev.firebaseapp.com/guide/overview https://angular.io/guide/pipes https://loiane.training/curso/angular https://slides.com/williamgrasel/rxjs-avancado-compondo-int erfaces-visuais-reativamente
102. Obrigada <3 @kamilah_santos https://linktr.ee/kamila.dev