Angular e Observables com RxJS...2019/05/17 · com RxJS QUEM SOU EU DOMINGOS TERUEL FullStack...
Transcript of Angular e Observables com RxJS...2019/05/17 · com RxJS QUEM SOU EU DOMINGOS TERUEL FullStack...
![Page 1: Angular e Observables com RxJS...2019/05/17 · com RxJS QUEM SOU EU DOMINGOS TERUEL FullStack Developer @ Softplan/Construtech Ventures +15 anos como desenvolvedor Evangelista open](https://reader034.fdocuments.net/reader034/viewer/2022042420/5f372dc91d929b384b08b73b/html5/thumbnails/1.jpg)
Angular e Observables com RxJS
![Page 2: Angular e Observables com RxJS...2019/05/17 · com RxJS QUEM SOU EU DOMINGOS TERUEL FullStack Developer @ Softplan/Construtech Ventures +15 anos como desenvolvedor Evangelista open](https://reader034.fdocuments.net/reader034/viewer/2022042420/5f372dc91d929b384b08b73b/html5/thumbnails/2.jpg)
QUEM SOU EU
DOMINGOS TERUEL
▸ FullStack Developer @ Softplan/Construtech Ventures
▸ +15 anos como desenvolvedor
▸ Evangelista open source
▸ Contribuidor dos projetos openSUSE, PHP, Wordpress, e +
▸ Core PHPSC
▸ Contato: [email protected]
▸ Online: @mingomax
![Page 3: Angular e Observables com RxJS...2019/05/17 · com RxJS QUEM SOU EU DOMINGOS TERUEL FullStack Developer @ Softplan/Construtech Ventures +15 anos como desenvolvedor Evangelista open](https://reader034.fdocuments.net/reader034/viewer/2022042420/5f372dc91d929b384b08b73b/html5/thumbnails/3.jpg)
Tópicos
• Angular
• RxJS
• Live coding
![Page 4: Angular e Observables com RxJS...2019/05/17 · com RxJS QUEM SOU EU DOMINGOS TERUEL FullStack Developer @ Softplan/Construtech Ventures +15 anos como desenvolvedor Evangelista open](https://reader034.fdocuments.net/reader034/viewer/2022042420/5f372dc91d929b384b08b73b/html5/thumbnails/4.jpg)
Angular é uma plataforma que facilita a construção de aplicativos web
![Page 5: Angular e Observables com RxJS...2019/05/17 · com RxJS QUEM SOU EU DOMINGOS TERUEL FullStack Developer @ Softplan/Construtech Ventures +15 anos como desenvolvedor Evangelista open](https://reader034.fdocuments.net/reader034/viewer/2022042420/5f372dc91d929b384b08b73b/html5/thumbnails/5.jpg)
Conceitos
• Dependency injection
• Single-pass change detection
• Declarative Templates
![Page 6: Angular e Observables com RxJS...2019/05/17 · com RxJS QUEM SOU EU DOMINGOS TERUEL FullStack Developer @ Softplan/Construtech Ventures +15 anos como desenvolvedor Evangelista open](https://reader034.fdocuments.net/reader034/viewer/2022042420/5f372dc91d929b384b08b73b/html5/thumbnails/6.jpg)
Dependency Injection
• Prove acesso de forma fácil a camada de serviços onde você precisar
![Page 7: Angular e Observables com RxJS...2019/05/17 · com RxJS QUEM SOU EU DOMINGOS TERUEL FullStack Developer @ Softplan/Construtech Ventures +15 anos como desenvolvedor Evangelista open](https://reader034.fdocuments.net/reader034/viewer/2022042420/5f372dc91d929b384b08b73b/html5/thumbnails/7.jpg)
Change Detection
![Page 8: Angular e Observables com RxJS...2019/05/17 · com RxJS QUEM SOU EU DOMINGOS TERUEL FullStack Developer @ Softplan/Construtech Ventures +15 anos como desenvolvedor Evangelista open](https://reader034.fdocuments.net/reader034/viewer/2022042420/5f372dc91d929b384b08b73b/html5/thumbnails/8.jpg)
Declarative templates
• Descreve como sua aplicação deve parecer para o seu cliente
![Page 9: Angular e Observables com RxJS...2019/05/17 · com RxJS QUEM SOU EU DOMINGOS TERUEL FullStack Developer @ Softplan/Construtech Ventures +15 anos como desenvolvedor Evangelista open](https://reader034.fdocuments.net/reader034/viewer/2022042420/5f372dc91d929b384b08b73b/html5/thumbnails/9.jpg)
Interpolação de texto
![Page 10: Angular e Observables com RxJS...2019/05/17 · com RxJS QUEM SOU EU DOMINGOS TERUEL FullStack Developer @ Softplan/Construtech Ventures +15 anos como desenvolvedor Evangelista open](https://reader034.fdocuments.net/reader034/viewer/2022042420/5f372dc91d929b384b08b73b/html5/thumbnails/10.jpg)
Bind de propriedades
![Page 11: Angular e Observables com RxJS...2019/05/17 · com RxJS QUEM SOU EU DOMINGOS TERUEL FullStack Developer @ Softplan/Construtech Ventures +15 anos como desenvolvedor Evangelista open](https://reader034.fdocuments.net/reader034/viewer/2022042420/5f372dc91d929b384b08b73b/html5/thumbnails/11.jpg)
![Page 12: Angular e Observables com RxJS...2019/05/17 · com RxJS QUEM SOU EU DOMINGOS TERUEL FullStack Developer @ Softplan/Construtech Ventures +15 anos como desenvolvedor Evangelista open](https://reader034.fdocuments.net/reader034/viewer/2022042420/5f372dc91d929b384b08b73b/html5/thumbnails/12.jpg)
Princípios da programação funcional
para o Javascript
![Page 13: Angular e Observables com RxJS...2019/05/17 · com RxJS QUEM SOU EU DOMINGOS TERUEL FullStack Developer @ Softplan/Construtech Ventures +15 anos como desenvolvedor Evangelista open](https://reader034.fdocuments.net/reader034/viewer/2022042420/5f372dc91d929b384b08b73b/html5/thumbnails/13.jpg)
Observer pattern
![Page 14: Angular e Observables com RxJS...2019/05/17 · com RxJS QUEM SOU EU DOMINGOS TERUEL FullStack Developer @ Softplan/Construtech Ventures +15 anos como desenvolvedor Evangelista open](https://reader034.fdocuments.net/reader034/viewer/2022042420/5f372dc91d929b384b08b73b/html5/thumbnails/14.jpg)
Conceito
• Observable
• emite itens ou envia notificações para seus observadores(observers) chamando os métodos dos observadores.
![Page 15: Angular e Observables com RxJS...2019/05/17 · com RxJS QUEM SOU EU DOMINGOS TERUEL FullStack Developer @ Softplan/Construtech Ventures +15 anos como desenvolvedor Evangelista open](https://reader034.fdocuments.net/reader034/viewer/2022042420/5f372dc91d929b384b08b73b/html5/thumbnails/15.jpg)
Conceito
• Subject
• É como conectamos um observer(observador) a um Observable. O observador implementa algum subconjunto dos seguintes métodos
![Page 16: Angular e Observables com RxJS...2019/05/17 · com RxJS QUEM SOU EU DOMINGOS TERUEL FullStack Developer @ Softplan/Construtech Ventures +15 anos como desenvolvedor Evangelista open](https://reader034.fdocuments.net/reader034/viewer/2022042420/5f372dc91d929b384b08b73b/html5/thumbnails/16.jpg)
Conceito• onNext: Um Observable chama esse método sempre que o
Observable emite um item. Este método toma como parâmetro o item emitido pelo Observable.
• onError: Um Observable chama esse método para indicar que não conseguiu gerar os dados esperados ou encontrou algum outro erro. Não fará mais chamadas para onNext ou onCompleted. O método onError usa como parâmetro uma indicação do que causou o erro.
• onCompleted: Um Observable chama esse método depois de ter chamado onNext pela última vez, caso não tenha encontrado nenhum erro.
![Page 17: Angular e Observables com RxJS...2019/05/17 · com RxJS QUEM SOU EU DOMINGOS TERUEL FullStack Developer @ Softplan/Construtech Ventures +15 anos como desenvolvedor Evangelista open](https://reader034.fdocuments.net/reader034/viewer/2022042420/5f372dc91d929b384b08b73b/html5/thumbnails/17.jpg)
O que faço com Observable? E onde entra
Angular nessa história?
![Page 18: Angular e Observables com RxJS...2019/05/17 · com RxJS QUEM SOU EU DOMINGOS TERUEL FullStack Developer @ Softplan/Construtech Ventures +15 anos como desenvolvedor Evangelista open](https://reader034.fdocuments.net/reader034/viewer/2022042420/5f372dc91d929b384b08b73b/html5/thumbnails/18.jpg)
Live coding
![Page 19: Angular e Observables com RxJS...2019/05/17 · com RxJS QUEM SOU EU DOMINGOS TERUEL FullStack Developer @ Softplan/Construtech Ventures +15 anos como desenvolvedor Evangelista open](https://reader034.fdocuments.net/reader034/viewer/2022042420/5f372dc91d929b384b08b73b/html5/thumbnails/19.jpg)
PERGUNTAS?
![Page 20: Angular e Observables com RxJS...2019/05/17 · com RxJS QUEM SOU EU DOMINGOS TERUEL FullStack Developer @ Softplan/Construtech Ventures +15 anos como desenvolvedor Evangelista open](https://reader034.fdocuments.net/reader034/viewer/2022042420/5f372dc91d929b384b08b73b/html5/thumbnails/20.jpg)
http://louc.me/46Xutn