angular e observables com rxjs...2019/05/17  · com rxjs quem sou eu domingos teruel fullstack...

20
Angular e Observables com RxJS

Upload: others

Post on 10-Jul-2020

2 views

Category:

Documents


0 download

TRANSCRIPT

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

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

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

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

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

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

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

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

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

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

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
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

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

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

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

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

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

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

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

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

http://louc.me/46Xutn