11521 sujets

JavaScript, DOM et API Web HTML5

Salut à tous,

Je tenais a vous faire partager mes connaissances autour d'une suite de tutoriels portant sur la programmation réactive fonctionnelle à l'aide de la bibliothèque RxJS.
Dans cette partie théorique on introduit des sujets tels que :
-Différences de programmation (Imperative vs Declarative)
-Programmation Fonctionnelle (Function First Class Citizen - High Order Function - Immutable Data - Pure Function - Recursion - Functor - Monad - Lazy Evaluation)
-Programmation Réactive
-Deux Patron de Conception issue de la programmation Orientée Objet
-Flux de données Unidirectionnel
Tout ceci permet de comprendre les bases internes de la bibliothèque RxJS indispensables pour la suite.

RxJS: Paradigme

Slides
Tout retours est le bienvenue
Hello everybody,

On continue avec la dernière partie purement théorique présentant en détail ce qui constitue un stream de bout en bout:
avec des Observables constituant ensemble un pipeline débouchant sur des Observers.
Nous détaillerons les concepts fondamentaux d'unidrectional data flow, de separation of concern ainsi que de pure function.
Enfin, nous nous focaliserons sur l'API de la bibliothèque RxJS de Reactive.X pour avoir un première aperçu sur comment développer un stream.

J'ai été ravie de pouvoir enregistrer tout cela j'espère que cela se ressent. Je vous laisse en bonne compagnie et vous dit à dans deux semaines pour la prochaine vidéo portant sur les Observables Operators.

RxJS: Streams

Slides
Hola le monde,

Cette semaine on prend le temps d'intérioriser ce que l'on a vu avec une vidéo beaucoup plus légère néanmoins on se doit de faire un rapide point sur ce que sont les Marble Diagrams et comment on lit ce type de diagramme idéal pour décrire les opérateurs RxJS et plus largement de programmation réactive:

Bonne vidéo

RxJS: Marble Diagram

Slides
Hallo every,

Aujourd'hui, on poursuit notre étude RxJS où l'on décortique ce qu'est un Observable Operator.
On abordera ici le fonctionnement commun à tous. On prendra le temps dans les prochaines vidéos de faire un focus sur chacun des types existant d'Observable Operator (Creation, Filtering, combination, transformation etc.).

On va ensuite concrètement expliciter les principaux opérateurs simple bijection avec le fameux MFR => Map, Filter, Reduce que possède nativement les array JavaScript.

Enfin, on utilisera ces méthodes dans deux petits exercices de recherche de caractère dans un texte.
Tout ceci dans le but d'appliquer et de comprendre la pensée fonctionnelle.
En effet, le raisonnement fonctionnel n'est pas forcément intuitif selon son background, il est donc impératif de l'appréhender un tant soit peu avant d'utiliser des bibliothèques fonctionnelles réactives telles que RxJS dans le cas présent.

Comme toujours j'ai pris un plaisir fou à enregistrer cette vidéo, je vous laisse avec celle-ci

RxJS: Core Observable Operators

Slides
Ciao,

On poursuit avec l'étude d'une catégorie d'Observable Operator indispensable pour "Rxfié" nos applications *drum rolls* ... les Creator Operator!
Bah oui c'est les opérateurs qui seront nos points d'entrées dans la bibliothèque RxJS.

Nous commencerons par les présenter vous verrez ils ne sont pas nombreux et assez intuitifs.
Ensuite nous les illustrerons un à un.
Et enfin deux petits exercices qui permettront d'avoir une vue de bout en bout quant au raisonnement et la philosophie présentée jusqu'ici.

Et oui on a fait du chemin depuis le début de cette formation, il est temps nous sommes prêts et suffisamment armé pour commencer à manier la bibliothèque.

Certes, il nous reste encore pas mal de nouvelle catégorie à présenter que je garde pour la prochaine fois où l'on abordera les filtering operators

Allez la vidéo, à bientôt Smiley cligne

RxJS: Creator Operators

Slides
Modifié par Echyzen (22 Jan 2019 - 10:43)
Moin moin,

Filtrer en voilà une opération essentielle à toutes applications. C'est pourquoi nous allons commencer par ces opérateurs après avoir étudiés les Creator Operators
La bibliothèque RxJS, nous propose une panoplie de filtre qui vont nous permettre de régler tous les cas.

Nous verrons notamment que le temps peut être considérer comme un simple prédicat de filtre, en voilà un autre intérêt de la programmation réactive fonctionnelle pour résoudre nos de délai, ce qui pouvez très rapidement devenir casse-tête en plain JavaScript.


