Liez votre HTML et vos données grâce au data-binding et Rivets JS !

Aujourd'hui, je vous propose de se pencher d'un peu plus près sur une des ressources qui m'aura le plus impressionné sur le 2014 : la library Rivets.js, qui permet de faire du data-binding sans efforts ni contraintes.

Le data binding, kesako ?

Si vous n'êtes pas familier avec le concept du data binding, préparez-vous à être soufflés !

En quelques mots, le data binding est un moyen de lier une interface et des données, de sorte à ce que si les données changent, l'interface change pour refletter les nouvelles données.

Ce n'est pas clair ? Essayons avec un exemple. 

Notre JS

var data = {
    title: "Panier de fruits",
    fruits: ["pomme", "poire"],
}

Notre HTML

<h1>Panier de fruits</h1>
<ul>
  <li>pomme</li>
  <li>poire</li>
</ul>

Si nous lions notre HTML à notre JS, et que nous ajoutons un objet "coing" au tableau de fruits, un nouveau "<li>" va se créer pour refletter ce changement ! 
De même, modifier la chaine de titre changera le contenu du H1.

Magique ? Pas loin, oui ! La quantité de travail que nous pouvons economiser grace à ce genre de library est vraiment impressionnante.

Pourquoi Rivets ?

Quand le marche est dominé par des monstres comme Ember js ou Angular, pourquoi faire le choix de Rivets, library bien plus modeste ? Pour la rapidité de mise en place et d'apprentissage.

Un des plus gros problèmes des frameworks complets comme Angular, justement, est le temps nécessaire pour acquérir les bases. Gestion des scopes, modèles, modules, les concepts à prendre en main sont très vastes et pas des plus simples. Rivets, lui, ne fait qu'une chose : du data binding. Et le moins que l'on puisse dire est qu'il le fait bien.

Mise en place

Reprenons l'exemple précédent avec Rivets. Si vous voulez l'essayer, copiez collez le dans un fichier HTML.

<div id="view">
  <h1>{ data.title }</h1>
  <ul>
    <li rv-each-fruit="data.fruits" >{ fruit }</li>
  </ul>
</div>

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://raw.githubusercontent.com/mikeric/rivets/v0.7.1/dist/rivets.bundled.min.js"></script>
<script>
  var data = {
      title: "Panier de fruits",
      fruits: ["pomme", "poire"],
  }
  rivets.bind($('#view'), {data: data})
</script>

Et c'est tout. Changez les données de l'objet "data" (depuis l'outil de développement de votre navigateur par exemple), et votre HTML changera tout seul.

Pour plus d'informations, je vous conseille la documentation.

Le mot de la fin

Comme je le disais en introduction, rivets est pour moi la library qui m'aura le plus marqué sur le 2014 (et l'année touchant à sa fin, je pense que cela restera le cas).

Cette library est un must have, je vous conseil de l'essayer de toute urgenre !