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

Slide 1

Slide 1 text

RXJS, Lifecycle hooks e EventBinding De um angular diferente @kamilah_santos

Slide 2

Slide 2 text

Olar, eu sou a Kamila Santos @kamilah_santos DEV BACKEND https://linktr.ee/kamila.dev

Slide 3

Slide 3 text

Introdução ao rxjs Lifecycle Hooks Event Binding Agenda @kamilah_santos

Slide 4

Slide 4 text

Biblioteca para desenvolver aplicações assíncronas baseadas em eventos usando sequências de observables. O QUE É RXJS? @kamilah_santos

Slide 5

Slide 5 text

Tem um tipo "core" que é o Observable e os chamados tipos "secundários" ( Schedulers, Subscriptions,Subjects) O QUE É RXJS? @kamilah_santos

Slide 6

Slide 6 text

API para programação assíncrona com streams "observáveis" FAZ PARTE DO REACTIVEX @kamilah_santos

Slide 7

Slide 7 text

@kamilah_santos

Slide 8

Slide 8 text

RxJava, Rx.Net, RxClojure, RxGo, RxGroovy.... TEM PARA DIVERSAS LINGUAGENS @kamilah_santos

Slide 9

Slide 9 text

Evite problemas com estados complexos, utilizando funções limpas de input/output em fluxos de Observables. REACTIVEX - FUNCIONAL @kamilah_santos

Slide 10

Slide 10 text

Os operators reduzem códigos complexos em poucas linhas de código. MENOS É MAIS @kamilah_santos

Slide 11

Slide 11 text

Muito mais que o clássico try/catch ASYNC ERROR HANDLING @kamilah_santos

Slide 12

Slide 12 text

Observables e Schedulers eliminam problemas de threads e sincronização TRABALHE COM CONCORRÊNCIA DE UM JEITO FÁCIL @kamilah_santos

Slide 13

Slide 13 text

OK... MAS O QUE É ESSE TAL DE REATIVO? @kamilah_santos

Slide 14

Slide 14 text

@kamilah_santos

Slide 15

Slide 15 text

O sistema responde em tempo hábil, se possível RESPONSIVO @kamilah_santos

Slide 16

Slide 16 text

O sistema permanece responsivo diante de falhas RESILIENTE @kamilah_santos

Slide 17

Slide 17 text

O sistema permanece responsivo diante de uma carga de trabalho variável. ELÁSTICO @kamilah_santos

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Uma das grandes vantagens do Rxjs é porder criar funções puras, que tornam o seu código menos propenso a erros. PURITY @kamilah_santos

Slide 20

Slide 20 text

Com funções impuras, outras partes do código podem interferir no estado. PURITY @kamilah_santos

Slide 21

Slide 21 text

SEM RXJS @kamilah_santos

Slide 22

Slide 22 text

COM RXJS https://stackblitz.com/edit/angular-purityangularsp-rxjs @kamilah_santos

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Para melhor controle do fluxo dos eventos, temos uma série de operadores para controlar nossas aplicações. FLOW @kamilah_santos

Slide 25

Slide 25 text

EM JS: @kamilah_santos

Slide 26

Slide 26 text

COM RXJS https://angular-rxjs-flow-example.stackblitz.io @kamilah_santos

Slide 27

Slide 27 text

Filtra os itens emitidos pela fonte Observável emitindo apenas aqueles que satisfazem um predicado específico. FLOW - FILTER @kamilah_santos

Slide 28

Slide 28 text

@kamilah_santos https://angular-filter-flow.stackblitz.io

Slide 29

Slide 29 text

Atrasa a emissão de itens da fonte Observable por um determinado tempo limite. FLOW - DELAY @kamilah_santos

Slide 30

Slide 30 text

@kamilah_santos

Slide 31

Slide 31 text

Emite apenas os primeiros valores de contagem emitidos pela fonte Observable FLOW - TAKE @kamilah_santos

Slide 32

Slide 32 text

@kamilah_santos https://stackblitz.com/edit/angular-take

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

@kamilah_santos

Slide 35

Slide 35 text

Podemos transformar os valores que são passados através dos nossos Observables. VALUES @kamilah_santos

Slide 36

Slide 36 text

COM JS @kamilah_santos

Slide 37

Slide 37 text

COM RXJS @kamilah_santos https://stackblitz.com/edit/angular-values

Slide 38

Slide 38 text

Mapeia cada valor de origem (um objeto) para sua propriedade aninhada especificada VALUES- PLUCK @kamilah_santos

Slide 39

Slide 39 text

@kamilah_santos

Slide 40

Slide 40 text

Emite o valor emitido mais recentemente da fonte Observable sempre que outro Observable, o notificador, emite VALUES- SAMPLE @kamilah_santos

Slide 41

Slide 41 text

@kamilah_santos

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

O Construtor Observable recebe a função subscribe como argumento CRIANDO OBSERVABLES @kamilah_santos

Slide 44

Slide 44 text

@kamilah_santos

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

@kamilah_santos

Slide 47

Slide 47 text

O código dentro da função subscribe o que será executado dentro do nosso Observable. EXECUTANDO OBSERVABLES @kamilah_santos

Slide 48

Slide 48 text

Envia um valor (número, string...) EXECUTANDO OBSERVABLES - "NEXT" @kamilah_santos

