CSP vs RxJS: ce que vous ne savez pas.

Qu'est-il arrivé à CSP?

Photo par James Pond sur Unsplash

Vous avez probablement cliqué sur cet article en vous demandant «Qu'est-ce que le CSP?». Il s'agit de processus séquentiels en communication. Toujours dérouté?

CSP est une méthode de communication entre différentes fonctions (générateurs) de votre code via un canal partagé.

Qu'est-ce que cela signifie dans le monde? Laisse-moi te le dire tout de suite. Il y a ce concept de canal. Pensez-y comme une file d'attente. Vous pouvez mettre des trucs dessus et les enlever.

Donc, avec deux fonctions, vous pouvez avoir l’une ajouter des éléments sur le canal (producteur) et une autre retirer et faire un travail (consommateur).

Un cas d'utilisation avancé typique serait plusieurs producteurs et un consommateur. De cette façon, vous pouvez contrôler les données que vous obtenez, mais plusieurs éléments peuvent vous être communiqués.

Contrairement à RxJS, ces canaux sont automatiques. Vous n’obtenez pas les valeurs bon gré mal gré, vous devez les demander.

Utiliser CSP

Voici un petit exemple de CSP utilisant la bibliothèque extrêmement simple (et morte) Channel4:

Les canaux CSP fonctionnent de manière asynchrone. Donc, dès que cela fonctionne, le message synchrone «DONE» est enregistré en premier. Ensuite, nos preneurs de canal sont exécutés dans l’ordre.

La chose la plus intéressante pour moi est la nature bloquante (mais asynchrone) du CSP. Remarquez comment nous avons créé la troisième prise avant de mettre «C» sur le canal. Contrairement aux deux premières fonctions de prise, la troisième n’a rien à prendre. Une fois que quelque chose entre dans le canal, il le prend immédiatement.

Notez également que les consommateurs doivent constamment retirer leurs informations du canal jusqu'à la fermeture de ce dernier. C’est pourquoi «D» n’est jamais enregistré. Vous devez définir une autre prise pour extraire la valeur suivante du canal.

Avec les observables, des valeurs vous sont données afin que vous n’ayez pas à vous soucier de les retirer manuellement. Si vous souhaitez mettre ces valeurs en mémoire tampon, RxJS fournit plusieurs méthodes de pipeline à cet effet. Pas besoin d'utiliser CSP.

Le concept derrière les observables est que chaque auditeur reçoit les mêmes données dès que l'observateur appelle. Avec CSP, c’est comme l’approche IxJS qui consiste à traiter des données en morceaux.

CSP EST MORT !?

Vous pouvez trouver des implémentations CSP dans Go and Closure. En JavaScript, toutes les bibliothèques CSP, sauf quelques-unes, sont mortes et même dans ce cas, leur auditoire est restreint.

L’incroyable discours de Vincenzo Chianese m’a révélé le CSP. Il a recommandé cette bibliothèque haut de gamme appelée js-csp. Malheureusement, ce n’est plus maintenu.

D'après ce qu'il a dit dans son discours de 2017, cela semblait être une grosse affaire. Il a expliqué comment les transducteurs allaient exploser dans quelques mois et comment js-csp les avait déjà pris en charge.

Il semblait que CSP pourrait fondamentalement changer la manière dont vous avez développé les applications asynchrones en JavaScript. Mais rien de tout cela ne s'est jamais produit. Les transducteurs sont morts; remplacés par des bibliothèques comme RxJS, et le battage publicitaire autour de CSP dissous.

Vincenzo a noté à quel point le CSP est un tout autre niveau que les promesses. Il a raison. Le pouvoir que vous obtenez de multiples fonctions qui interagissent de manière asynchrone est incroyable.

Les promesses, de par leur nature avide, ne sont même pas dans le même stade. Il ne savait pas que les dernières bibliothèques du CSP finiraient par soutenir leurs promesses.

Alternative CSP: Redux-Saga

Si vous avez déjà utilisé Redux-Saga, les idées et les concepts autour du CSP vous semblent familiers. C’est parce qu’ils le sont. En fait, Redux-Saga est une implémentation de CSP en JavaScript; le plus populaire de loin.

Il existe même un concept de «canaux» dans Redux-Sagas:
https://github.com/redux-saga/redux-saga/blob/master/docs/advanced/Channels.md

Les canaux reçoivent des informations d'événements externes, des actions de tampon dans le magasin Redux et communiquent entre deux sources. C’est la même chose dans CSP, avec les mêmes fonctions de prise et de mise.

Assez cool de voir une implémentation réelle de CSP en JavaScript, mais très peu d’étranges l’ont remarquée. Cela montre à quel point peu de CSP a décollé avant de mourir.

Alternative CSP: Redux-Observable

Vous avez peut-être entendu parler de quelque chose appelé Redux-Observable. C'est un concept similaire à CSP et Redux-Saga, mais au lieu du style impératif des générateurs, il adopte une approche fonctionnelle et utilise les pipelines RxJS appelés «épopées».

Dans Redux-Observable, tout se passe à travers deux sujets: action $ et state $. Ce sont vos canaux.

Au lieu de prendre et de mettre manuellement, vous écoutez des actions spécifiques en tant que consommateur d'un canal d'action ou d'état. Chaque épopée a la capacité d'être également producteur en envoyant des actions à travers le pipeline.

Si vous souhaitez créer une file d’attente dans Redux-Observable, tout comme CSP, c’est un peu plus compliqué, car il n’ya pas d’opérateur disponible à cet effet, mais c’est tout à fait possible.

J'ai créé une réplique qui ne fait que ça:

Par rapport à notre exemple précédent, CSP, voici ce que vous pouvez vous attendre à voir:

L'exemple ne nécessite que RxJS et tout est dans un seul fichier pour plus de simplicité. Comme vous pouvez le constater, il est beaucoup plus difficile de mettre en file d'attente les éléments dans RxJS de la même manière que vous le feriez avec CSP. C’est tout à fait possible, mais nécessite beaucoup plus de code.

Personnellement, j'aimerais voir RxJS ajouter un opérateur comme bufferWhen qui vous permet de séparer des éléments individuels au lieu de la totalité du tampon. Vous pourrez alors réaliser le style CSP dans Redux-Observable beaucoup plus facilement.

Conclusion

CSP était un concept cool, mais il est mort en JavaScript. Redux-Saga et Redux-Observable sont des alternatives intéressantes.

Même avec la possibilité d’intégrer des bibliothèques de transducteurs, RxJS a toujours une longueur d'avance. C’est une communauté massive d’éducateurs et d’applications de production qui rend difficile la concurrence.

C’est pourquoi je pense que CSP est mort en JavaScript.

Plus de lectures

Si vous avez aimé ce que vous avez lu, veuillez consulter mes autres articles sur des sujets aussi révélateurs:

  • Redux-Observable peut résoudre vos problèmes d'état
  • Redux-Observable sans Redux
  • Callbacks: Le guide définitif
  • Promises: Le guide définitif