ripple.js : templating JavaScript avec ajout de plugins
ripple.js : templating JavaScript avec ajout de plugins propre aux vues et aux composants
ripples.js est une bibliothèque JavaScript pour la création de modèles (templates) et la liaison de données (data binding) construite par Segment.io. Elle s'articule autour de templates et a une API permettant d'ajouter des plugins aux composants.
On y retrouve des similitudes avec Reactive (observables, etc.), AngularJS, Handlebars et React (construction d'interface utilisateur). La différence majeure avec les autres bibliothèques de ce genre est qu'il n'y a aucune utilisation globale. Chaque vue a son propre ensemble de plugins et de liaisons.
Code:
1
2
3
4
5
6
7
8
9
10
| var Person = ripple('<div>{{name}}</div>')
.use(events)
.use(each)
.use(dispatch);
var person = new Person({
name: 'Tom'
});
person.appendTo(document.body); |
Il y a un exemple qui utilise un modèle intégré dans un élément script et deux plugins : ripple.events et ripple.markdown. Les plugins autorisent l'observation des modifications dans une textarea et la seconde partie est configurée pour afficher le résultat à l'aide d'une directive sur un élément div.
Le modèle pour la composition de la vue permet que cette dernière soit intégrée et que les données seront toujours synchronisées lorsque la vue change.
La bibliothèque comporte par exemple :
- l'utilisation de template HTML avec les accolades comme délimiteur ;
Code:
1
2
3
4
| <div class="{{type}}">
<img src="{{avatar}}" />
{{ firstName + " " + lastName }}
</div> |
Code:
1
2
3
4
5
6
| {
"type": "winner",
"avatar": "http://ragefaces.io/rage.png",
"firstName": "Nicolas",
"lastName": "Cage"
} |
- l'intégration avec Component (fichier json) ;
- la manipulation du DOM (appendTo, replace, before et after) ;
- des événements (construct, created, ready, etc.) ;
- des getters et setters.
:fleche: Téléchargement (version 0.3.2).
:fleche: La page GitHub.
:fleche: D'après un article sur DailyJS.
Et vous ?
:fleche: Que pensez-vous de cette bibliothèque ?
:fleche: Quel outil utilisez-vous pour faire vos templates ?
Le templating c'est le mal
Le templating c'est mal, cela relève d'un problème de conception et de modélisation... C'est un peu comme Smarty en PHP, complètement inutile.