Slide 49

Slide 49 text

Informa o erro ocorrido ou lança uma exception. EXECUTANDO OBSERVABLES - ERROR @kamilah_santos

Slide 50

Slide 50 text

Envia um notificação de que a operação foi concluida, mas não passa nenhum valor. EXECUTANDO OBSERVABLES - COMPLETE @kamilah_santos

Slide 51

Slide 51 text

@kamilah_santos

Slide 52

Slide 52 text

@kamilah_santos

Slide 53

Slide 53 text

@kamilah_santos

Slide 54

Slide 54 text

Operators são peças essenciais que possibilitam que códigos assíncronos complexos sejam facilmente desenvolvidos de forma declarativa. OPERATORS @kamilah_santos

Slide 55

Slide 55 text

Podem ser chamados como standalone functions para criar um novo Observable CREATION OPERATORS @kamilah_santos

Slide 56

Slide 56 text

É 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

Slide 57

Slide 57 text

• creation • transformation • filtering • joining, • multicasting • error handling • utility, etc CATEGORIAS DE OPERATORS @kamilah_santos

Slide 58

Slide 58 text

É um objeto que representa um recurso "discartável" , geralmente a execução de um observable. SUBSCRIPTIONS @kamilah_santos

Slide 59

Slide 59 text

@kamilah_santos

Slide 60

Slide 60 text

@kamilah_santos

Slide 61

Slide 61 text

É um tipo especial de Observable que permite que valores sejam multicasted para vários Observers. SUBJECTS @kamilah_santos

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

@kamilah_santos

Slide 65

Slide 65 text

Controla quando a subscription começa e quando as notificações são entregues. SCHEDULERS @kamilah_santos

Slide 66

Slide 66 text

• É uma estrutura de dados • É um contexto de execução • Tem um relógio virtual SCHEDULERS @kamilah_santos

Slide 67

Slide 67 text

@kamilah_santos

Slide 68

Slide 68 text

@kamilah_santos

Slide 69

Slide 69 text

@kamilah_santos Dúvidas?

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

É o primeiro lifeCycle Hook é chamado logo após a inicialização da classe e o componente é criado ngOnChanges() @kamilah_santos

Slide 73

Slide 73 text

Também é chamado quando há alteração de propriedade dentro do seu componente. ngOnChanges() @kamilah_santos

Slide 74

Slide 74 text

Este é chamado depois do ngOnChanges(), só é chamado uma única vez, inicializa o componente, define e exibe suas propriedades de entrada. ngOnInit() @kamilah_santos

Slide 75

Slide 75 text

É o lifeCycle mais importante do Angular, pois "alerta" que um componente foi criado. ngOnInit() @kamilah_santos

Slide 76

Slide 76 text

É recomendado ser utilizado para buscar dados de fontes externas. ngOnInit() @kamilah_santos

Slide 77

Slide 77 text

É chamado durante todas verificações de mudança durante a execução, geralmente depois que o NgOnInit é chamado ngDoCheck() @kamilah_santos

Slide 78

Slide 78 text

Só é executado uma vez depois que o primeiro ngDoCheck é chamado, semelhando ao ngDoCheck, mas projetado para visualização do componente. ngAfterContentInit() @kamilah_santos

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

Chamado após as visualizações dos componentes e seus subsequentes filhos, após a execução do hook ngAfterContentChecked ngAfterViewInit() @kamilah_santos

Slide 81

Slide 81 text

Nosso penúltimo lifecycle hook, executados após todos os demais. ngAfterViewChecked() @kamilah_santos

Slide 82

Slide 82 text

O último lifeCycle , é chamado antes do componente ser ser removido do DOM ngOnDestroy() @kamilah_santos

Slide 83

Slide 83 text

É feita a limpeza do componente, desde a desanexação de event handlers até a desinscrição de observables. ngOnDestroy() @kamilah_santos

Slide 84

Slide 84 text

https://stackblitz.com/edit/angular-lifec ycle-hooks-example-angularsp Exemplo lifeCycle Hooks @kamilah_santos

Slide 85

Slide 85 text

@kamilah_santos Dúvidas?

Slide 86

Slide 86 text

Utilizamos o eventBinding para vincular um código da aplicação a um determinado evento do disparado pelo navegador. Event Binding

Slide 87

Slide 87 text

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?

Slide 88

Slide 88 text

Quando o mouse clica algum elemento ele é disparado. (click)

Slide 89

Slide 89 text

@kamilah_santos

Slide 90

Slide 90 text

@kamilah_santos

Slide 91

Slide 91 text

Ouve o pressionamento da tecla Enter, pois sinaliza que o usuário terminou de digitar. Keyup.enter

Slide 92

Slide 92 text

@kamilah_santos

Slide 93

Slide 93 text

@kamilah_santos

Slide 94

Slide 94 text

Temos vários outros eventos:

Slide 95

Slide 95 text

@kamilah_santos

Slide 96

Slide 96 text

@kamilah_santos

Slide 97

Slide 97 text

@kamilah_santos

Slide 98

Slide 98 text

@kamilah_santos

Slide 99

Slide 99 text

@kamilah_santos

Slide 100

Slide 100 text

@kamilah_santos Dúvidas?

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

Obrigada <3 @kamilah_santos https://linktr.ee/kamila.dev