Riot, un nouveau framework js pour IHM - Partie 2
Je continue à jouer avec Riot, et j’aime ça de plus en plus. J4ai trouvé un paragraphe intéressant dans la documentation:
Riot automatically takes inlined and external tags and compiles them before the tags are rendered with the riot.mount() call. Compilation phase is basically free and takes no time at all. Compiling a timer tag 30 times takes 2 milliseconds on a regular laptop. If you have a crazy page with 1000 different timer-sized tags, the compilation takes around 35ms. The compiler weights only 3.2KB (1.7K gzipped) so you can safely perform client side compilation on production without download or performance or issues. Just like Riot itself the compiler works on IE8 as well.
En gros, cela signifie que vous pouvez tout à fait utiliser vos fichiers .tag sans les transpiler à l’avance, c’est le navigateur qui s’en chargera. Et que cela ne doit pas “foutre en l’air” les performances de votre webapp.
Dans un monde de SSII (pardon ESN), où il y a encore beaucoup de développeurs “mixtes tendances backend” qui n’utilisent pas la palanquée d’outils js yeoman/grunt/gulp/etc. … je trouve que c’est plutôt intéressant (quiite à faire hurler les puristes). Mais voyons voir comment procéder.
Nous en profiterons pour poser les bases pour le prochain article qui utilisera Riot et Backbone.
In-browser compilation
Nous aurons besoin des dernières versions de Riot et du “compiler”, vous les trouverez directement sur Github:
- https://github.com/muut/riotjs/blob/master/riot.js (puis cliquez sur le bouton raw)
- https://github.com/muut/riotjs/blob/master/compiler.js (puis cliquez sur le bouton raw)
Il est possible aussi d’avoir une version fusionnée et minifiée des 2 fichiers:
- https://github.com/muut/riotjs/blob/master/riot%2Bcompiler.min.js (puis cliquez sur le bouton raw)
Puis créez vous l’arborescence suivante:
votre-app/
├── public/
| ├── js/
| | ├── tags/
| | | └── hello-title.tag
| | └── vendors/
| | ├── riot.js
| | └── compiler.js
| └── index.html
├── package.json
└── app.js
Création d’un server htpp static
Vous aurez besoin d’un serveur http pour faire fonctionner tout ça, donc dans le fichier package.json saisissez ceci:
{
"name": "riot",
"description": "riot",
"version": "0.0.0",
"author": "@k33g_org",
"license": "MIT",
"dependencies": {
"body-parser": "^1.10.2",
"express": "^4.11.1"
}
}
A la racine de votre projet, saisir la commande npm install, ce qui va installer les dépendances nécessaires (dont express qui nous servira pour plus tard)
Ensuite dans app.js saisissez le code suivant:
var express = require('express');
var http = require('http');
var bodyParser = require('body-parser');
var app = express(), http_port = 3008;
app.use(express.static(__dirname + '/public'));
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(bodyParser.json());
app.listen(http_port);
console.log("Listening on " + http_port);vous n’aurez plus qu’à lancer la commande node app.js pour lancer votre serveur et ouvrir l’url http://localhost:3008/ pour admirez vos travaux.
Passons maintenant à Riot.
Création du tag hello-title
Dans le fichier hello-title.tag saisissez ceci:
<hello-title>
<h2>{title}</h2>
this.title = "Hello World";
</hello-title>Définir la page index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>my-app</title>
</head>
<body>
<!-- mon nouveau tag -->
<hello-title></hello-title>
<script src="js/vendors/riot.js"></script>
<script src="js/vendors/compiler.js"></script>
<!-- déclaration de mon nouveau tag -->
<script src="js/tags/hello-title.tag" type="riot/tag"></script>
<script>
riot.mount("hello-title");
</script>
</body>
</html>Donc maintenant:
- lancez
node app.js - ouvrez http://localhost:3008/
Vous obtiendrez donc votre “hello world”:
Des attributs pour votre tag
Je voudrais pouvoir renseigner le titre de mon tag dans un attribut et ainsi utiliser mon tag plusieurs fois dans ma page avec des valeurs différentes, donc modifiez index.html de cette façon:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>my-app</title>
</head>
<body>
<!-- mes nouveaux tagx -->
<hello-title my-title="Salut!"></hello-title>
<hello-title my-title="Yo!"></hello-title>
<hello-title my-title="Hello!"></hello-title>
<script src="js/vendors/riot.js"></script>
<script src="js/vendors/compiler.js"></script>
<!-- déclaration de mon nouveau tag -->
<script src="js/tags/hello-title.tag" type="riot/tag"></script>
<script>
riot.mount("hello-title");
</script>
</body>
</html>puis modifiez hello-title.tag comme ceci:
<hello-title>
<h2>{title}</h2>
console.log(this) // ça c'est juste pour la suite
this.title = this.opts["my-title"];
</hello-title>Ouvrez à nouveau http://localhost:3008/
Si vous allez dans la console de votre navigateur (la raison du console.log(this) dans le code)
Vous pouvez voir que notre tag a bien une propriété my-title dans opts.
Donc, vous avez pu donc voir que la compilation “in browser” simplifie quand même pas mal le travail. Et vous êtes prêts pour la suite (normalement ce sera du Backbone).
Bonne soirée.
Tweet