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

[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