Enjoy Smiley cligne

RxJS: Filtering Operators

Slides


La prochaine fois nous étudierons les Opérateurs de Combinaison ceci sur trois différentes vidéos car oui combiné va nous permettre d'obtenir des stream contenant une business logique avancée et sans complexifié. Oubliez les noeuds d'asynchronisme qui nous bloque l'application, les streams vont nous permettre de nous rendre d'un point A à un point B avec une containte minimal. Mais çà c'est pour la prochaine fois A bientôt Smiley lol
Modifié par Echyzen (06 Feb 2019 - 10:29)
Ciao tutti,

Passons aux opérateurs de combinaison avec cette premiere vidéo introduisant la catégorie puis abordant les opérateurs: merge, concat, switchAll.
Enfin, en exercice du jour, je vous propose d'implémenter une searchbar aux fonctionalités très poussé et ceux en utilisant tout ce que l'on a étudié jusqu'ici en particulier les opérateurs du jour.

Bone visionnage Smiley cligne

RxJS: Combination Operators I

Slides

La prochaine fois nous poursuivrons avec une fournée de nouveaux opérateurs: combineLatest, forkJoin, zip, withLatestFrom, exhaust, race, et startWith.

A ++
Modifié par Echyzen (24 Mar 2019 - 14:55)
Hello le monde,

Chose promise chose due :

RxJS: Combination Operators II

Slides


La prochaine vidéo clôturera cette catégorie d'Observable à savoir les Combination Observable avant d'aborder la catégorie des Transformation Observable qui nous permettra de clore l'études des catégories d'Observable et donc de rentrer dans des choses beaucoup beaucoup plus puissante et donc plus poussé ahah deux curseurs souvent liés pour le meilleur et le pire
Vidéo courte pour clôturer les opérateurs de combinaisons, on a déjà pas mal de connaissance sur cette catégorie d'opérateurs.

RxJS: Combination Operators III

Slides

La prochaine fois on aborde la dernière catégorie d'opérateur, non encore une! Oui la dernière promis j'ai nommé les opérateurs de transformation.
A bientôt
Il est temps d'aborder la dernière grande catégorie d'Observable Operator, une catégorie très importante puisqu'elle est la seule à pouvoir altérer directement les valeurs de nos streams.
Bien évidemment, l'opérateur incontournable Map en est le plus représentatif, néanmoins vous pourriez être agréablement surpris de ce que propose RxJS.


RxJS: Transformation Operators

Slides

Il y a aura une deuxième partie explicitant les opérateurs de Buffer pouvant être inclus dans la catégorie Transformation.
Après cela nous en aurons terminé avec les bases de cette bibliothèque et pourrons alors entreprendre d'utiliser toute la puissance RxJS pour repousser les limites de la Programmation Réactive Fonctionnelle car oui elle en a encore sous le coffre!

Tschüss, Bis bald
On clôture l'étude des différents opérateurs avec la deuxième partie portant sur les opérateurs de transformation.
Plus particulièrement une sous-catégorie appelée les opérateurs de bufferisation.

RxJS: Buffering Operators

Slides

Alors maintenant, que nous avons explicité l'entièreté de l'API de la bibliothèque RxJS, il est temps de rentrer dans les concepts avancés.
Vous allez encore être étonné par ce que la programmation réactive fonctionnelle peut proposer.
Ainsi dans la prochaine vidéo nous allons étudier la "température" des streams car oui il existe différents types de stream, les Observables sont qu'une partie la principale certes mais qu'une partie...

Till then see you
Salut,

Bon cela aura été compliqué ces derniers temps mais je vais essayer de retrouver progressivement l'ancien rythme.

On débute les concepts avancés avec la notion de température. Il existe des types "Cold" ou "Hot" et même un hybrid appelé "Warm".
Jusqu'ici nous avons étudié que des streams Cold qui sont programmatiquement pur dans l'approche fonctionnel. C'est pour cette raison qu'il faut les privilégier.

La température du stream conduit à des comportements très différents, il est essentiel d'avoir cela en tête lorsque l'on manipule des streams, cela évite de passer du temps à débugger inutilement!

RxJS: Buffering Operators


Slides


Dans la prochaine vidéos on étudiera tous les principaux opérateurs de Multicasting pour pouvoir avoir le choix dans notre stratégie de manipulation de stream Hot & Warm.

Bis Bald