Gérez vos problèmes de communication avec un système pub/sub pour vos web-applications

Le 09/12/2014

Dans Développement

Nous avons déjà vu le data binding, les templates (il y a longtemps, mais les ressources sont toujours d’actualité). Que nous manque-t-il dans notre palette d'outils pour WebApplications? Un système pub/sub, et on est bon !

Le pub/sub, c'est quoi ?

Le pub/sub est un pattern permettant de résoudre les problèmes de communication entre les différentes parties de votre application tout en évitant des interdépendances trop fortes.

Pour faire simple, c'est une sorte de talkie walkie pour vos classes et objets. Avec ce genre de systèmes, vos objets peuvent parler sur des canaux particuliers, sans se soucier de qui les écoutes. De l'autre côté, des actions sont liées aux différents messages qu'ils peuvent envoyer.

Cette description vous semble familière ? C'est normal, ce système existe déjà en JavaScript pour tous les éléments du DOM (vos éléments HTML), c'est le système d'eventListener.

Pourquoi mettre en place le pattern pub/sub ?

Ce système n'est pas le seul pattern permettant de résoudre ce problème de communication, il existe aussi le système d'Observer, par exemple. Alors pourquoi choisir le schéma pub/sub pour le Javascript ? Tout simplement car ce schéma est déjà présent dans le langage au niveau de la manipulation du DOM, et qu'il introduira donc une moins grande complexité a votre application.

Un autre système assez proche avec lequel nous pourrions le comparer est celui du data binding (cf mon article sur rivetsjs). Lui aussi résout ce problème d’interdépendance, n'est-ce par redondant d'avoir les deux dans la même application ? Non car le data-binding se base en réalité sur un système pub /sub ! Implémenter rivets avec des models de votre cru demandera d’ailleurs un système pub/sub.

Quelques ressources

Pour finir, je vous propose de découvrir une liste de 5 systèmes pub/sub pour JavaScript.

EventEmitter

Event Emitter est le système pub/sub de référence pour Node.js, et il fait aussi très bien le travail pour le navigateur. C'est sans conteste la ressource la plus maintenu de cette liste, et une des plus complètes. C'est celle que j'utilise personnellement.

Evenemitter

Amplify.js

J'ai hésité avant de mettre cette ressource-là dans la liste, car elle fait plus que "simplement" fournir un système pub/sub. Néanmoins, elle reste assez légère et les fonctionnalités supplémentaires sont très intéressantes (Ajax et aide au local storage).

Amplify js

PubSubJS

Autre ressource très intéressante, elle reste assez proche de eventEmitter. Entre les deux, je dirais que le choix se fait uniquement au niveau du goût personnel.

Pubsubjs

JS-signals

Cette library est intéressante à essayer car elle tente de résoudre le pattern à travers une API assez différente de ses concurrents.

Js signals

jquery tiny pubsub

Envie d'apprendre à faire un système pub/sub? Cette libraire est parfaite pour vous ! Avec une source de 25 lignes, vous pourrez la comprendre en quelques secondes, et commencer à vous entraîner en y ajoutant les fonctionnalités avancées dont vous avez besoin.

Jquery tiny pubsub