Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Ionic Reativo com RxJS e ngRx

806 Aufrufe

Veröffentlicht am

Palestra apresentada no JS Experience, organizada pelo iMasters no dia 23 de Junho de 2017 em São Paulo.

Veröffentlicht in: Technologie
  • Login to see the comments

  • Gehören Sie zu den Ersten, denen das gefällt!

Ionic Reativo com RxJS e ngRx

  1. 1. Loiane Groner @loiane github.com/loiane loiane.com loiane.training ionic reativo Empodere seu app com RxJS e ngRx
  2. 2. Loiane Groner @loiane github.com/loiane loiane.com loiane.training Java, JavaScript/HTML5, Sencha, Angular, Phonegap/ Ionic
  3. 3. Disponível (inglês) na amazon.com.br
  4. 4. https://novatec.com.br/livros/estruturas-de-dados-algoritmos-em-javascript/
  5. 5. Elevar o padrão de desenvolvimento dos seus apps com programação e padrões reativos
  6. 6. Stack de tecnologias + ==
  7. 7. Tecnologias abordadas
  8. 8. Programação eativa
  9. 9. http://www.reactivemanifesto.org/pt-BR Manifesto Reativo
  10. 10. “que reage, responde a estímulos” Reativo
  11. 11. Reage a dados que são transmitidos ao longo do tempo
  12. 12. Reagir a informações
  13. 13. Reagir a usuários
  14. 14. Reagir a erros
  15. 15. Extensões reativas (RxJS) http://reactivex.io/
  16. 16. Objeto Promise Iterable Observable Síncrono Assíncrono ValorúnicoMúltiplosvalores Panorama da teoria da reatividade
  17. 17. EcmaScript 2018
  18. 18. + +
  19. 19. Http
  20. 20. Http Services
  21. 21. Http Services
  22. 22. Http Services
  23. 23. Http Services
  24. 24. Http Services
  25. 25. Operadores
  26. 26. Transformar => map http://rxmarbles.com/#map
  27. 27. Filtrar informações => filter http://rxmarbles.com/#filter
  28. 28. Redução => reduce http://rxmarbles.com/#reduce
  29. 29. Desativar => debounce http://rxmarbles.com/#debounce
  30. 30. https://yakovfain.files.wordpress.com/2017/04/operators.png
  31. 31. Pipe | async
  32. 32. Pipe Async
  33. 33. Pipe Async
  34. 34. Pipe Async Observable<boolean> Observable<Course[]> async == subscribe + unsubscribe
  35. 35. Formulários Reativos
  36. 36. Formulários Reativos
  37. 37. Formulários Reativos
  38. 38. Padrões eativos
  39. 39. Gerenciar o estado e controle de fluxo
  40. 40. COMPONENTE {…} SERVIÇO COMPONENTE {…} COMPONENTE {…} COMPONENTE {…} SERVIÇO SERVIÇO SERVIÇO SERVIÇO COMPONENTE {…} SERVIÇO
  41. 41. Redux é uma biblioteca, e também é um padrão
  42. 42. ACTIONS REDUCERS STORE VIEW Redux dispatch subscribe
  43. 43. https://github.com/ngrx
  44. 44. Show me the app!
  45. 45. Configuração @ngrx/store v2.2
  46. 46. Configuração @ngrx/store v2.2
  47. 47. Estado da App @ngrx/store v2.2
  48. 48. Estado flui para baixo store service / provider component / page template
  49. 49. Store select
  50. 50. Store select
  51. 51. Store select
  52. 52. store.select de um pedaço do estado
  53. 53. store.select de um pedaço do estado reselect
  54. 54. RxJS pode ser usado no lugar do selector
  55. 55. RxJS pode ser usado no lugar do selector
  56. 56. Component -> Template
  57. 57. Component -> Template Observable<Tasks[]> async == subscribe + unsubscribe
  58. 58. Component -> Template
  59. 59. Component -> Template Dumb Component
  60. 60. Componente de apresentação
  61. 61. Componente de apresentação código + simples + fácil de testar
  62. 62. Eventos fluem para cima store service / provider component / page template
  63. 63. Componente container: dispatch Action
  64. 64. Componente container: dispatch Action Escuta o evento do componente filho
  65. 65. Componente container: dispatch Action Escuta o evento do componente filho
  66. 66. Definição das Ações
  67. 67. Definição das Ações
  68. 68. reducer
  69. 69. reducer imutabilidade +
  70. 70. reducer imutabilidade + funções puras
  71. 71. Estado inicial - reducer
  72. 72. Store side effects Efeitos Colaterais @ngrx/effects
  73. 73. Ajax: 2 ações para cada operação
  74. 74. Effects
  75. 75. Effects Chamada Service - API
  76. 76. Effects Chamada Service - API dispatch ação de sucesso para o reducer
  77. 77. Provider continua o mesmo
  78. 78. @ngrx/router-store
  79. 79. Navegação por pilha
  80. 80. Encadeamento de Effects
  81. 81. Effect para Navegação
  82. 82. Effect para Navegação Ionic 3 tem Lazy Loading Nome da página por String
  83. 83. Plugins Cordova Ionic Native
  84. 84. select Foto
  85. 85. select Foto
  86. 86. select Foto Observables nos templates! Streams
  87. 87. Dispatch
  88. 88. Dispatch
  89. 89. Effects com Ionic Native
  90. 90. Effects com Ionic Native
  91. 91. @ngrx/platform (v4)
  92. 92. @ngrx/platform (v4: beta)
  93. 93. @ngrx/platform (v4: beta) Injeta o estado do módulo no AppState apenas depois que o módulo for carregado via lazy loading
  94. 94. Redux DevTools
  95. 95. https://www.npmjs.com/package/ngrx-store-ionic-storage
  96. 96. https://github.com/loiane/ionic3-firebase-ngrx
  97. 97. Pra estudar mais… • https://angular.io/docs/ts/latest/guide/reactive-forms.html • https://angular.io/docs/ts/latest/guide/server-communication.html • https://angular.io/docs/ts/latest/guide/router.html • https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/categories.md • https://gist.github.com/btroncone/d6cf141d6f2c00dc6b35 • http://rxmarbles.com/ • http://reactivex.io/documentation/operators • https://github.com/ngrx • https://github.com/ngrx/example-app • https://auth0.com/blog/understanding-angular-2-change-detection/ • http://blog.brecht.io/A-scalable-angular2-architecture/ • http://blog.mgechev.com/2016/04/10/scalable-javascript-single-page-app-angular2- application-architecture/
  98. 98. Quer aprender mais sobre Angular (2.x e 4.x)? /loianegroner
  99. 99. https://www.slideshare.net/loianeg
  100. 100. http://loiane.com facebook.com/loianegroner twitter.com/loiane https://github.com/loiane youtube.com/loianegroner http://loiane.training

×