RIOT.JS - Guide rapide

RIOT.js est une bibliothèque d'interface utilisateur basée sur des composants Web de très petite taille / légère pour développer des applications Web. Il combine les avantages de React.JS et Polymer avec une implémentation très concise et des constructions simples à apprendre et à utiliser. La version minifiée fait presque 10 Ko.

Voici les principales caractéristiques de RIOT.js

Liaisons d'expression

Très petite charge utile lors des mises à jour et des redistributions DOM.
Les modifications se propagent vers le bas des balises parentes aux balises / contrôles enfants.
Utilise des expressions précompilées et les met en cache pour des performances élevées.
Fournit une bonne conception des événements du cycle de vie.

Suit les normes

Pas de système d'événements propriétaire
Aucune dépendance sur les bibliothèques polyfill.
Aucun attribut supplémentaire ajouté au HTML existant.
S'intègre bien avec jQuery.

Valeurs fondamentales

RIOT.js est développé en tenant compte des valeurs suivantes.

Simple et minimaliste.
Facile à apprendre et à mettre en œuvre.
Fournissez des vues réactives pour créer des interfaces utilisateur.
Fournissez une bibliothèque d'événements pour créer des API avec des modules indépendants.
Pour prendre en charge le comportement de l'application avec le bouton de retour du navigateur.

Il existe deux manières d'utiliser RIOT js.

Local Installation - Vous pouvez télécharger la bibliothèque RIOT sur votre machine locale et l'inclure dans votre code HTML.
CDN Based Version - Vous pouvez inclure la bibliothèque RIOT dans votre code HTML directement à partir du Content Delivery Network (CDN).

Installation locale

Aller au https://riot.js.org pour télécharger la dernière version disponible.
Maintenant mis téléchargé riot.min.js fichier dans un répertoire de votre site Web, par exemple / riotjs.

Exemple

Vous pouvez maintenant inclure la bibliothèque riotjs dans votre fichier HTML comme suit -

<!DOCTYPE html>
<html>
   <head>
      <script src = "/riotjs/riot.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <messageTag></messageTag>
      <script>
         var tagHtml = "<h1>Hello World!</h1>";
         riot.tag("messageTag", tagHtml);
         riot.mount("messageTag");
      </script>
   </body>
</html>

Cela produira le résultat suivant -

Version basée sur CDN

Vous pouvez inclure la bibliothèque RIOT js dans votre code HTML directement à partir du Content Delivery Network (CDN). Google et Microsoft fournissent du contenu pour la dernière version.

Note - Nous utilisons la version CDNJS de la bibliothèque tout au long de ce tutoriel.

Exemple

Maintenant, réécrivons l'exemple ci-dessus en utilisant la bibliothèque jQuery de CDNJS.

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <messageTag></messageTag>
      <script>
         var tagHtml = "<h1>Hello World!</h1>";
         riot.tag("messageTag", tagHtml);
         riot.mount("messageTag");
      </script>
   </body>
</html>

Cela produira le résultat suivant -

RIOT fonctionne en créant des balises HTML personnalisées et réutilisables. Ces balises sont similaires aux composants Web et sont réutilisables sur les pages et les applications Web.

Étapes à suivre pour utiliser RIOT

Importez riot.js dans la page html.

<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>

Démarrez une section de script et définissez le contenu de la balise au format HTML. Le script peut également être inclus, ce que nous verrons plus tard dans le didacticiel.

var tagHtml = "<h1>Hello World!</h1>";

Définissez une balise à l'aide de la méthode riot.tag (). Transmettez-lui le nom de la balise, messageTag et variable contenant le contenu de la balise.

riot.tag("messageTag", tagHtml);

Montez la balise en utilisant la méthode riot.mount (). Transmettez-lui le nom de la balise, messageTag. Le processus de montage monte le messageTag dans toutes ses occurrences dans la page html. La balise MessageTag doit être définie à l'aide de riot.js avant le montage.

riot.mount("messageTag");
</script>

Voici l'exemple complet.

Exemple

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <messageTag></messageTag>
      <script>
         var tagHtml = "<h1>Hello World!</h1>";
         riot.tag("messageTag", tagHtml);
         riot.mount("messageTag");
      </script>
   </body>
</html>

Cela produira le résultat suivant -

RIOT fonctionne en créant des balises HTML personnalisées et réutilisables. Ces balises sont similaires aux composants Web et sont réutilisables sur les pages et les applications Web. Lorsque vous incluez le framework RIOT dans votre page HTML, le js importé crée une variable riot pointant vers un objet riot. Cet objet contient les fonctions nécessaires pour interagir avec RIOT.js, comme la création et le montage de balises.

Nous pouvons créer et utiliser des balises de deux manières.

Inline HTML- En appelant la fonction riot.tag (). Cette fonction prend le nom de la balise et la définition de la balise pour créer une balise. La définition de balise peut contenir du HTML, du JavaScript et du CSS, etc.
Seperate Tag file- En stockant la définition de balise dans un fichier de balises. Ce fichier de balise contient une définition de balise pour créer une balise. Ce fichier doit être importé à la place de l'appel riot.tag ().

<script src = "/riotjs/src/messageTag.tag" type = "riot/tag"></script<

Voici l'exemple de balise en ligne.

Exemple

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <messageTag></messageTag>
      <script>
         var tagHtml = "<h1>Hello World!</h1>";
         riot.tag("messageTag", tagHtml);
         riot.mount("messageTag");
      </script>
   </body>
</html>

Cela produira le résultat suivant -

Voici l'exemple de balise de fichier externe.

Exemple

messageTag.tag

<messageTag>
   <h1>Hello World!</h1>
</messageTag>

index.htm

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <messageTag></messageTag>
      <script src = "messageTag.tag" type = "riot/tag"></script>
      <script>
         riot.mount("messageTag");
      </script>
   </body>
</html>

Cela produira le résultat suivant -

RIOT js utilise {} pour définir des expressions. RIOT js permet les types d'expressions suivants.

Simple Expression - Définissez une variable et utilisez-la dans une balise.

<customTag>
   <h1>{title}</h1>
   <script>
      this.title = "Welcome to TutorialsPoint.COM";
   </script>
</customTag>

Evaluate Expression - Évaluer une variable lors de son utilisation dans une opération.

<customTag>
   <h2>{val * 5}</h2>
   <script>
      this.val = 4;
   </script>
</customTag>

Get value from Options object - Pour obtenir la valeur transmise à la balise via des attributs.

Exemple

Voici l'exemple complet des concepts ci-dessus.

customTag.tag

<customTag>
   <h1>{title}</h1>
   <h2>{val * 5}</h2>
   <h2>{opts.color}</h2>
   <script>
      this.title = "Welcome to TutorialsPoint.COM";
      this.val = 4;
   </script>
</customTag>

index.htm

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <customTag color="red"></customTag>
      <script src = "customTag.tag" type = "riot/tag"></script>
      <script>
         riot.mount("customTag");
      </script>
   </body>
</html>

Cela produira le résultat suivant -

Les balises RIOT js peuvent avoir leur propre style et nous pouvons définir des styles dans les balises qui n'affecteront que le contenu de la balise. Nous pouvons également définir une classe de style à l'aide de scripts également dans une balise. Voici la syntaxe pour obtenir le style des balises RIOT.

custom1Tag.tag

<custom1Tag>
   <h1>{title}</h1>
   <h2 class = "subTitleClass">{subTitle}</h2>
   <style>
   h1 {
      color: red;
   }
   .subHeader {
      color: green;
   }
   </style>
   <script>
      this.title = "Welcome to TutorialsPoint.COM";
      this.subTitle = "Learning RIOT JS";
      this.subTitleClass = "subHeader";
   </script>
</custom1Tag>

index.htm

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <h1>Non RIOT Heading</h1>
      <custom1Tag></custom1Tag>
      <script src = "custom1Tag.tag" type = "riot/tag"></script>
      <script>
         riot.mount("custom1Tag");
      </script>
   </body>
</html>

Cela produira le résultat suivant -

Les conditions sont des constructions utilisées pour afficher / masquer des éléments de balises RIOT. Voici les trois conditions prises en charge par RIOT -

if - ajouter / supprimer un élément en fonction de la valeur passée.

<custom2Tag>
   <h2 if = {showMessage}>Using if!</h2>
   <script>
      this.showMessage = true;      
   </script>
</custom2Tag>

show - montre un élément en utilisant style = "display:' ' "si passé vrai.

<custom2Tag>
   <h2 show = {showMessage}>Using show!</h2>
   <script>
      this.showMessage = true;      
   </script>
</custom2Tag>

hide - masque un élément en utilisant style = "display:'none' "si passé vrai.

<custom2Tag>
   <h2 show = {showMessage}>Using show!</h2>
   <script>
      this.showMessage = true;      
   </script>
</custom2Tag>

Exemple

Voici l'exemple complet.

custom2Tag.tag

<custom2Tag>
   <h2 if = {showMessage}>Using if!</h2>
   <h2 if = {show}>Welcome!</h1>
   <h2 show = {showMessage}>Using show!</h2>
   <h2 hide = {show}>Using hide!</h2>
   <script>
      this.showMessage = true;
      this.show = false; 
   </script>
</custom2Tag>

custom2.htm

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <custom2Tag></custom2Tag>
      <script src = "custom2Tag.tag" type = "riot/tag"></script>
      <script>
         riot.mount("custom2Tag");
      </script>
   </body>
</html>

Cela produira le résultat suivant -

Le rendement est un mécanisme permettant de mettre du contenu HTML externe dans une balise RIOT. Il existe plusieurs façons de produire un rendement.

Simple Yield- Si nous voulons remplacer un seul espace réservé dans la balise. Ensuite, utilisez ce mécanisme.

<custom3Tag>
   Hello <yield/>
</custom3Tag>

<custom3Tag><b>User</b></custom3Tag>

Multiple Yield- Si nous voulons remplacer plusieurs espaces réservés dans la balise. Ensuite, utilisez ce mécanisme.

<custom4Tag>
   <br/><br/>
   Hello
   <yield from = "first"/>
   <br/><br/>
   Hello 
   <yield from = "second"/>
</custom4Tag>

<custom4Tag>
   <yield to = "first">User 1</yield>
   <yield to = "second">User 2</yield>
</custom4Tag>

Exemple

Voici l'exemple complet.

custom3Tag.tag

<custom3Tag>
   Hello <yield/>
</custom3Tag>

custom4Tag.tag

<custom4Tag>
   <br/><br/>
   Hello
   <yield from = "first"/>
   <br/><br/>
   Hello 
   <yield from = "second"/>
</custom4Tag>

custom3.htm

<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <custom3Tag><b>User</b></custom3Tag>
      <custom4Tag>
         <yield to = "first">User 1</yield>
         <yield to = "second">User 2</yield>
      </custom4Tag>   
      <script src = "custom3Tag.tag" type = "riot/tag"></script>
      <script src = "custom4Tag.tag" type = "riot/tag"></script>
      <script>
         riot.mount("custom3Tag");
         riot.mount("custom4Tag");
      </script>
   </body>
</html>

Cela produira le résultat suivant -

Nous pouvons attacher un événement aux éléments HTML de la même manière que nous accédons aux éléments HTML à l'aide de l'objet refs. Dans un premier temps, nous ajoutons un attribut ref à un élément DOM et y accédons en utilisant this.ref dans le bloc de script de la balise.

Attach ref - Ajouter un attribut ref à un élément DOM.

<button ref = "clickButton">Click Me!</button>

Use the refs object- Utilisez maintenant l'objet refs dans l'événement de montage. Cet événement est déclenché lorsque RIOT monte la balise personnalisée et remplit l'objet refs.

this.on("mount", function() {
   console.log("Mounting");
   console.log(this.refs.username.value);
})

Exemple

Voici l'exemple complet.

custom5Tag.tag

<custom5Tag>
   <form>
      <input ref = "username" type = "text" value = "Mahesh"/>
      <input type = "submit" value = "Click Me!" />
   </form>
   <script>
      this.on("mount", function() {
         console.log("Mounting");
         console.log(this.refs.username.value); 
      })
   </script>
</custom5Tag>

custom5.htm

<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <custom5Tag></custom5Tag>
      <script src = "custom5Tag.tag" type = "riot/tag"></script>
      <script>
         riot.mount("custom5Tag");
      </script>
   </body>
</html>

Cela produira le résultat suivant -

Nous pouvons accéder aux éléments HTML en utilisant l'objet refs. Dans un premier temps, nous ajoutons un attribut ref à un élément DOM et y accédons en utilisant this.ref dans le bloc de script de la balise.

Attach ref - Ajouter un attribut ref à un élément DOM.

<button ref = "clickButton">Click Me!</button>

Use the refs object- Utilisez maintenant l'objet refs dans l'événement de montage. Cet événement est déclenché lorsque RIOT monte la balise personnalisée et remplit l'objet refs.

this.on("mount", function() {
   this.refs.clickButton.onclick = function(e) {
      console.log("clickButton clicked");
      return false;
   };
})

Exemple

Voici l'exemple complet.

custom6Tag.tag

<custom6Tag>
   <form ref = "customForm">
      <input ref = "username" type = "text" value = "Mahesh"/>
      <button ref = "clickButton">Click Me!</button>
      <input type = "submit" value = "Submit" />
   </form>
   <script>
      this.on("mount", function() {
         this.refs.clickButton.onclick = function(e) {
            console.log("clickButton clicked");
            return false;
         };
         this.refs.customForm.onsubmit = function(e) {
            console.log("Form submitted");
            return false;
         };
      }) 
   </script>
</custom6Tag>

custom6.htm

<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <custom6Tag></custom6Tag>
      <script src = "custom6Tag.tag" type = "riot/tag"></script>
      <script>
         riot.mount("custom6Tag");
      </script>
   </body>
</html>

Cela produira le résultat suivant -

Nous pouvons parcourir le tableau RIOT de primitives ou d'objets et créer / mettre à jour les éléments html lors de vos déplacements. En utilisant «chaque» construction, nous pouvons y parvenir.

Create array - Créez un tableau d'objets.

this.cities = [
   { city : "Shanghai" , country:"China" , done: true },
   { city : "Seoul"    , country:"South Korea" },
   { city : "Moscow"   , country:"Russia"      }
];

Add each attribute - Utilisez maintenant l'attribut "each".

<ul>
   <li each = { cities } ></li>
</ul>

Iterate array of objects - Itérez le tableau en utilisant les propriétés de l'objet.

<input type = "checkbox" checked = { done }> { city } - { country }

Exemple

Voici l'exemple complet.

custom7Tag.tag

<custom7Tag>
   <style>
      ul {
         list-style-type: none;
      }
   </style>
   <ul>
      <li each = { cities } >
         <input type = "checkbox" checked = { done }> { city } - { country }
      </li>
   </ul>
   <script>
      this.cities = [
         { city : "Shanghai" , country:"China" , done: true },
         { city : "Seoul"    , country:"South Korea" },
         { city : "Moscow"   , country:"Russia"      }
      ]; 
   </script>
</custom7Tag>

custom7.htm

<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <custom7Tag></custom6Tag>
      <script src = "custom7Tag.tag" type = "riot/tag"></script>
      <script>
         riot.mount("custom7Tag");
      </script>
   </body>
</html>

Cela produira le résultat suivant -

Grâce à Mixin, nous pouvons partager des fonctionnalités communes entre les balises. Mixin peut être une fonction, une classe ou un objet. Prenons un cas de service d'authentification que chaque balise devrait utiliser.

Define Mixin - Définissez mixin en utilisant la méthode riot.mixin () avant d'appeler mount ().

riot.mixin('authService', {
   init: function() {
      console.log('AuthService Created!')
   },

   login: function(user, password) {
      if(user == "admin" && password == "admin"){
         return 'User is authentic!'
      }else{
         return 'Authentication failed!'
      }   
   }
});

Initialize mixin - Initialisez mixin dans chaque tag.

this.mixin('authService')

Use mixin - Après l'initialisation, mixin peut être utilisé dans le tag.

this.message = this.login("admin","admin");

Exemple

Voici l'exemple complet.

custom8Tag.tag

<custom8Tag>
   <h1>{ message }</h1>
   <script>
      this.mixin('authService')
      this.message = this.login("admin","admin")
   </script>
</custom8Tag>

custom9Tag.tag

<custom9Tag>
   <h1>{ message }</h1>
   <script>
      this.mixin('authService')
      this.message = this.login("admin1","admin")
   </script>
</custom9Tag>

custom8.htm

<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <custom8Tag></custom8Tag>
      <custom9Tag></custom9Tag>
      <script src = "custom8Tag.tag" type = "riot/tag"></script>
      <script src = "custom9Tag.tag" type = "riot/tag"></script>
      <script>
         riot.mixin('authService', {
            init: function() {
               console.log('AuthService Created!')
            },
            login: function(user, password) {
               if(user == "admin" && password == "admin"){
                  return 'User is authentic!'
               }else{
                  return 'Authentication failed!'
               }   
            }
         });
         riot.mount("*");
      </script>
   </body>
</html>

Cela produira le résultat suivant -

Le mécanisme observables permet à RIOT d'envoyer des événements d'une balise à une autre. Les API suivantes sont importantes pour comprendre les observables RIOT.

riot.observable(element)- Ajoute la prise en charge d'observateur pour l'élément objet donné ou si l'argument est vide, une nouvelle instance observable est créée et renvoyée. Après cela, l'objet peut déclencher et écouter les événements.

var EventBus = function(){
   riot.observable(this);
}

element.trigger(events) - Exécuter toutes les fonctions de rappel qui écoutent l'événement donné.

sendMessage() {
   riot.eventBus.trigger('message', 'Custom 10 Button Clicked!');    
}

element.on(events, callback) - Écoutez l'événement donné et exécutez le rappel à chaque fois qu'un événement est déclenché.

riot.eventBus.on('message', function(input) {      
   console.log(input);
});

Exemple

Voici l'exemple complet.

custom10Tag.tag

<custom10Tag>
   <button onclick = {sendMessage}>Custom 10</button>
   <script>
      sendMessage() {
         riot.eventBus.trigger('message', 'Custom 10 Button Clicked!');    
      }
   </script>    
</custom10Tag>

custom11Tag.tag

<custom11Tag>
   <script>
      riot.eventBus.on('message', function(input) {      
         console.log(input);
      });
   </script>    
</custom11Tag>

custom9.htm

<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <custom10Tag></custom10Tag>
      <custom11Tag></custom11Tag>
      <script src = "custom10Tag.tag" type = "riot/tag"></script>
      <script src = "custom11Tag.tag" type = "riot/tag"></script>
      <script>
         var EventBus = function(){
            riot.observable(this);
         }
         riot.eventBus = new EventBus();
         riot.mount("*");
      </script>
   </body>
</html>

Cela produira le résultat suivant -

↰ Previous page

RIOT.JS - Guide rapide

Liaisons d'expression

Suit les normes

Valeurs fondamentales

Installation locale

Exemple

Version basée sur CDN

Exemple

Étapes à suivre pour utiliser RIOT

Exemple

Exemple

Exemple

messageTag.tag

index.htm

Exemple

customTag.tag

index.htm

custom1Tag.tag

index.htm

Exemple

custom2Tag.tag

custom2.htm

Exemple

custom3Tag.tag

custom4Tag.tag

custom3.htm

Exemple

custom5Tag.tag

custom5.htm

Exemple

custom6Tag.tag

custom6.htm

Exemple

custom7Tag.tag

custom7.htm

Exemple

custom8Tag.tag

custom9Tag.tag

custom8.htm

Exemple

custom10Tag.tag

custom11Tag.tag

custom9.htm

Tutoriel RIOT.JS

Ressources utiles RIOT.JS