[MÚSICA]
Deixe-me agora dar-lhe uma visão geral rápida de Angular e
sua relação com programa reativo,
como Angular faz uso de programação reativa.
Em particular, a biblioteca RxJs e como ele é aproveitado por
Angular para fornecer uma maneira reativa de escrever aplicações angulares.
Agora o que apresentamos nesta palestra é uma visão geral muito rápida de
o conceito geral de programação reativa, observáveis,
o padrão observado e como ele é aplicado em Angular.
Programação reativa por si só é um tópico
muito vasto que não pode ser abordado em dez minutos.
Programação reativa,
se eu precisar cobri-lo em detalhes vai se tornar um curso inteiro em seu próprio direito.
E infelizmente,
não temos tempo para incorporar um curso inteiro neste curso em particular.
Então, dado o fato de que estamos interessados principalmente em como Angular aproveita
programação reativa para nos permitir dobrar aplicações angulares,
então vamos nos concentrar nesse aspecto.
Mas ao longo do caminho,
Vou dar-lhe uma rápida introdução aos vários conceitos nesta área geral.
Se você se interessar por programação reativa,
Eu recomendo fortemente que você busque alguns dos links que eu forneci e
recursos adicionais para esta lição em particular.
Você tem acesso a um monte de material lá fora, mas
nós lhe daremos uma forte base na programação reativa.
Mas neste curso, a partir deste ponto,
vamos olhar para como Angular aproveita o paradigma de programação reativa para
projetar aplicações Angulares.
Nós não estamos apenas indo para restringir apenas a esta lição, mas
todas as lições subsequentes também verá Usado do observável e
o padrão de observação e como escrevemos aplicações reativas em angular.
Toda a discussão sobre programação reativa gira em torno de
este padrão de engenharia de software específico chamado como padrão observável.
Você se lembra da gangue de quatro que eu mencionei para você em uma das anteriores
palestras onde discutimos sobre a estrutura do controlador de visualização de modelo e
a estrutura do modelo de visão de modelo.
A mesma gangue de quatro livros contém alguns dos padrões que
tem sido usado com sucesso no padrão de programação reativa.
O padrão do observador gira em torno de observáveis.
Então você tem observáveis, cujo comportamento pode ser observado por observadores.
Então é por isso que isso é chamado de padrão observador.
Você declara certos objetos como observáveis ou sujeitos e
esses observáveis serão observados por observadores.
Agora, os próprios observadores se registrarão para
assistir as mudanças no observável e
o observável notificará os observadores sempre que ocorrerem mudanças.
Assim, neste padrão de observador, a maneira como esses observadores vão subscrever
para o observável ou se registrar com o observável.
Então, é assim que o observável sabe quais observadores estão interessados em
quaisquer mudanças em seu estado.
Assim, sempre que um observador observável dizer,
mudança em seu estado, ele notificará imediatamente todos os observadores
sobre a mudança de estado e os observadores subsequentemente podem tomar
ação com base nesta notificação da mudança no observável.
O padrão observador tem sido usado de forma muito eficaz em muitas circunstâncias
diferentes.
E, de fato, o paradigma de programação reativa é baseado em torno dele.
Então, a pergunta que vem à sua mente imediatamente é
por que falamos sobre os observáveis?
Qual é o interesse especial sobre observáveis?
Padrão de observador é uma maneira de escrever aplicativos de software.
Então, isso é baseado em torno de Streams.
Então, você tem dados que fluem seu aplicativo.
Estes dados podem ser vistos como um fluxo de valores que flui através da sua aplicação
.
Então, o fluxo é o canal primário em torno do qual observables e
padrão observável é projetado.
Então, quais fluxos você pode assinar esses fluxos.
E sempre que um valor aparece no fluxo, você pega esse valor e
então você pode reagir a esse valor.
Então, para poder reagir a esse valor, você precisa se inscrever para esse fluxo ou
você precisa se inscrever para o observável.
O observável freqüentemente continuará emitindo valores.
E quando você vê esses valores, o observador pode reagir a eles.
Agora isso também significa que quando você não estiver mais interessado,
você pode cancelar a inscrição de um observável.
Você pode dizer, eu não estou interessado em vê-lo mais e depois desaparecer.
Assim, o padrão observável permite que você observe periodicamente mudanças,
se você quiser e, em seguida, pare de observar quando você não está mais interessado.
Então esse tipo de paradigma permite que você desenhe seus aplicativos de software
de uma forma muito interessante, de uma forma muito intuitiva.
Mas para ser capaz de usar essa abordagem,
você precisa colocar sua cabeça em torno dessa abordagem.
Assim como vimos com o padrão de retorno de chamada ou vimos com o uso de promessas.
Observables é mais uma maneira de projetar aplicativos.
Então, um observável por si só será muito preguiçoso e ele vai ficar por aí.
Então, você pode criar um observável e, em seguida, apenas deixá-lo lá.
O observável fica ativo ou
fica quente quando alguém começa a se inscrever para o observador.
Então, nesse ponto, o observador entra em ação e começa a editar valores.
Então, se pelo menos um observador é confiado no observável,
então o observável começará a emitir valores.
Se ninguém for confiado, observável voltará para sua concha e permanecerá lá.
Então, você pode pensar nisso dessa maneira.
Então, se essa imagem mental ajuda você a entender
como funciona a patente de observador, então que assim seja.
Então, que irá ajudá-lo a olhar para a forma como projetamos nossas aplicações
nos exercícios que se seguem e, em seguida, as lições subsequentes
onde examinamos HTTP suportado Angular em mais detalhes.
Um outro aspecto dos observáveis é o fato de que cancelar um pedido anterior e
, em seguida, tentar novamente é muito simples com observáveis.
A promessa que você viu antes, uma vez que você começa a esperar por uma promessa,
você não pode cancelar, você está esperando.
A promessa acabará por resolver ou falhar e
então você terá que reagir não importa o que, mesmo se você não estiver mais interessado.
Mas com um observável, se você pode vender sua assinatura,
então que o que acontece com o observável não é qualquer preocupação para você em tudo.
Assim, você não precisa fazer nada, se cancelar sua assinatura.
Então, cancelar e tentar novamente no caso de o julgamento anterior não ter
sucesso é muito simples com observáveis.
Vamos ver alguns desses comportamentos em mais detalhes nos exercícios que se seguem.
Isso nos leva a esse conceito de programação reativa.
Programação reativa é baseada em torno do padrão observador e
também um padrão iterado.
Mas de qualquer forma,
o padrão observador é a característica dominante de uma programação reativa.
Então, na programação reativa, estamos interessados em fluxos de dados.
Como os dados fluem através da sua aplicação.
Qualquer fluxo de dados pode ser tratado como um fluxo.
Assim, esse fluxo de dados pode propagar alterações em todo o seu aplicativo.
E enquanto as mudanças estão sendo propagadas através do aplicativo,
em estágios intermediários você pode até pegar um fluxo específico,
modificá-lo e criar outro fluxo saindo de lá.
Então é isso que um padrão observável nos permite desenhar.
Para que todo o paradigma de programação seja construído em torno de fluxos ou fluxos de dados.
Então esta é outra maneira de olhar para resolver o seu problema.
E é por isso que estou enfatizando o fato de que você precisa se concentrar em torno de
entender como o padrão reativo ou como a programação reativa é feita na prática.
Agora, você costuma ouvir pessoas falando sobre algo chamado funcional
programação reativa.
Se você está familiarizado com o paradigma de programação funcional.
Mas além de programação reativa
é o que as pessoas costumam se referir como programação reativa funcional.
Assim, o inter-casamento dessas duas abordagens.
Agora, você verá o uso de alguns deles com Angular
à medida que você passar por este curso em particular.
Finalmente, o que dizer RXJs?
Que papel ele desempenha em todo esse ecossistema?
RXJs é uma implementação JavaScript do padrão observável e
também suporta para programação reativa.
Então, se você fosse fazer programação reativa em JavaScript,
então você aproveita a biblioteca RxJs para fazer isso.
RXJs apenas uma dessas implementações.
Há alguns outros, mas a razão pela qual estamos interessados em RXJs em particular
neste curso é porque Angular aproveita RXJs para
seu suporte para programação reativa.
Então o RXJs é uma biblioteca.
É uma biblioteca separada que está lá fora.
Você pode usar RXJs para outros fins também, não necessariamente relacionados com Angular.
Houve aplicativos que foram desenvolvidos usando RxJs per se
não relacionados ao Angular.
Mas neste curso, estamos interessados em como RXJs vem junto com
o Angular para apoiar programação reativa em Angular.
Então, há RXJs é uma biblioteca que permite que você faça programação assíncrona.
Falamos sobre programação assíncrona que promete anteriormente.
Veremos programação assíncrona com retornos de chamada no curso do nó.
E observables é mais uma maneira de olhar para
programação assíncrona, juntamente com programador orientado a eventos.
Então, se você está familiarizado com o paradigma de programação orientado a eventos,
RXJs se encaixa bem dentro desse ambiente.
A coisa toda é construída em torno de sequências observáveis.
E biblioteca RXJS fornece um tipo de núcleo chamado como Observável.
E em torno desse tipo de núcleo, você tem alguns tipos de satélite
que são criados como observadores, programadores e assuntos.
Todos estes permitem que você faça programação reativa.
Além disso, RXJs também suporta um monte de operadores.
Suporta operadores, separadores, desculpe.
Isso foi um deslize da minha língua.
RXJs suporta operadores,
operadores que são inspirados pelos operadores de matriz JavaScript.
Se você está familiarizado com operadores de matriz JavaScript como mapa, em seguida,
os operadores RxJs vai parecer muito familiar para você.
Você pode tratar um observável e
os valores que uma imagem observável como uma matriz, então é por isso que muitos dos
os operadores de matriz encontrar seu caminho em RxJs e programação reativa também.
Assim, os usuários mapear, filtrar, reduzir e
outros operadores de array também encontrarão um lugar em RXJs e programação reativa.
E isso é o que permite que você manipule eventos assíncronos como coleções.
Então, quando você está querendo esperar por
um evento assíncrono, ele será semelhante a se inscrever em um observável.
Então, quando esse observável emite o valor, você está pronto para pegar o valor e
então agir em conformidade.
Você sabe quando essa emissão vai acontecer.
Então essa é a parte assíncrona que entra em jogo com o uso de RXJs.
E como já mencionei, a razão pela qual estamos interessados em RXJs é porque
Angular aproveita a biblioteca RXJs para
fazendo seu suporte para programação reativa.
Angular em si tem um número de observáveis construídos,
como veremos em pouco tempo.
Quando você entra no mundo da programação reativa, muitas vezes você vai ouvir as pessoas falando
sobre observáveis, então você vai ouvir as pessoas falando sobre operadores e
então você também vai ouvir as pessoas falando sobre diagramas de mármore.
Agora, diagramas de mármore são uma maneira de representar
a programação reativa usando observáveis.
Então, se acontecer de você ter um observável,
então se você ver este observável como uma função do tempo,
então se este eixo representa uma função do tempo, o observável
estará periodicamente emitindo valores como este, um após o outro.
Então, se você organizar esses valores ao longo de uma sequência,
como uma função do tempo, então você veria valores sendo emitidos assim.
Existe também a possibilidade de que você possa encontrar um erro.
Nesse caso, você precisa lidar com o erro adequadamente.
Se você manipular o erro adequadamente,
você pode continuar ou você pode parar nesse ponto.
Da mesma forma, quando um observável completa todas as suas iterações,
então Ele vai ser marcado como a conclusão do observável.
Então você precisa ser capaz de até mesmo lidar com o evento de conclusão em um observável.
Dado este comportamento anotado de tempo do observável, você pode então tomar
os valores que a imagem observável e aplicar operadores nesses observáveis.
Agora esses valores podem ser vistos como uma matriz.
Se isso ajuda você a entender melhor, você pode vê-lo como uma matriz de valores.
Agora, esses valores podem então ser operados usando vários operadores.
Então é aí que seu mapa, seu filtro, sua redução e vários operadores que
qualquer biblioteca de programas reativos típicos como RXJs suporta.
Permite transformar
um conjunto de valores que você obtém de um observável em outro conjunto de valores.
Assim, você acaba criando um novo observável.
E este novo observável consistirá em
valores transformados do observável original.
Então essa é a razão pela qual eu mostro esses valores transformados como retângulos aqui.
Só para lhe dar uma impressão visual do que é que estamos tentando fazer com
um operador.
Então você está pegando um valor e transformando em um valor diferente.
E essa sequência desses valores diferentes que
Você obtém transformando os valores emitidos por um observável.
Se tornará outra cadeia de valores, e consequentemente,
se tornará outra observável.
Então você pode derivar um observável de outro observável.
Mas este segundo observável é dependente do primeiro então depende.
Seu comportamento é digitado, o primeiro através do uso deste operador.
Vamos ver exemplos destes à medida que passarmos por alguns dos exercícios
nesta lição e lições subsequentes.
E quanto ao Angular e RXJs, como eles se reúnem?
Angular, como mencionamos anteriormente, suporta uma série de observáveis por conta própria.
E este suporte de observáveis em Angular permite que você faça alguma programação reativa
dentro da sua aplicação Angular.
Assim, por exemplo, formulários em Angular,
vimos formas reativas já em uma das lições anteriores.
Nesse ponto, eu nunca mencionei a palavra observável explicitamente lá.
Mas agora que sabemos observável, vamos voltar para a forma reativa, e
então fazer alguma transformação para a forma reativa.
As próprias formas tornam-se observáveis em Angular.
E qualquer alteração nos valores de qualquer um dos elementos de formulário,
pode ser saída, e observada assinando
o observável que a estrutura Angular fornece para nós.
Da mesma forma, HTTP, que vamos encontrar no próximo módulo deste curso,
também será baseado em torno de observáveis.
Então, quando seu serviço vai e obtém dados de um servidor, a biblioteca HTTP,
ou o módulo HTTP em Angular, suporta observables.
Assim, sempre que você executar qualquer um dos métodos, obter, colocar, postar ou
excluir, usando HTTP, eles lhe darão um
observável que você pode então assinar dentro do seu serviço.
E, em seguida, transformá-lo e, em seguida, dá-lo para seus componentes, e
os componentes podem se inscrever para os observáveis.
O serviço é fornecido através da transformação dos fluxos HTTP.
E assim é onde a programação reativa e
fluxo de dados através do seu aplicativo Angular se torna muito simples.
Da mesma forma, há um AsyncPipe, que você encontrará mais tarde neste curso.
E também alterar a detecção construída em torno de observáveis em Angular.
Você verá alguns exemplos disso no resto deste curso.
Agora, voltando à pergunta que vimos no slide anterior.
Como você pega um observável e transformá-lo em outro observável?
Aqui está um exemplo que você encontrará no exercício que segue esta palestra.
Então aqui, temos o parâmetro de rota
dentro do nosso componente de menu, que usa o parâmetro de rota para
fornecer o valor do prato selecionado para o componente de detalhe do prato.
Assim, o parâmetro route torna-se um observável.
Módulo roteador do Angular tem uma atividade ActivatedRoute serviço que
suporta um monte de observáveis e um deles sendo os parâmetros observáveis.
Os parâmetros observáveis estão vinculados aos parâmetros de rota.
E assim qualquer alteração nos parâmetros,
na URL que você encontrar será emitida como um observável.
Agora, então, quando você obtém o observável, assim como você pode ver,
você pode obter acesso a este observável dizendo estes parâmetros de rota em seu código.
Então os parâmetros em si é um observável aqui.
Agora, para estes parâmetros observáveis,
você pode aplicar um operador como um operador aqui chamado switchmap.
Veremos o uso disso no trecho.
O operador de mapa de comutação leva os parâmetros observáveis.
E então transforma os paramás observáveis em outro observável que é um prato.
Ele leva o valor params, e, em seguida, extrai o valor ID dos parâmetros,
que lhe dá acesso ao parâmetro route, o id, ou
o parâmetro que você especificou, e então usa isso para ir buscar o prato.
Então, toda vez que o parâmetro muda, isso resultará em uma busca de um novo prato.
E assim cada vez que o parâmetro muda,
que é equivalente a emitir um novo valor por seus parâmetros observáveis.
Isso é transformado em busca do novo prato para
que é o ID correspondente.
Assim, o prato vai então se tornar outro observável.
Agora, quando este prato observável fica disponível, você pode assinar este
prato observável aqui, e obter o valor do prato.
E quando você obtém o valor do prato, então você pode pegar o valor do prato, e então
criar sua variável de prato dentro do componente de detalhe do prato para esse valor do prato.
Assim, qualquer alteração no parâmetro de rota se propaga através deste operador de mapa de comutação
em um observável,
que quando observado através do subscrito,
permitirá que você transforme isso e atribua isso a outro prato.
E quando isso acontece, sua visão pode ser atualizada com
o novo prato que foi obtido a partir do serviço.
Então agora, você vê como os dados fluem através do parâmetro route,
através do operador switchmap e
para resultando na mudança da visão do componente de detalhes do prato.
Essa é a razão pela qual programação baseada observável ou
programação reativa em Angular torna-se muito útil para
implementar certos recursos dentro de seu aplicativo Angular.
Este é um exemplo.
Vamos ver o uso deste exemplo particular em
o exercício que segue esta palestra.
Eu pensei em tornar mais fácil para
você se lembrar de tudo isso apenas cantando esta Ode to Observables.
[MÚSICA]
Você deve cantar isso ao som de,
You Call Me Al de Paul Simon, da fama de Simon e Garfunkel.
Se você está virando e dizendo, quem é Paul Simon?
Desculpe, geração diferente.
[MÚSICA]