🏠 Home 🐥 @k33g_org rss All posts 🌍 Me Github

Riot, un nouveau framework js pour IHM

Après Backbone, Ember, Angular, des frameworks à tout faire (dits MV*), enfin presque car Backone est plus une librairie qu’un framework, sont apparus des frameworks se concentrant sur une seule chose : la “vue” (ou view) comme React, Polymer, Vue.js etc… Certains d’entre eux s’appuient sur le concept de Web component et se trimballent une tripotée de polyfills pour arriver à fonctionner sous un maximum de navigateurs (mais dès fois il faudra faire votre deuil de certaines version d’IE). Les concepts sont géniaux, quelquefois l’outillage un peu lourd et il vaut mieux avoir un navigateur de dernière génération.

Hier soir, je suis tombé complètement par hasard (en lisant Prismatic) sur Riot, qui est d’une simplicité déconcertante et extrêmement léger: 5.7kb.

Riot est un framework développé par Muut une solution de forumet de commentaires pour sites web.

Mais laissez moi vous présenter (rapidement pour aujourd’hui) la bête (la bébête).

Les “tags”

Le concept de base de Riot, c’est les tags. Un tag riot, cela ressemble à ceci:

/* hello.js */

riot.tag('hello','<h1>hello from {who}</h1>', function(opts) {
  this.who = "Bob Morane";
})

et cela s’utilise comme ceci:

<!DOCTYPE html>
<html>
<body>

    <hello></hello> <!-- déclaration de mon tag -->

    <script src="js/vendors/riot-2.0.1.js"></script>
    <script src="js/tags/hello.js"></script>
<script>
    riot.mount("hello", null); /* le 1er paramètre est le nom du tag */
</script>
</body>
</html>

Donc, on définit un tag <hello>, on le “raccroche” au DOM avec riot.mount(). Cela ressemble beaucoup à React dans l’esprit.

Si vous ouvrez votre page dans un navigateur, vous obtiendrez un “joli” “hello from Bob Morane”.

Il est aussi possible de passer des données au tag au moment du mount. Par exemple définissons un nouveau tag <hi>:

/* hi.js */

riot.tag(
  'hi',
  '<h2>Hi {title}!</h2><ul> <li each="{humans}">{name}</li></ul>', 
  function(opts) {
    this.title = opts.title;
    this.humans = opts.humans;
})

Et nous l’utiliserons comme ceci:

<!DOCTYPE html>
<html>
<body>

    <hi></hi> <!-- déclaration de mon tag -->

    <script src="js/vendors/riot-2.0.1.js"></script>
    <script src="js/tags/hi.js"></script>
<script>
    riot.mount("hi", {
        title: "all",
        humans: [
            {name: "John Doe"},
            {name: "Jane Doe"},
            {name: "Doctor Who"}
        ]
    })
</script>
</body>
</html>

Et on obtiendra une liste (avec un titre) dans notre page html.

Remarque importante: dans la définition du tag, nous passons opts en paramètre, vous pouvez appeler ce paramètre autrement, mais nous allons voir plus loin qu’il est mieux de garder opts qui est en fait un mot clé pour Riot.

Des tags sans string

Si vous devez bosser avec des intégrateurs, ou que vous avez des tags complexes, mettre votre code html dans une string, ça peut vite être fastidieux. Muut a pensez à vous. Il est possible de définir nos tags dans des fichiers .tag dans lesquels on écrit directement notre code html.

Riot propose un utilitaire qui “transpile” les fichiers .tag en fichiers .js.

Pour l’installer, tapez la commande suivante:

npm install riot -g

Remarque: n’oubliez pas le sudo pour ceux qui sont sous osx.

Ensuite tapez la commande suivante:

riot -w js/tags.src js/tags

A partir de maintenant Riot va surveiller votre répertoire js/tags.src et à chaque changement va “transpiler” vos fichiers .tag en fichiers .js dans le répertoire js/tags. (Après vous appelez vos répertoires comme vous le souhaitez)

Nos tags vont devenir ceci:

Dans un fichier hello.tag:

<hello>
    <h1>hello from {who}</h1>

    this.who = "Bob Morane";
</hello>

Dans un fichier hi.tag:

<hi>
    <h2>Hi {title}!</h2>
    <hr>
    <ul>
        <li each="{humans}">{name}</li>
    </ul>

    this.title = opts.title;
    this.humans = opts.humans;
</hi>

Remarque importante: c’est ici que l’on voit l’importance d’utiliser le mot-clé opts et pas autre chose, car sinon Riot ne fera pas le lien avec vos données, car il va générer un corp de fonction comme ceci:

function(opts) {
    this.title = opts.title;
    this.humans = opts.humans;
}

Conclusion

Voilà, c’est tout pour aujourd’hui. Je vais tenter de creuser un peu plus avec des exemples plus complexes, mais je trouve l’utilisation de Riot particulièrement simple. Il va bien sûr plus loin qu’un simple affichage de données, puisque vous avez entre autres choses:

Next steps: les données, backbone, …

blog comments powered by Disqus

Riot, un nouveau framework js pour IHM

Les “tags”

Des tags sans string

Conclusion

Related posts

Last 6 posts

@k33g_org