• l’aspect “déclaratif” nécessite de partir de l’objectif et donc limite les effets de bords indésirables et autres bugs.

• les “observables” manipulés en RxJS permettent la gestion précise des opérations asynchrones

• l’intégralité du code est constituée de fonctions pures facilement compréhensibles, modifiables et testables.

javascript
fromQuerySelectorAll$("#add-to-cart-pop-up", document).pipe(
		mergeMap((popup : HTMLElement) => {
			const productId = extractProductIdFromPopUp(popup);
			const recommendationUrl = buildRecommendationUrl(productId);
			return fromFetch(recommendationUrl).pipe(
					tap((response : Response) => {
						const recommendationElement = document.createElement("div");
						recommendationElement.innerHTML = response.text();
						popup.appendChild(recommendationElement);
					})
				)
		})
 ).subscribe()

• fromQuerySelectorAll est une fonction utilitaire qui prend un sélecteur en argument et retourne un observable d’éléments répondant à ce sélecteur. Cet observable retourne directement les éléments déjà présents sur la page (comme un querySelectorAll classique) mais également les éléments ajoutés par la suite (!!!) qui répondent à ce sélecteur. Cette fonction utilitaire utilise l’une des multiples “sources” de la librairie Potions qui encapsulent des API du navigateur (ici le MutationObserver) dans des objets observables.

• mergeMap est un opérateur de la librairie RxJS . Dans notre cas, il prend des éléments HTML, les pop-ups panier, et retourne un observable qui extrait le productId de l’élément, va chercher les recommandations de façon asynchrone puis les ajoute à la fameuse popup.

• extractProductIdFromPopUp, buildRecommendationUrl sont des fonctions pures très simples dont on peut facilement imaginer le contenu

• fromFetch est un opérateur de RxJS qui encapsule la méthode fetch du navigateur pour retourner la réponse dans un observable. Notre exemple ne traite pas les erreurs mais le code de Potions Tag oui 🙂. La réponse attendue du serveur Potions est ici le code HTML de la bannière.

• Enfin tap est un opérateur de la librairie RxJS qui permet de mettre en lumière les effets de bords, ici l’ajout de l’élément de la bannière de recommendations à l’élément de la pop-up.

javascript
sourceXXX.pipe(
	operationXXX,
	tap(storeIn(XXX))
).subscribe()

store.XXX.pipe(
	tap(renderXXX(elementXXX))
).susbscribe()

• permettre de déclarer en HTML des liens entre un élément et un contenu réactif, éventuellement en spécifiant un template, lui aussi contenu dans le store.

javascript
<div class="potions-element" data-content="XXX" data-template="YYY"></div>

• synchroniser avec indexedDB des propriétés du store et donc permettre de persister des états d’une session à l’autre

• disposer d’une couche de données facilement accessible dans l’ensemble de l’application à la manière d’un dataLayer.

• l’ensemble de ses propriétés sont eux même des stores

• l’appel d’une propriété non existante renvoie un store vide (et pas undefined)

• que le store souscrive à ses propriétés pour être mis à jour à chaque changement de ses stores enfants.

javascript
import {store} from 'Potions'

store.a = store.b.c
store.b = {c:1} 
console.log(store.a.value) // logs 1