Amélioration de la librairie Umbrella.js par ajout du two ways data-binding

Umbrella.js, c’est quoi?

Umbrella est une librairie dont le but est de remplacer le très célèbre jQuery. Umbrella est bien plus léger (6Ko contre plus de 100) et se limite aux manipulations du DOM, soit les fonctions de base de jQuery.

Two ways data-binding, kesako?

Le “TWDB” (Two Ways Data-Binding), est une technique qui permet de lier une variable ou une méthode javascript et un élément du DOM. C’est intégré aux frameworks comme Angular, React, Vue, Svelte, Alpine. C’est un mécanisme puissant et vraiment utile. Par exemple, on n’a plus à se soucier de savoir si le champ est un select ou un input pour deviner comment lire sa valeur puisqu’un changement de valeur est reporté automatiquement dans la variable associée.

Mariage contre-nature?

Ajouter le TWDB à Umbrella n’est pas contre-nature puisque l’objectif d’Umbrella est de manipuler le DOM. Y lire et écrire des valeurs de champs rentre, selon moi, pleinement dans le cadre de ces manipulations.

Intégration de la librairie “data-bind”

En plus du fichier umbrella.min.js, il faut ajouter databind.min.js. Et voilà! (Spoiler: c’est faux). Pour que le TWDB fonctionne, il faut ajouter une structure de données. Le plus simple est d’écrire un objet JSON. Exemple

    
1let dataLogin = { email: '', password: '' };

et dans le HTML, on trouvera les champs comme suit:

    
1    <input type="text" name="fldEmail" data-bind="dataLogin.email" />
2    <input type="password" name="fldPassword" data-bind="dataLogin.password" />

Hop! Le data-binding est en place. Si on change la valeur du champ email, la variable dataLogin.email changera immédiatement et vice-versa.

Conclusion

A moindre frais, on peut améliorer la librairie umbrella.js et rivaliser avec des frameworks bien plus conséquents, pour autant qu’on se limite à une application nécessitant peu de fonctionnalités.

Ressources