RIOT.JS - Guía rápida

RIOT.js es una biblioteca de interfaz de usuario basada en componentes web de muy pequeño tamaño / peso ligero para desarrollar aplicaciones web. Combina los beneficios de React.JS y Polymer con una implementación muy concisa y construcciones simples de aprender y usar. Su versión minificada tiene un tamaño de casi 10 KB.

Las siguientes son las características clave de RIOT.js

Enlaces de expresión

  • Carga útil muy pequeña durante actualizaciones y reflujos DOM.

  • Los cambios se propagan hacia abajo desde las etiquetas principales hasta las etiquetas / controles secundarios.

  • Utiliza expresiones precompiladas y las almacena en caché para un alto rendimiento.

  • Proporciona un buen control sobre los eventos del ciclo de vida.

Sigue los estándares

  • Sin sistema de eventos propietario

  • No depende de ninguna biblioteca polyfill.

  • No se agregan atributos adicionales al HTML existente.

  • Se integra bien con jQuery.

Valores fundamentales

RIOT.js se desarrolla considerando los siguientes valores.

  • Simple y minimalista.

  • Fácil de aprender e implementar.

  • Proporcione vistas reactivas para crear interfaces de usuario.

  • Proporcione una biblioteca de eventos para crear API con módulos independientes.

  • Para cuidar el comportamiento de la aplicación con el botón de retroceso del navegador.

Hay dos formas de utilizar RIOT js.

  • Local Installation - Puede descargar la biblioteca RIOT en su máquina local e incluirla en su código HTML.

  • CDN Based Version - Puede incluir la biblioteca RIOT en su código HTML directamente desde Content Delivery Network (CDN).

Instalación local

  • Ve a la https://riot.js.org para descargar la última versión disponible.

  • Ahora pon descargado riot.min.js archivo en un directorio de su sitio web, por ejemplo, / riotjs.

Ejemplo

Ahora puede incluir la biblioteca riotjs en su archivo HTML de la siguiente manera:

<!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>

Esto producirá el siguiente resultado:

Versión basada en CDN

Puede incluir la biblioteca js de RIOT en su código HTML directamente desde Content Delivery Network (CDN). Google y Microsoft ofrecen entrega de contenido para la última versión.

Note - Estamos usando la versión CDNJS de la biblioteca a lo largo de este tutorial.

Ejemplo

Ahora reescribamos el ejemplo anterior usando la biblioteca 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>

Esto producirá el siguiente resultado:

RIOT funciona creando etiquetas html personalizadas y reutilizables. Estas etiquetas son similares a los componentes web y se pueden reutilizar en todas las páginas y aplicaciones web.

Pasos para usar RIOT

  • Importe riot.js en la página html.

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

  • Inicie una sección de secuencia de comandos y defina el contenido de la etiqueta como html. También se puede incluir un script que veremos más adelante en el tutorial.

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

  • Defina una etiqueta usando el método riot.tag (). Pase el nombre de la etiqueta, messageTag y variable que contiene el contenido de la etiqueta.

riot.tag("messageTag", tagHtml);

  • Monte la etiqueta usando el método riot.mount (). Pásale el nombre de la etiqueta, messageTag. El proceso de montaje monta el messageTag en todas sus apariciones en la página html. La etiqueta MessageTag debe definirse mediante riot.js antes del montaje.

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

A continuación se muestra el ejemplo completo.

Ejemplo

<!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>

Esto producirá el siguiente resultado:

RIOT funciona creando etiquetas html personalizadas y reutilizables. Estas etiquetas son similares a los componentes web y se pueden reutilizar en todas las páginas y aplicaciones web. Cuando incluye el marco RIOT en su página HTML, el js importado crea una variable riot que apunta a un objeto riot. Este objeto contiene las funciones necesarias para interactuar con RIOT.js, como crear y montar etiquetas.

Podemos crear y utilizar etiquetas de dos formas.

  • Inline HTML- Llamando a la función riot.tag (). Esta función toma el nombre de la etiqueta y la definición de la etiqueta para crear una etiqueta. La definición de la etiqueta puede contener HTML, JavaScript y CSS, etc.

  • Seperate Tag file- Almacenando la definición de la etiqueta en un archivo de etiqueta. Este archivo de etiqueta contiene una definición de etiqueta para crear una etiqueta. Este archivo debe importarse en lugar de la llamada riot.tag ().

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

A continuación se muestra el ejemplo de etiqueta en línea.

Ejemplo

<!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>

Esto producirá el siguiente resultado:

A continuación se muestra el ejemplo de etiqueta de archivo externo.

Ejemplo

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>

Esto producirá el siguiente resultado:

