[MUSIC]
Permettez-moi maintenant de vous donner un aperçu rapide de Angular et
sa relation avec le programme réactif,
comment Angular utilise-t-il la programmation réactive.
En particulier, la bibliothèque RxJS et comment elle est exploitée par
Angular pour fournir un moyen réactif d'écrire des applications Angular.
Maintenant, ce que nous présentons dans cette conférence est un aperçu très rapide de
le concept général de programmation réactive, observables,
le modèle observé et comment il est appliqué dans Angular.
La programmation réactive en soi est un très vaste sujet
qui ne peut être traité en dix minutes.
La programmation réactive,
si j'ai besoin de le couvrir en détail deviendra un cours entier à part entière.
Et malheureusement,
, nous n'avons pas le temps d'intégrer un cours entier dans ce cours particulier.
Donc, étant donné que nous sommes principalement intéressés par la façon dont Angular exploite la programmation réactive
pour nous permettre de doubler les applications Angular,
donc nous allons nous concentrer sur cet aspect.
Mais en chemin,
, je vais vous présenter rapidement les différents concepts dans ce domaine général.
Si vous vous intéressez à la programmation réactive,
Je vous conseille fortement de poursuivre certains des liens que j'ai fournis et
ressources supplémentaires pour cette leçon particulière.
Vous avez accès à beaucoup de matériel là-bas, mais
nous vous donnerons une solide base dans la programmation réactive.
Mais dans ce cours, à partir de ce stade,
, nous allons voir comment Angular exploite le paradigme de programmation réactive pour
concevoir des applications Angular.
Nous ne allons pas seulement nous limiter à cette leçon, mais
toutes les leçons suivantes verront également Utilisé de l'observable et
le modèle d'observation et comment nous écrivons des applications réactives en angulaire.
Toute la discussion sur la programmation réactive tourne autour
ce modèle particulier d'ingénierie logicielle appelé comme modèle observable.
Vous vous souvenez du gang de quatre que je vous ai mentionné dans l'une des précédentes conférences
où nous avons discuté du framework de contrôleur de vue modèle et
le framework de modèle de vue modèle.
Le même gang de quatre livres contient une partie du modèle que
a été utilisé avec succès dans le modèle de programmation réactive.
Le modèle d'observateur tourne autour des observables.
Donc vous avez des observables, dont le comportement peut être observé par des observateurs.
C'est pourquoi cela s'appelle le modèle d'observateur.
Vous déclarez certains objets comme observables ou sujets et
ces observables seront observés par des observateurs.
Maintenant, les observateurs eux-mêmes s'inscriront à
regarder les changements dans l'observable et
l'observable avertira les observateurs chaque fois que des changements se produisent.
Donc, dans ce modèle d'observateur, la façon dont ces observateurs vont souscrire
à l'observable ou s'inscrire auprès de l'observable.
Donc, c'est ainsi que l'observable sait quels observateurs sont intéressés par
tout changement dans son état.
Ainsi, chaque fois qu'un observable observable disent,
changement dans son état, il informera immédiatement tous les observateurs
du changement d'état et les observateurs pourront ensuite prendre des mesures basées sur cette notification du changement dans l'observable.
Le modèle d'observateur a été utilisé de manière très efficace dans de nombreuses circonstances
différentes.
Et en effet, le paradigme de programmation réactive est basé autour de lui.
Donc, la question qui vous vient immédiatement à l'esprit est
pourquoi parlons-nous des observables ?
Quel est l'intérêt particulier pour les observables ?
Observer pattern est une façon d'écrire des applications logicielles.
Donc, cela est basé autour de Streams.
Donc, vous avez des données qui écoulent votre application.
Ces données peuvent être visualisées comme un flux de valeurs qui circule dans votre application
.
Ainsi, le flux est le canal principal autour duquel les observables et
observables sont conçus.
Donc, quels flux vous pouvez vous abonner à ces flux.
Et chaque fois qu'une valeur arrive sur le flux, vous prenez cette valeur et
, alors vous pouvez réagir à cette valeur.
Donc, pour pouvoir réagir à cette valeur, vous devez vous abonner à ce flux ou
vous devez vous abonner à l'observable.
L'observable continuera fréquemment à émettre des valeurs.
Et quand vous voyez ces valeurs, l'observateur peut réagir à celles-ci.
Maintenant, cela signifie aussi que lorsque vous n'êtes plus intéressé,
vous pouvez vous désabonner d'un observable.
Tu peux dire, je ne suis plus intéressé à te regarder et ensuite disparaître.
Ainsi, le modèle observable vous permet d'observer périodiquement les changements,
si vous voulez, puis arrêtez d'observer quand vous n'êtes plus intéressé.
Donc ce genre de paradigme vous permet de concevoir vos applications logicielles
d'une manière très intéressante, d'une manière très intuitive.
Mais pour pouvoir utiliser cette approche,
vous devez contourner cette approche.
Tout comme nous l'avons vu avec le modèle de rappel ou nous avons vu avec l'utilisation de promesses.
Observables est une autre façon de concevoir des applications.
Donc, un observable par lui-même sera très paresseux et il va juste traîner là.
Donc, vous pouvez créer un observable et ensuite laisser là.
L'observable devient actif ou
il devient chaud quand quelqu'un commence à s'abonner à l'observateur.
Donc, à ce moment-là, l'observateur se lance dans l'action et commence à modifier les valeurs.
Donc, si au moins un observateur est confié dans l'observable,
alors l'observable commencera à émettre des valeurs.
Si personne n'est confié, observable retournera dans sa coquille et y restera.
Donc, vous pouvez y penser de cette façon.
Donc, si cette image mentale vous aide à comprendre
comment fonctionne le brevet d'observateur, alors qu'il en soit ainsi.
Donc, cela vous aidera à regarder la façon dont nous concevons nos applications
dans les exercices qui suivent, puis les leçons suivantes
où nous examinons HTTP pris en charge Angular plus en détail.
Un autre aspect des observables est le fait que l'annulation d'une demande précédente et
puis réessayer est très simple avec les observables.
La promesse que vous avez vue plus tôt, une fois que vous commencez à attendre une promesse,
vous ne pouvez pas annuler, vous attendez.
La promesse finira par résoudre ou échouer et
alors vous devrez réagir peu importe ce que même si vous n'êtes plus intéressé.
Mais avec un observable, si vous pouvez vendre votre abonnement,
alors que ce qui se passe avec l'observable ne vous concerne pas du tout.
Et donc vous n'avez rien à faire, si vous annulez votre abonnement.
Donc, annuler et réessayer au cas où le procès précédent ne réussit pas
est très simple avec les observables.
Nous verrons certains de ces comportements plus en détail dans les exercices qui suivent.
Cela nous amène à ce concept de programmation réactive.
La programmation réactive est basée sur le modèle d'observateur et
aussi un modèle itéré.
Mais de toute façon,
le modèle d'observateur est la caractéristique dominante d'une programmation réactive.
Donc, dans la programmation réactive, nous sommes intéressés par les flux de données.
Comment les données circulent dans votre application.
Tout flux de données peut être traité comme un flux.
Ainsi, ce flux de données peut propager des modifications dans votre application.
Et pendant que les changements sont propagés à travers l'application,
aux étapes intermédiaires, vous pouvez même prendre un flux particulier,
le modifier et créer un autre flux sortant de là.
C'est donc ce qu'un modèle observable nous permet de dessiner.
Ainsi, tout le paradigme de programmation est construit autour de flux ou de flux de données.
C'est donc une autre façon de chercher à résoudre votre problème.
Et c'est pourquoi je souligne le fait que vous devez faire votre tête autour de
comprendre comment le modèle réactif ou comment la programmation réactive est faite dans la pratique.
Maintenant, vous entendez souvent des gens parler de quelque chose qu'on appelle la programmation réactive
fonctionnelle.
Si vous êtes familier avec le paradigme de programmation fonctionnelle.
Mais plus la programmation réactive
est ce que les gens font souvent référence à la programmation réactive fonctionnelle.
Donc, l'intermariage de ces deux approches.
Maintenant, vous verrez l'utilisation de certains d'entre eux avec Angular
pendant que vous passez par ce cours particulier.
Enfin, qu'en est-il de RxJS ?
Quel rôle joue-t-il dans tout cet écosystème ?
RxJS est une implémentation JavaScript du modèle observable et
prend également en charge la programmation réactive.
Donc, si vous deviez faire de la programmation réactive en JavaScript,
alors vous tirez parti de la bibliothèque RxJS pour le faire.
RxJS juste une telle implémentation.
Il y en a quelques autres mais la raison pour laquelle nous sommes intéressés par RxJS en particulier
dans ce cours est parce que Angular tire parti de RxJS pour
son support pour la programmation réactive.
Donc le RxJS est une bibliothèque.
C'est une bibliothèque séparée qui est là.
Vous pouvez utiliser RxJS à d'autres fins aussi, pas nécessairement liées à Angular.
Il y a eu des applications qui ont été développées en utilisant RxJS en soi
non liées à Angular.
Mais dans ce cours, nous sommes intéressés par la façon dont RxJS se réunit avec
l'Angular pour soutenir la programmation réactive dans Angular.
Donc, il y a RxJS est une bibliothèque qui vous permet de faire de la programmation asynchrone.
Nous avons parlé de programmation asynchrone qui promet plus tôt.
Nous verrons une programmation asynchrone avec des rappels dans le cours de noeud.
Et observables est une autre façon de regarder la programmation asynchrone
, avec un programmeur piloté par événement.
Donc, si vous êtes familier avec le paradigme de programmation axé sur les événements,
RxJS s'intègre bien dans cet environnement.
Le tout est construit autour de séquences observables.
Et la bibliothèque RxJS vous fournit un type de noyau appelé Observable.
Et autour de ce type de noyau, vous avez des types de satellites
qui sont construits appelés observateurs, planificateurs et sujets.
Tous ces éléments vous permettent de faire de la programmation réactive.
De plus, RxJS supporte également tout un tas d'opérateurs.
Supporte les opérateurs, les séparateurs, désolé.
C'était un glissement de ma langue.
RxJS prend en charge les opérateurs, les opérateurs
qui sont inspirés par les opérateurs de tableau JavaScript.
Si vous êtes familier avec les opérateurs de tableau JavaScript comme map alors
les opérateurs RxJS vous sembleront très familiers.
Vous pouvez traiter un observable et
les valeurs qu'une image observable comme un tableau, c'est pourquoi beaucoup de
les opérateurs de tableau trouvent leur chemin dans RxJS et la programmation réactive aussi.
Ainsi, les utilisateurs cartographient, filtrent, réduisent et
d'autres opérateurs de tableau trouveront également une place dans RxJS et la programmation réactive.
Et c'est ce qui vous permet de gérer les événements asynchrones en tant que collections.
Donc, quand vous voulez attendre
un événement asynchrone, il sera similaire à s'abonner à un observable.
Donc, quand cet observable émet la valeur, vous êtes prêt à attraper la valeur et
ensuite agir en conséquence.
Vous savez quand cette émission va avoir lieu.
C'est donc la partie asynchrone qui entre en jeu avec l'utilisation de RxJS.
Et comme je l'ai déjà mentionné, la raison pour laquelle nous sommes intéressés par RxJS est parce que
Angular exploite la bibliothèque RxJS pour
faisant son support pour la programmation réactive.
Angular lui-même a un certain nombre d'observables construits,
comme nous le verrons dans un court laps de temps.
Lorsque vous entrez dans le monde de la programmation réactive, vous entendrez souvent des gens parler
d'observables, puis vous entendrez des gens parler d'opérateurs et
puis vous entendrez aussi des gens parler de diagrammes de marbre.
Maintenant, les diagrammes en marbre sont un moyen de représenter
la programmation réactive en utilisant des observables.
Donc, si vous avez un observable,
alors si vous voyez cela observable en fonction du temps,
donc si cet axe représente une fonction du temps, l'observable
émettra périodiquement des valeurs comme celle-ci, l'une après l'autre.
Donc, si vous organisez ces valeurs le long d'une séquence,
en fonction du temps, vous verrez des valeurs émises comme ceci.
Il y a aussi une possibilité que vous puissiez rencontrer une erreur.
Dans ce cas, vous devez gérer l'erreur de manière appropriée.
Si vous gérez l'erreur de manière appropriée,
vous pouvez continuer ou vous pouvez arrêter à ce moment-là.
De même, quand un observable complète toutes ses itérations,
alors Il sera marqué comme l'achèvement de l'observable.
Donc, vous devez être capable de gérer même l'événement d'achèvement dans un observable.
Compte tenu de ce comportement annoté de temps de l'observable, vous pouvez alors prendre
les valeurs que l'image observable et appliquer des opérateurs sur ces observables.
Maintenant, ces valeurs peuvent être vues comme un tableau.
Si cela vous aide à mieux comprendre, vous pouvez le voir comme un tableau de valeurs.
Maintenant, ces valeurs peuvent être exploitées en utilisant différents opérateurs.
C'est donc là que votre carte, votre filtre, votre réduction et plusieurs opérateurs que
toutes les bibliothèques de programmes réactifs typiques comme RxJS supportent.
Permet de transformer
un ensemble de valeurs que vous obtenez d'un observable en un autre ensemble de valeurs.
Ainsi, vous finissez par créer un nouvel observable.
Et ce nouvel observable sera composé de
valeurs transformées de l'observable original.
C'est donc la raison pour laquelle je montre ces valeurs transformées en rectangles ici.
Juste pour vous donner une impression visuelle de ce que nous essayons de faire avec
un opérateur.
Donc, vous prenez une valeur puis la transformez en une valeur différente.
Et cette séquence de ces différentes valeurs que
Vous obtenez en transformant les valeurs émises par un observable.
deviendra elle-même une autre chaîne de valeurs, et par conséquent,
deviendra une autre observable.
Ainsi, vous pouvez dériver un observable d'un autre observable.
Mais ce second observable dépend du premier donc cela dépend.
Son comportement est tapé, le premier par l'utilisation de cet opérateur.
Nous en verrons des exemples au cours de certains exercices
de cette leçon et des leçons suivantes.
Qu'en est-il d'Angular et de RxJS, comment se réunissent ?
Angular, comme nous l'avons mentionné précédemment, supporte un certain nombre d'observables à lui seul.
Et ce support d'observables dans Angular vous permet de faire de la programmation réactive
dans votre application Angular.
Ainsi, par exemple, les formes dans Angular,
nous avons vu des formes réactives déjà dans l'une des leçons précédentes.
À ce moment-là, je n'ai jamais mentionné explicitement le mot observable.
Mais maintenant que nous savons observables, nous allons revenir à la forme réactive, et
ensuite faire une transformation en forme réactive.
Les formes elles-mêmes deviennent observables dans Angular.
Et tout changement dans les valeurs de l'un des éléments de forme,
peut être produit, et observé en souscrivant à
l'observable que le framework Angular nous fournit.
De même, HTTP, que nous rencontrerons dans le prochain module de ce cours,
sera également basé sur des observables.
Ainsi, lorsque votre service va chercher des données à partir d'un serveur, la bibliothèque HTTP,
ou le module HTTP dans Angular, prend en charge les observables.
Donc, chaque fois que vous effectuez l'une des méthodes, get, put, post ou
delete, en utilisant HTTP, elles vous donneront une
observable que vous pourrez alors vous abonner dans votre service.
Et puis transformez-le ensuite, puis donnez-le à vos composants, et
les composants peuvent s'abonner aux observables.
Le service est fourni en transformant les flux HTTP.
Et c'est là que la programmation réactive et le flux
de données à travers votre application Angular deviennent très simples.
De même, il existe un AsyncPipe, que vous rencontrerez plus tard dans ce cours.
Et aussi changer la détection construite autour des observables dans Angular.
Vous en verrez quelques exemples dans le reste de ce cours.
Maintenant, revenons à la question que nous avons vue dans la diapositive précédente.
Comment prendre un observable et le transformer en un autre observable ?
Voici un exemple que vous rencontrerez dans l'exercice qui suit cette conférence.
Donc ici, nous avons le paramètre de route
dans notre composant de menu, qui utilise le paramètre de route pour
fournir la valeur du plat sélectionné au composant de détail de plat.
Ainsi, le paramètre de route devient observable.Le module routeur de
Angular a un service activatedRoute d'activité qui
prend en charge un tas d'observables et l'un d'eux étant les paramètres observables.
Les paramètres observables sont liés aux paramètres d'itinéraire.
Et donc tout changement dans les paramètres,
dans l'URL que vous rencontrez sera émis comme observable.
Maintenant, donc quand vous obtenez l'observable, de sorte que comme vous pouvez le voir,
vous pouvez avoir accès à cet observable en disant cette route params dans votre code.
Donc, le params lui-même est observable ici.
Maintenant, à ce params observable,
vous pouvez appliquer un opérateur comme un opérateur ici appelé switchmap.
Nous verrons l'utilisation de ceci dans l'extrait.
L'opérateur switchmap prend les paramètres observables.
Et puis transforme les paramètres observables en un autre observable qui est un plat.
Il prend la valeur params, puis extrait la valeur ID des params,
qui vous donne accès au paramètre route, l'id, ou
le paramètre que vous avez spécifié, puis l'utilise pour aller chercher le plat.
Donc, chaque fois que le paramètre change, il se traduira par une récupération d'un nouveau plat.
Et donc chaque fois que le paramètre change,
qui équivaut à émettre une nouvelle valeur par leurs paramètres observables.
Cela se transforme en récupération du nouveau plat pour
qui est l'ID correspondant.
Ainsi, le plat deviendra alors un autre observable.
Maintenant, quand ce plat observable devient disponible, vous pouvez vous abonner à ce plat
observable ici, et obtenir la valeur du plat.
Et quand vous obtenez la valeur de plat, alors vous pouvez prendre la valeur de plat, puis il
créer votre variable de plat dans votre composant de détail de plat à cette valeur de plat.
Ainsi, toute modification du paramètre de route se propage à travers cet opérateur
switchmap en un observable,
qui, lorsqu'il est observé à travers l'abonné,
vous permettra de transformer cela et de l'assigner à un autre plat.
Et quand cela se produit, votre vue peut être mise à jour avec
le nouveau plat qui a été obtenu à partir du service.
Alors maintenant, vous voyez comment les données circulent à travers le paramètre de route,
via l'opérateur switchmap, et
en résultant dans le changement de la vue de votre composant de détail de plat.
C'est la raison pour laquelle la programmation basée sur l'observation ou la programmation réactive
dans Angular devient très utile pour
implémenter certaines fonctionnalités dans votre application Angular.
C'est un exemple de ce genre.
Nous verrons l'utilisation de cet exemple particulier dans
l'exercice qui suit cette conférence.
J'ai pensé qu'il serait facile pour
de te souvenir de tout cela en chantant simplement cette Ode aux Observables.
[MUSIQUE]
Vous devriez chanter ceci à l'air de,
You Can Call Me Al de Paul Simon de la renommée Simon et Garfunkel.
Si vous vous retournez et dites, qui est Paul Simon ?
Désolé, génération différente.
[MUSIQUE]