RIOT js usa {} para definir expresiones. RIOT js permite los siguientes tipos de expresiones.

  • Simple Expression - Definir una variable y utilizarla dentro de una etiqueta.

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

  • Evaluate Expression - Evaluar una variable cuando se usa en una operación.

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

  • Get value from Options object - Obtener el valor que se pasa a la etiqueta mediante atributos.

Ejemplo

A continuación se muestra el ejemplo completo de los conceptos anteriores.

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>

Esto producirá el siguiente resultado:

Las etiquetas js de RIOT pueden tener su propio estilo y podemos definir estilos dentro de las etiquetas que afectarán solo el contenido dentro de la etiqueta. También podemos establecer una clase de estilo usando scripts y dentro de una etiqueta. A continuación se muestra la sintaxis de cómo lograr el estilo de las etiquetas 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>

Esto producirá el siguiente resultado:

Los condicionales son construcciones que se utilizan para mostrar / ocultar elementos de etiquetas RIOT. Los siguientes son los tres condicionales que apoya RIOT:

  • if - agregar / eliminar elemento basado en el valor pasado.

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

  • show - muestra un elemento usando style = "display:' ' "si es cierto.

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

  • hide - oculta un elemento usando style = "display:'none' "si es cierto.

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

Ejemplo

A continuación se muestra el ejemplo completo.

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>

Esto producirá el siguiente resultado:

El rendimiento es un mecanismo para colocar contenido html externo en una etiqueta RIOT. Hay varias formas de obtener un rendimiento.

  • Simple Yield- Si queremos reemplazar un único marcador de posición en la etiqueta. Entonces usa este mecanismo.

<custom3Tag>
   Hello <yield/>
</custom3Tag>
<custom3Tag><b>User</b></custom3Tag>

  • Multiple Yield- Si queremos reemplazar varios marcadores de posición en la etiqueta. Entonces usa este mecanismo.

<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>

Ejemplo

A continuación se muestra el ejemplo completo.

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>

Esto producirá el siguiente resultado:

Podemos adjuntar eventos a elementos HTML de la misma manera que accedemos a elementos HTML usando refs object. Como primer paso, agregamos un atributo ref a un elemento DOM y accedemos a él usando this.ref en el bloque de script de la etiqueta.

  • Attach ref - Agregar atributo ref a un elemento DOM.

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

  • Use the refs object- Ahora usa el objeto refs en el evento de montaje. Este evento se activa cuando RIOT monta la etiqueta personalizada y rellena el objeto refs.

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

Ejemplo

A continuación se muestra el ejemplo completo.

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>

Esto producirá el siguiente resultado:

Podemos acceder a elementos HTML usando refs object. Como primer paso, agregamos un atributo ref a un elemento DOM y accedemos a él usando this.ref en el bloque de script de la etiqueta.

  • Attach ref - Agregar atributo ref a un elemento DOM.

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

  • Use the refs object- Ahora usa el objeto refs en el evento de montaje. Este evento se activa cuando RIOT monta la etiqueta personalizada y rellena el objeto refs.

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

Ejemplo

A continuación se muestra el ejemplo completo.

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>

Esto producirá el siguiente resultado:

Podemos iterar a través de la matriz RIOT de primitivas o de Objetos y crear / actualizar los elementos html sobre la marcha. Usando "cada" constructo podemos lograrlo.

  • Create array - Crea una matriz de objetos.

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

  • Add each attribute - Ahora usa el atributo "each".

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

  • Iterate array of objects - Itere la matriz usando propiedades de objeto.

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

Ejemplo

A continuación se muestra el ejemplo completo.

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>

Esto producirá el siguiente resultado:

A través de Mixin, podemos compartir una funcionalidad común entre etiquetas. Mixin puede ser una función, clase u objeto. Considere un caso de servicio de autenticación que debe utilizar cada etiqueta.

  • Define Mixin - Defina mixin usando el método riot.mixin () antes de llamar a 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 - Inicializar mixin en cada etiqueta.

this.mixin('authService')

  • Use mixin - Después de inicializar, mixin se puede utilizar dentro de la etiqueta.

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

Ejemplo

A continuación se muestra el ejemplo completo.

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>

Esto producirá el siguiente resultado:

El mecanismo Observables permite a RIOT enviar eventos de una etiqueta a otra. Las siguientes API son importantes para comprender los observables de RIOT.

  • riot.observable(element)- Agrega soporte de Observer para el elemento de objeto dado o si el argumento está vacío, se crea y devuelve una nueva instancia observable. Después de esto, el objeto puede disparar y escuchar eventos.

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

  • element.trigger(events) - Ejecuta todas las funciones de devolución de llamada que escuchan el evento dado.

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

  • element.on(events, callback) - Escuche el evento dado y ejecute la devolución de llamada cada vez que se active un evento.

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

Ejemplo

A continuación se muestra el ejemplo completo.

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>

Esto producirá el siguiente resultado: